すがブロ

sugamasaoのhatenablogだよ

もっと早く知りたかったJavaScriptテクニック

javascript

タイトルは半分釣りぽよ〜

8/31にJavaScriptテクニックバイブルが発売されます！

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

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

ありがたいことに献本いただくことができましたので、誰よりも早くレビューを書いてやろうと目論んでいます。本をもらうという意味では、以前辻さんから頂いたこともありましたが、出版にあたってのタイミングで献本してもらうって初めてのことですし、昔から献本してもらった〜(^_-)-☆っていうの憧れてたので、一つ夢が叶いました。やりましたね。

ちなみに、執筆陣の熱い想いのこもったエントリはこちら。

気になる目次はこちら

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

http://gihyo.jp/book/2012/978-4-7741-5243-1
JavaScriptテクニックバイブルについて

実際のところ、ぼくはあまりメインでJSを書かないので「JSとしてのお作法」とかって毎回調べたりするし、Aという方法とBという方法どっちが良いのかな？　なんてのを迷うことはしょっちゅうなんですね。

また、著者さまのエントリでも書いてある通り、JSの情報は古い情報もたくさんあってノイズになったりすることが多いし、正直な話、信頼できるかどうかよくわからないようなブログに行き着くことも少なくなかったりします。

そんな時にこの本があればだいぶ効率が変わってくるかなぁと思うんですよね。本当に、もっと早く知りたかったよって思います。内容としては、Tips集としての体裁なのでいわゆるクックブックに近い本になっています。

ぼくが読んだ中で特にここは知りたかったわ〜という内容を上げるとこんな感じですかね。

  • Capter 4 全般のオブジェクトの作成方法や違いについて
  • Capter 5 のネットワーク処理全般（例えばクロスドメイン通信とかWebSocketã‚„ServerSentEvent）
  • 6-12のイベントの間隔を間引くスロットルの話（やろうと思いつく割に、毎回ググるし……）
  • 8-7(scriptタグの記述位置による違い), 8-13(DOM構築の高速化)あたりのなぜ使う必要があるのか、という話とか
  • 9-1 のNode とElementの話
  • 9-14のモダンなツールチップとか
  • 10-10のpjaxとか
  • 11-4のグラフを描画するライブラリの紹介とか

他にも、テスト系のライブラリの話や開発環境（エディタとか）の話もあるので、参考にするところもあるかと思います。

読んだ率直な感想としては、ここ気になるわーっていうのがサポートされていてとても良いと思いました。ホント、なんとなく知ってるつもりになっているワナビーなJS弱者*1には心強い羅針盤になってくれる本というのは偽りなしだなと思います。

JavaScriptテクニックバイブルと私

cimadaiさんのエントリで少し言及がありますが*2、たまたま技術評論社の担当者さんと知り合う機会があって、さらに若手IT勉強会では結構長くJSについての勉強会を開いて*3、そのナレッジをどうにかできないかなぁという話をしたところ、トントン拍子に話が進んでいって本の出版という形になりました。

僕自身は執筆には関わっていないのですが、案だしの頃にちょっと打ち合わせにおじゃまさせて貰ったり、執筆後半にはレビューに参加させて貰ったりしたので、個人的にも思い入れがある本です。

そんなわけで

9月になったら若手IT勉強会で本書の読書会を行うようです。

これは本を買って参加するしかありませんね!!*4

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

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

使う用と布教用と保存用をみんな買おう!!そしてamazonにレビューを書こう!!

*1:なんとなくJS書けるけど、モダンなのよくわからないわ〜みたいな人

*2:本書でも書いてもらってた!!

*3:jQueryのソース読んだりもしたし……

*4:著者のサインを集める大チャンスや!!