デザインテクノロジーの最前線 - 桐山孝司

m.c.t.ホーム > エクスペリエンスマガジン > デザインテクノロジーの最前線 - 桐山孝司 > JavaScriptの潜在力

2009.04.15JavaScriptの潜在力


最近、ウェブのユーザ・インタフェースが使いやすくなったと思うことが多くないだろうか。例えば日付の入力フォームをクリックすると、 ページの上にカレンダーが出てくる。マウスクリックで日付を入力できるので便利だし、 西暦は4桁などとシステムの都合に合わせて再入力することもない。他にもブラウザ上で写真をドラッグ&ドロップしたり、 長いリストを折りたたんで必要な箇所だけ展開したりと、いろいろ便利な機能が使われている。 インタフェースは細部の動作が全体の使いやすさを左右するので、こういった工夫は大歓迎である。

御存知のように、ウェブブラウザの背後でインタフェースの動作を制御しているのはJavaScriptである。 JavaScriptは1995年にネットスケープ・ナビゲーターに組み込まれて以来、ウェブとともに進化してきた。 ページ構造を保持するDOMにアクセスして内容を動的に入れ替えたり、 ページの見え方を制御するCSSを利用して色やフォントの属性をコントロールしたりと、いろいろな機能を統合する役割も果たしている。 しかしプログラムが大きくなると大域変数の扱いに困ったり、ブラウザごとに仕様が違うなどやっかいなこともあり、 5年ほど前まではJavaScriptというといばらの道を行くようなイメージが持たれていたと思う。

ところがグーグルマップが登場し、JavaScriptを使って地図をダウンロードしながらスムーズにスクロールさせる、 いわゆるAjaxを実例で見せた頃から、ぐんとJavaScriptの評判が高くなった。そしてここ数年で、 JavaScriptの開発環境を整備するフレームワークがいくつも提供されるようになった。ユーザ・ インタフェースが使いやすくなったのも、背後でフレームワークが再利用可能な部品を提供していることが大きい。 特にこのところ広まっているフレームワークのjQueryでは、簡単な記法でページ構造から目的部分を抽出できるようにしている。 これは本来はDOMが標準で用意すべき機能だと思うが、その隙間をjQueryが埋めたことで、 ようやくJavaScriptからDOMへのアクセスもすっきりできるようになった。

もともとJavaScriptという言語は、関数プログラミングとプロトタイプからの継承という2つの大きな設計指針を持っている。 関数プログラミングでは、ひとまとまりの計算方法を関数というオブジェクトにしてプログラムの中で受け渡しする。その際、 関数を定義するのに使った変数も一緒に持っていくクロージャーという方法をとっている。そのため関数を渡した側が次の処理に進んでも、 関数自身はクロージャー内の変数を参照して問題なく作業を継続できるのである。 これはいろいろなタイミングでユーザの操作が入ってくるインタフェースのプログラミングにとって都合がよい。ユーザ・ インタフェースの各要素の動きをJavaScriptがコントロールできるのは、 元々の言語の設計指針が非同期性に適しているからなのである。

もう一つの設計指針であるプロトタイプからの継承とは、一つのオブジェクトから別のオブジェクトに属性や関数(メソッド) を引き継ぐ方法である。最初のオブジェクトをプロトタイプと呼び、引き継ぐオブジェクトにはプロトタイプとの違いを記述する。 プロトタイプは一見クラスと似ているが、 クラス階層が固定的なのに対してプロトタイプからの継承ではどのオブジェクトもプロトタイプにできる。 そのため1つのオブジェクトがうまく動作すればそれをプロトタイプとして他のオブジェクトに継承させる、 というような柔軟なプログラムの作り方に向いているのである。

これは人間の記憶を見れば当然なことで、例えば初めて象に会った子供にとってはその一頭が象のすべてである。次に白い象に会ったら、 これは最初の象の仲間だが色が白いという新しい特徴を覚えるだろう。何度か象に会った後では特定の象を思い浮かべて、 例外がなければ象の足は4本と範例(プロトタイプ)を使って考えられるようになる。プログラミングの言葉を借りれば、 人間の記憶はプロトタイプとの共通点と差異を見つけて、次第に継承のネットワークを広げていくことであるといえる。

関数プログラミングというJavaScriptの設計指針は、ウェブのユーザ・インタフェースを作る目的に適しており、 Ajaxとして開花した。一方、プロトタイプからの継承という設計指針はJavaScriptの優れた点であるにもかかわらず、 その良さがまだ実際のプログラムに反映されていないように思う。 恐らくブラウザをキャンバスのように使って新しいインタフェースをどんどん組み立てるような時代になれば、 柔軟なプログラミングの必要性からプロトタイプの出番が来るであろう。 JavaScriptにはこれからもAjaxのような新たなジャンルを開拓する可能性がありそうである。

 

prototype

 

 

 

 

 

プロトタイプからの継承