MD-Blog_Book Review

はじめに

近頃のWebサイト制作の現場では、様々な用途でJavaScriptを使用する機会が増えています。そのため、JavaScriptの書き方・最適化の方法について調べる時間も増えました。Webで毎回調べるのも大変なので、手元に置いておけるサンプルを網羅したリファレンス本を探していました。

そんな時に見つけたのが、JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技です。

この書籍の購入した理由

• 多様なサンプルと分かりやすいコードが載っている
• デバックからパフォーマンス改善、最新の技術まで幅広く内容が載っている
• jQueryを使わず書くにどうすればいいかが分かる

実践的なコードが多いので、これからJavaScript（jQuery）を始めたい！という方には、以下の書籍をお勧めします。

• JavaScript本格入門　~モダンスタイルによる基礎からAjax・jQueryまで
• パーフェクトJavaScript
• 開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
• JavaScript: The Good Parts
• jQueryクックブック

参考になった所

個人的に参考になった所を何点かまとめました。

chapter02 デバッグ手法を改善する / chapter03 テスト環境を改善する

僕はJavaScriptのデバックする際、FirebugやChrome Developer Toolsを使用しています。それらを利用して、変数や戻り値をconsole.logで確認するようにしていました。

書籍に書かれているウォッチウィンドウを使うと、関数の戻り値をconsole無しで確認できます。スコープの中も確認できるため、何を含んだオブジェクなのか・何が出来るのかが分かりやすいです。他にも、ツールの機能の紹介が書かれているので、とてもタメになります。

PhantomJSでローカル環境で値の確認やモックの確認を行っていましたが、コードテストや自動テストは試していませんでした。書籍には、QUnitやJasmineテスト環境の構築方法も書かれています。より安全で堅牢なコードを書くためには、テストの実施は必要な手順ですので、実践で導入したいと思います。

chapter04 関数を活用する

関数の使用方法について、簡単に確認することができます。関数について深く知りたい勉強する場合は、僕の場合は開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質やJavaScript 第6版で勉強しました。

この章では、グローバルスコープの汚染を防ぐの項目が興味深かったです。
即時関数で包むことによって、グローバルスコープの汚染を防ぐことは知っていましたが、2つのパターンがあるということはこの章を読んで理解しました。2つ書き方の違いや、どちらの方が実行コストが低いのかについても書かれています。少しでも実行コストを下げることは大切なことなので、効率化の1つとして取り入れたいと思います。

(function(){ }());
(function(){ })();

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

Webの表示を速度向上する上で、どのくらいの速さで表示されるかを知るためには、キャッシュが無い状態でチェックする必要があります。僕は今まではブラウザのキャッシュを消して、再度試していたため、効率が良くありませんでした。

ブラウザのキャッシュを無視するの項目では、どのようにキャッシュを避ける方法が書かれています。キャッシュを防ぐことによって、CSSやJavaScriptが更新されないなどの問題も解決することができます。これを応用することによって、キャッシュがない状態でのWebの表示スピードも確認することができます。

他にもネットワーク通信に関わる「これってどうやるんだっけ？」が、分かりやすいサンプルと一緒に書かれてるので、逆引きとしてとても使いやすいです。

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

これまで、HTMLが表示されないのを防ぐために、scriptタグはbody直前に書いていました。本書では、「なぜscriptタグの記述位置が違うのか？」の解説はもちろんのこと、scriptタグに記述するasyncやdeferの使い方、scriptの読み込みタイミングを制御する方法まで書かれています。

スクリプトの動的な読み込み方法もこの本には載っているので、そちらと合わせて実践で試すことで、より勉強になると思います。これらを利用して、画像やCSS、DOMのレンダリングを邪魔せず、ページを表示させることができるようになります。

他にも、DocumentFragmentの項目も参考になります。

まとめ

以上、いくつか個人的に参考になったところを紹介しました。他にも使えるテクニックが沢山載っているので、勉強になると思います。特にJavaScriptの「これってどうやるんだっけ？」がまとめられていることが、とても便利でした。

デバッグの方法から最近の技術まで幅広く紹介されています。入門書を読み終えて、いろいろとサンプルを試したい人に向いていると思います！

一言で表すと…

現場で使えるサンプル集