書籍概要

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

著者
発売日
更新日

概要

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

こんな方におすすめ

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

目次

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で記述する

サポート

ダウンロード

本書のサンプルコードをダウンロードできます。データは,圧縮ファイル形式でダウンロードできます。圧縮ファイルをダウンロードして頂き,適宜解凍してご利用ください。詳しくは,本書9ページ『本書を読む前に』を参照してください。

ダウンロード
JS.zip

正誤表

本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。

(2012年10月19日更新)

P.19 1-3

C-x C-v Emacsを終了する
C-x C-c Emacsを終了する

P.46 1-12

Firefox3系からaddon builderというツールを利用して開発するように変更されました。
Firefox4系からはそれ以外に、Add-on Builderというツールを利用して開発できるように変更されました。

P.50 1-13

手順に誤りがなければ図1のようなアラートダイアログが表示されます。
手順に誤りがなければアラートダイアログが表示されます。

P.59 2-4

Assertion failed: x is ...
Assertion failed: y is ...

a number velue is... Object
a number value is... Object

P.122 4-5

JavaScript の各オブジェクトは prototypeと呼ばれるプロパティがあり、これに対して、各オブジェクトごとのプロパティを追加していきます。
各オブジェクトは prototype プロパティを必ず持ち、ここに元となるオブジェクトを格納しています。
JavaScript の各オブジェクトは newで作成される際にその関数オブジェクトの prototypeと呼ばれるプロパティをもとに作られ、これに対して、
各オブジェクトごとのプロパティを追加していきます。
関数オブジェクトは prototype プロパティを必ず持ち、ここに元となるオブジェクトを格納しています。

P.191 6-1 (表3)

addEventListnr
addEventListner

userCapture
useCaputre

P.192 6-1

userCapture
useCaputre

seCapture
useCaputre

removeできない
削除できない

P.357 10-4

gray = parseInt((red + green + blue) / 3, 10);
gray = Math.floor((red + green + blue) / 3);

P.358 10-4

gray = Math.floor((red + green + blue) / 3, 10);
gray = Math.floor((red + green + blue) / 3);

P.370 10-9

alert(localStorage.getItem('foo');   // => 'bar'
alert(localStorage.getItem('foo'));   // => 'bar'

alert(sessionStorage.getItem('foo');   // => 'bar'
alert(sessionStorage.getItem('foo'));   // => 'bar'

P.388 11-2

JQuery
jQuery

商品一覧