『ステートフルJavaScript』――JavaScriptを堅牢に築くパーツの世界

プログラミングスキル

» 2012/09/07

ステートフルJavaScript ――MVCアーキテクチャに基づくWebアプリケーションの状態管理 Alex MacCaw （著）、 牧野 聡（(翻訳） オライリージャパン 2012年6月 ISBN-10: 487311554X ISBN-13:978-4873115542 2940円（税込）

■JavaScriptを堅牢に扱いやすくするための本

　JavaScript関連の本を読むときに気を付けなければならないこと。「この本は、どの立ち位置なのか？」「何が言いたいのか？」を知ること。

　これらをきちんと理解して読まないと、とんでもない回り道をするはめになる。サーバサイドからクライアントサイドまで、JavaScriptがカバーする範囲は幅広いからだ。

　さて、本書の立ち位置はというと、カルーセルやアコーディオンのような、見た目を変化させるjQueryプラグインの紹介は一切ない。ユーザーインターフェイスを求めている人向けの本ではない。

　サブタイトルには「MVCアーキテクチャに基づくWebアプリケーションの状態管理」とある。ぼんやりとでも、この意味が分からなければ、読み解くことは難しい。ここでもあえてMVCの説明はしない。MVCの話が出るということは、「フレームワークの解説か」と思いきや、それも違った。もう少し細かいパーツの世界、フレームワークを構成する部品についての話である。

　つまり、JavaScriptを堅牢に扱いやすくするための本だと思えばいい。本書は、「フレームワーク」という大きな世界観を構成する小さな部品について書かれている。これは、JavaScriptで世界を築くための道しるべとなる。

■目次

• 1章　 MVCとクラス
• 2章　イベントと監視
• 3章　モデルとデータ
• 4章　コントローラと内部状態
• 5章　ビューとテンプレート
• 6章　依存性の管理
• 7章　ファイルの操作
• 8章　リアルタイム Web
• 9章　テストとデバッグ
• 10章　アプリケーションのデプロイ
• 11章　 Spineライブラリ
• 12章　 Backboneライブラリ
• 13章　 JavaScriptMVCライブラリ

　前半はパーツ寄り、後半はライブラリの紹介だ。このコラムでは前半部分、その中でもアーキテクチャよりのトピックを拾いながら考察を深めよう。

■Class is difficult to use

　アーキテクチャ寄りの話では、関数型言語的側面からJavaScriptを攻略するのが最近の流行である。しかし、本書では、JavaScriptをオブジェクト指向言語として扱う。不易流行。

　まずは、クラスの考察から本書は始まる。

　JavaScriptはプロトタイプに基づく言語であり、それゆえにネイティブなクラスの実装というものは存在しません。しかしクラスの性質をエミュレートするのは容易です。

　JavaScriptでクラスを扱うのは難しい。オブジェクト指向言語では当たり前にある、クラスにアクセス制限を与えることでさえ、容易ではない。アクセス制限は、匿名関数の空間を閉じ込めることで、プライベート変数やプライベートメソッドを実現する。カプセル化を実現するためだけでも、知っておくべきことは多い。

　本書のサンプルから、もう少しかんたんな例を見よう。

var Person = function(name){
    this.name = name;
}

var alice = new Person('alice');
var bob = Person('bob'); // undefined!!

　JavaScriptは、細心の注意をもって記述する。こんなシンプルなコードが new演算子1つで変わる。new をつけない Person('bob') を実行するとどうなるだろう？ 変数 bobが undefinedになるだけではすまされない。恐るべきことに、このコードはnameというグローバル変数を生み出してしまう。

　なぜか？

　new演算子は、コンテキストであるthisをインスタンス固有のオブジェクトに設定する。しかし、new演算子がなければ、単なる関数呼び出しでしかない。 関数呼び出し時のthis は windowオブジェクトを指す。つまり this.name は window.nameとなり変数nameはグローバル変数となる。それが邪悪な行為であることは言うまでもない。

■Event is easy to use

　JavaScriptのイベントと聞いて、何を思い浮かべるだろうか？ まっ先に思い浮かぶのは、マウスのクリックや、入力エリアの値が変更されたときに連動した動きなどだろう。そういったユーザー操作のイベントは別の本に任せておこう。

　JavaScriptでは、プログラマが任意のタイミングで好きなイベントを発生できる。そして、そのイベントを自在に受け取れる。この仕組みがJavaScriptを輝かせる。イベント駆動のプログラムがかんたんに組めるメリットは、先ほどのクラスを作るためのデメリットを相殺する。

　イベントベースのプログラミングは、アプリケーションのアーキテクチャを疎結合化できるという点で非常に強力です。

　パブリッシュ／サブスクライブと呼ばれるメッセージ交換パターンは、プログラム間の依存性を低め、オブジェクトの独立性を高める。イベントというトリガーを自分自身のなかに持つことができるからだ。イベントベースのオブジェクトは他者から直接、呼び出されることなく状態が変化する。そのメリットが理解できなければ本書を読むのはまだ早い。

　かつてのMVCパターンはページが軸であった。1つのリクエストは、1つのページを表示することが当たり前の世界であった。StrutsなどのMVCアーキテクチャはページ単位を基本とする。せいぜいフレームやパネルという単位で疎結合であれば十分であった。

　Ajaxは世界を変えた。Ajax全開のアプリケーションでは、時としてDOM要素の1つ1つが、MVCの最小粒度になる。コンポーネントですら依存関係を持つことは許されない。Wicketやclickのようなコンポーネントベースのフレームワークの出現がそれを物語る。もはやMVCはページ単位ではない。主役の座はコンポーネントである。

　あるボタンを押すことや、ちょっとしたマウス操作をきっかけに、何かが変わる。そんな要件を満たすためにパブリッシュ／サブスクライブパターンがかんたんにできる言語は強力な武器となる。複雑な動作をするコードは「なんか、よう分からんけど、動いたからいいか」ではダメだ。

　本来、疎結合なプログラム、堅牢なプログラムは言語に依存しない。この本にはMVCアーキテクチャを実現するために考えるべき要素がたくさん詰まっている。特定の言語を抜きにして触れるのも面白い。

■How to build software

　JavaScript本を読むと、小さなテクニックの断片が目立つ。油断すると、ブラウザごとの差異やちょっとしたTipsをたくさん知ることがJavaScriptを勉強することだと勘違いする。そして、それをどれだけ知っているかが優秀なJavaScripterであるかのような錯覚をする。

　プログラム言語を学ぶとは、そんなことではない。「べからず集」を覚えることがプログラムではない。

　ロジックをいかに組むか――オブジェクト指向だけでなく関数型言語やファーストクラスオブジェクトを理解するとがJavaScriptの真の学習であるはずだ。本書が、プログラムとは何かを考えるきっかけの1つになればと思う。