書籍概要

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

商品一覧