JavaScriptパターン

著作権侵害にならない程度に読書ノートを書く。

JavaScriptパターン ―優れたアプリケーションのための作法

JavaScriptパターン ―優れたアプリケーションのための作法


ECMAScript5対応。本書のサンプルコードは"use strict";している前提。

私が感じた想定読者

  • 構造化されたJSコードを書きたい人向け。つまりDOM操作だけではなく、Server Side Javascriptなど。

解説されるパターン

以下、内容ノート

Javascriptの概念

  • オブジェクト
    • プロパティをもつ
      • プロパティはオブジェクトである
      • メソッドはプロパティであり、オブジェクトである
    • ネイティブオブジェクト: ECMAScript標準
    • ホストオブジェクト: DOMなど
  • クラスは存在しない (GoF曰く"クラス継承よりもオブジェクトのコンポジションが好ましい")
    • 継承にはprototypeプロパティを使う

実行環境

  • JSLint
  • FirebugとかのJS Console上で動かせる

必須パターン

for (var i = 0, max = a.length; i < max; i += 1) { ... }
return { //改行を入れない。自動的に;が付加される可能性がある
  "key": "value";
}
  • 命名規則(この辺はプロジェクトによる)
    • コンストラクタは大文字始まり MyConstructor()
    • メソッド,プロパティはキャメルケース getHoge(), myValue
    • 言語仕様に無いもの
      • 定数 MAX_LENGTH
      • プライベートメンバ _setNext() など

オブジェクトリテラル記法を使う

関数

  • コールバックパターン
    • コールバック引数では()を付けない。つけると即時実行されてしまう。(無名関数のコールバックでは大丈夫)
      • コールバックになる: myFunc(callbackFunc)
      • 実行された値が入ってしまう: myFunc(getValue())
  • 戻り値を関数にする
    • return function () { ... } とすると、上位の関数はクロージャーを作成しプライベートプロパティを保持する
  • 使いどころが難しいやつ(私感) このへんは用語をぐぐるためのメモ程度
    • 自己定義関数
    • 即時関数: グローバル変数を残さずに処理を包む
      • 処理に使う変数のスコープが限定されるので、初期化処理に便利
      • クロージャーと組み合わせたり、オブジェクトプロパティの値として使ったりすることもできる
(function () {
  // inner scope
})();
    • 即時オブジェクト初期化
    • 設定オブジェクト: 引数を連想配列の形式の単一オブジェクトにする
    • カリー化 ここでの"カリー"はHaskell Curryに由来する
      • 同じ関数をほとんど同じパラメータで呼び出している箇所があるとき便利

名前空間

  • var hoge = fuga;をいきなりグローバルで書かずに, MYAPP = {}; MYAPP.hoge = fuga;みたいにするべき。工夫して、上書きチェックもできるとよい
  • コンストラクタ関数でクロージャーを作成すればプライベートメンバを作れる
  • prototypeプロパティ内に記述したものは、newしてもメモリを共有する

継承

  • ES5の場合
var child = Object.create(parent, {prop: "new property"});
  • 様々なJSライブラリにも実装例がある

メソッドのコンポジション

  • call()/apply()を使う
  • ES5ではbind()を使う

GoFデザインパターン

Javascriptは簡単にGoFデザインパターンを構築できる。

読み解くには先にJavaなど静的型付け言語で勉強しておくのもいいと思う。ただ、この本だけでも実例付きで簡単に説明してあるので、どちらを先にやってもいい。

AngularJSなどのライブラリを使う時も定番パターンを知っていれば理解が早そうだ。

本で紹介されているのは9パターン

  • シングルトン, ファクトリ, イテレータ, デコレータ, ストラテジー, ファサード, プロキシ, メディエータ, オブザーバ

DOMの扱い

ライブラリ作者は読んだほうがいいかもしれないが、素のJavascriptでDOM操作する気にはなれないのであまり読んでない。新規にWebのプロジェクトを行うのであればモダンなライブラリに任せたほうが無難。

ブラウザ間差異の吸収コードをエンジニアが書くというのがそもそもおかしいように思う。他の言語で例えるなら、CPU命令セットの違いを考慮してPythonを書くの?って感じだ。

確かにアーキテクチャまで理解しているプログラマのほうが優秀なのは分かるんだけど、Web界隈のそれは単にプラットフォームとロジックの分離が洗練されていないだけじゃんか...

感想

買いだと思う。パターンは言葉で表せるものもあるが、コードで確認しないとわからないのもある。目的志向で解説してあるから有効な場面を想像しやすい。