JavaScriptテクニックバイブル
~効率的な開発に役立つ150の技

書籍の概要

この本の概要

昨今のWebアプリケーションでJavaScriptは必須な言語となっており,サーバサイドからフロントエンドまで広く使われ,HTML 5の普及もありWeb開発の中心となりつつあります。本書は,Web開発者向けに,読んですぐ利用できるテクニックや便利なライブラリを150のTips形式で紹介する「開発効率の改善に特化したリファレンス」です。

こんな方におすすめ

  • JavaScriptの入門書を読み終わり,実践的なことを始めようと思っているエンジニア
  • JavaScriptを普段業務で使っている1年目から2年目のエンジニア
  • 普段なんとなくjQueryを使っているエンジニア
著者プロフィール

嶋田大輔(しまだだいすけ)

@cimadai

デスクトップアプリケーションやWebフロントエンド,バックエンドなど,各種OS・言語を使い開発するオールラウンダー系エンジニア。現在はWinny作者に惹かれて入社した株式会社Skeedにて開発に従事。

新卒時代に勉強会で出会ったamachang氏に感銘を受け,自らも業務の傍らで勉強会を開催する。そこで得た知識の出力をきっかけとして本書を執筆。

若手IT勉強会:http://www.wakateit.org

中村真人(なかむらまさと)

@masahito

いわゆる普通のエンジニア。業務システム開発,Webアプリ開発を経験し,現在は東京の某ソフトウェア会社で開発に従事。

JavaScriptとは業務を通じて出会い,シンプルで強力なところに惹かれて現在に至る。

池徹(いけとおる)

@rokujyouhitoma

雑食ソフトウェアエンジニア。教育研修コンサルタント,SIer,外資系サーチエンジンを経て,オーストラリアの企業から忍者の称号を授るが抜け忍となる。

現在はソーシャルゲームプラットフォーマーでゲームライブラリやGUIツールの作成に従事。どうやらJavaScriptとは因縁の仲。

好きな言語はJavaScript,Scheme,Python,Scala

岩永賢明(いわながよしあき)

言語のつまみ食いが趣味のソフトウェアエンジニア。元ゲーム業界出身。仕事はサーバサイドの^Java(Script)?$が中心だが,そろそろScalaでお仕事がしたいと思っている。

最近はボルダリングにのめり込んでしまい,平日の夜は壁に向って膝蹴りを繰替えす日々。

浜辺将太(はまべしょうた)

学生時代,アリエルネットワーク株式会社にアルバイトとして入社。JavaScriptを覚え,Emacsに改宗する。2009年にヤフー株式会社に入社。テレビ向けソフトウェアキーボードの開発や,スマートフォン版GyaO!の開発に携わる。

最近では社内でHTML5やNode.js,Emacsの啓蒙活動に勤しんでいる。

藤木裕介(ふじきゆうすけ)

デザイナー兼フロントエンドエンジニア。主にスマートフォン向けのWebサービスの開発を行っている。HTML5/CSS3/JavaScriptが大好きで,これらの周辺技術を使えば何でもできるんじゃないかと思い込んでいる。

この書籍に関連する記事があります!

エンジニアの開発に役立つ逆引きリファレンス
テクニックバイブルシリーズはスピンオフ企画も含め,これまで3冊発行されています。

目次

Chapter01 開発を取り巻く環境を改善する

  • 1-1 Web上で記述・実行・公開するサービスを知る
  • 1-2 Vimで便利な開発環境を整える
  • 1-3 Emacsで便利な開発環境を整える
  • 1-4 WebStormで開発を行う
  • 1-5 IE 8以降で開発者ツールを使ったデバッグを行う
  • 1-6 FiddlerでHTTP通信のデバッグを行う
  • 1-7 IEの各バージョンで動作確認をする
  • 1-8 FirefoxでFirebugを使ったデバッグを行う
  • 1-9 WebInspectorを使ったデバッグを行う
  • 1-10 OperaでDragonFlyを使ったデバッグを行う
  • 1-11 ユーザスクリプトで既存のWebサイトをカスタマイズする
  • 1-12 ブラウザ拡張を作成する
  • 1-13 ブックマークレットを作成する

Chapter02 デバッグ手法を改善する

  • 2-1 圧縮されたスクリプトを読みやすくする
  • 2-2 前提条件を表明する
  • 2-3 printデバッグを行う
  • 2-4 Console APIを使ってデバッグを行う
  • 2-5 条件付きブレークポイントを扱う
  • 2-6 ステップ実行を活用する
  • 2-7 実行中のある時点での変数の値を調べる
  • 2-8 コードのプロファイルを行う
  • 2-9 関数を拡張して引数のデバックを行う
  • 2-10 発生したエラーをサーバに集約する
  • 2-11 Firebugの拡張を利用する
  • 2-12 スマートフォンブラウザのリモートデバッグを行う

Chapter03 テスト環境を改善する

  • 3-1 QUnitでユニットテストを行う
  • 3-2 Jasmineでユニットテストを行う
  • 3-3 Sinon.JSでモックを利用したテストを行う
  • 3-4 PhantomJSでブラウザを使わずにテストを行う
  • 3-5 js-test-driverで複数ブラウザでの同時テストを行う
  • 3-6 jscoverageでコードカバレッジの測定を行う
  • 3-7 Closure Compilerで型チェックを行う
  • 3-8 JSHintでコーディングスタイルをチェックする
  • 3-9 JSDoc Toolkitを活用してドキュメントを記述する
  • 3-10 Seleniumで画面遷移を伴うテストを行う
  • 3-11 QUnit-TAPでテスト結果をTAP形式で出力する
  • 3-12 JenkinsでテストをCIに組み込む

Chapter04 関数を活用する

  • 4-1 3種類の関数定義の違いを理解する
  • 4-2 任意のオブジェクトをthisとして別の関数を実行する
  • 4-3 JavaScriptでのオブジェクト指向プログラミングを理解する
  • 4-4 関数で可変長引数を扱う
  • 4-5 プロトタイプを理解する
  • 4-6 関数スコープを理解する
  • 4-7 名前空間を活用する
  • 4-8 高階関数を扱う
  • 4-9 名前付き匿名関数で再帰を扱う
  • 4-10 関数オーバーロードを実現する
  • 4-11 関数のデフォルト引数を実現する
  • 4-12 グローバルスコープの汚染を防ぐ
  • 4-13 グローバルオブジェクトを参照する
  • 4-14 安全にundefinedを参照する
  • 4-15 関数の部分適用を実現する
  • 4-16 with文の危険性を理解する

Chapter05 ネットワーク通信を改善する

  • 5-1 URI形式でエンコード/デコードを行う
  • 5-2 XMLHttpRequestを利用する
  • 5-3 XMLHttpRequest Level2で別ドメインと通信する
  • 5-4 安全にクロスドメイン通信を行う
  • 5-5 JSONPでデータを取得する
  • 5-6 ブラウザのキャッシュを無視する
  • 5-7 画像をdata URL schemeでインライン化する
  • 5-8 画像を表示前にダウンロードする
  • 5-9 JSONとJavaScriptオブジェクトの相互変換を行う
  • 5-10 スクリプトを動的に読み込む
  • 5-11 LABjsでスクリプトの並列読み込みを行う
  • 5-12 スクリプトの読み込み時に依存関係を解決する
  • 5-13 WebSocketでデータを受け取る
  • 5-14 ServerSentEventsでデータを受け取る
  • 5-15 画面スクロールにあわせて画像を遅延読み込みする

Chapter06 タイマー・イベントを活用する

  • 6-1 イベントリスナーを活用する
  • 6-2 イベント伝播を理解する
  • 6-3 ドキュメントのロード時に関数を実行する
  • 6-4 マウスからの入力を扱う
  • 6-5 キーボードからの入力を扱う
  • 6-6 ドラッグアンドドロップを実現する
  • 6-7 カスタムイベントでコードとイベントを疎結合にする
  • 6-8 setTimeoutで指定した時間の後に処理を実行する
  • 6-9 setIntervalで指定した間隔で処理を繰り返し実行する
  • 6-10 タイマーを使ってUIのブロックを回避する
  • 6-11 1つのタイマーでアニメーションの制御を行う
  • 6-12 頻繁に実行される関数の実行間隔を調整する
  • 6-13 スマートフォンの向きを検知して画面表示を切り替える
  • 6-14 タッチイベントを活用する

Chapter07 組み込みオブジェクトを活用する

  • 7-1 forEachやmapなどの反復メソッドを理解する
  • 7-2 typeof演算子でオブジェクトの型判別を行う
  • 7-3 値の型変換を行う
  • 7-4 文字列をJavaScriptとして実行する
  • 7-5 日付と時間を扱う
  • 7-6 例外処理を理解する
  • 7-7 配列風オブジェクトにArrayのメソッドを適用する
  • 7-8 正規表現で検索・置換・分割を行う
  • 7-9 文字と数値を結合する
  • 7-10 文字列を整形する
  • 7-11 配列をソートする
  • 7-12 配列を操作する

Chapter08 パフォーマンスを改善する

  • 8-1 処理速度を計測する
  • 8-2 継続渡しスタイルで書くことでUIのブロックを回避する
  • 8-3 2分探索で配列検索速度を向上させる
  • 8-4 スタック・キューを実現する
  • 8-5 データにインデックスを貼って高速に検索する
  • 8-6 リテラルを使う事によって速度改善する
  • 8-7 scriptタグの記述位置による違いを理解する
  • 8-8 スコープチェーンの束縛で速度改善を行う
  • 8-9 スクリプトを圧縮する
  • 8-10 文字列の連結を高速化する
  • 8-11 複数の画像をまとめて読み込む
  • 8-12 YSlowでページの読み込み速度を計測する
  • 8-13 DocumentFragmentでDOM構築を高速化する

Chapter09 DOMを活用する

  • 9-1 NodeとElementの違いを理解する
  • 9-2 CSS3でアニメーションを実現する
  • 9-3 CSSセレクタでDOMを走査する
  • 9-4 DOMベースのクロスサイトスクリプティングを防ぐ
  • 9-5 動的に要素のクラスを変更する
  • 9-6 動的にスタイルシートルールを変更する
  • 9-7 要素の位置やサイズを取得する
  • 9-8 フォームの多重送信を防止する
  • 9-9 チェックボックスを操作する
  • 9-10 ページ上の任意の位置へスクロールする
  • 9-11 HTMLをテンプレートで生成する
  • 9-12 DOM要素を効率良くアニメーションさせる
  • 9-13 ContentEditableで編集可能なHTMLを作る
  • 9-14 ツールチップを利用する
  • 9-15 テキストの選択範囲を取得する

Chapter10 HTML5を活用する

  • 10-1 古いブラウザで新しい機能を使う
  • 10-2 センサーを利用してデバイスの傾きを検出する
  • 10-3 Hammer.jsでジェスチャーを判定する
  • 10-4 画像や動画をcanvasで加工する
  • 10-5 Geolocation APIで位置情報を取得する
  • 10-6 オフラインでアプリケーションを動作させる
  • 10-7 WebSocketを利用する
  • 10-8 大量のファイルをバックグラウンドで読み込む
  • 10-9 クライアントサイドにデータを保存する
  • 10-10 pjaxを利用する
  • 10-11 要素に独自のデータ属性を定義する
  • 10-12 getter/setterを定義する
  • 10-13 strictモードを利用する
  • 10-14 video要素で動画を再生する
  • 10-15 デスクトップ通知を利用する

Chapter11 ライブラリを活用する

  • 11-1 JSDeferredで非同期処理を記述する
  • 11-2 Backbone.jsでJavaScriptを構造化する
  • 11-3 CoffeeScriptでシンプルにJavaScriptを記述する
  • 11-4 Flotr2でグラフやチャートを描画する
  • 11-5 GmapsでGoogleマップを表示する
  • 11-6 Underscore.jsの便利な関数を使用する
  • 11-7 jQueryでUIを効率的に作る
  • 11-8 Prototype.jsで動的Webページを作る
  • 11-9 Senchaでリッチなスマートフォン向けサイトを作る
  • 11-10 Titaniumでスマートフォンアプリを作る
  • 11-11 Closure ToolsでWebアプリケーションを開発する
  • 11-12 Globalizeで国際化を行う
  • 11-13 Node.jsでサーバサイドをJavaScriptで記述する