MD-Blog_Book Review

Ken.Otsukaも書いているとおり、今日のWebサイト制作では、JavaScriptのスキルは必須になってきているかと思います。
そこで少し最適化を意識するということも必須になってきてるのでは？と思い、昔に読んだことはあるのですが、再度JavaScriptコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くためにを読み直してみることにしました。

購入した理由

• 1つの処理を違う書き方をしてベンチマークを計っている
• 各端末（PC＆スマホ）の各ブラウザでベンチマークを計っている
• 「こう書くべき」と「こう書くのはNG」と、BestとWorstのコードが記載されている
• デバッグのヒントになる内容が載ってる

個人的に参考になった箇所

chapter03 開発効率 [クォートエスケープ]

JavaScriptは文字列を括る時にダブルクォート(")とシングルクォート(')が使用可能です。
結構、MONSTERSの中では"のダブルクォートを使用する人が多いかと思いますが、シングルクォートを使った方がいいよ！ってことです。
理由としては、以下のケースではダブルクォートだとエスケープ処理が必要で、シングルクォートだとエスケープ処理の必要がありません。

例：

// ダブルクォート
var _str = "\"hello world\"";
console.log(_str); //output: "hello world"
// シングルクォート
var _str = '"hello world"';
console.log(_str); //output: "hello world"

見ての通り、シングルクォートの方が簡単に書けるかと思います。
これは開発の効率化でもあり、余計なバグを出すということを防げます。

実際のプロジェクトでは、DOMの中に文字列で生成したDOMをappendする時に使えますね。

chapter04 高速化 [プロトタイプの追加とプロパティの追加]

最近のJavaScriptの書き方だと、prototypeを使用してクラスっぽい振る舞いをさせて（JSはObject指向的にちゃんとしたクラスではないので振る舞いという言葉で表現しました）、prototypeに追加したクラス変数やプロパティを作成して、親側からそのクラス変数などにアクセスしていますが、prototypeではなく単純なプロパティとして追加した場合、どちらが速いかを検証してくれています。

ベンチマークの結果としては、prototypeに追加するのではなく単純なプロパティに追加する方が、どのブラウザも処理が早いようです。
オブジェクト自身を動的にたどったりしないなら、後者のプロパティに追加した方がいいですね。
（なんでもかんでもprototypeを使うなって事っすな）

chapter04 高速化 [論理演算子におけるtrueとfalse]

以外と気にしない点なのですが、論理演算子（if）もtrueとfalseで速度が違います。
結果としてはfalseの方が速いので以下の様な書き方が良いかと思います。

例：

var _bool = true;
if(!_bool) {
console.log('false');
} else {
console.log('true');
}
// 三項演算子
!_bool ? console.log('false'); : console.log('true');

これもなるべく使うように心がけるだけで最適化につながります。

まとめ

少ないですが、個人的に参考になった箇所を紹介しました。まだまだ本書には様々な最適化の方法などが記載されています。
自分でベンチマークを計る関数を書いてもいいんですが、この本に載ってることは試す必要がないので、時間の短縮になります。
また、使用されているベンチマークを計るクラスが記載されているので、自分で「この処理って速いっけ？」と思ったら試すのもアリな気がします。

一言で表すと…

高速かつ最適化のコードを書くための本