Comparators―比べてみればわかること

第2回 マークアップ vs. ツリー

この記事を読むのに必要な時間:およそ 4 分

Webのフロントエンドで仕事をしているみなさんに質問があります。あなたにとってWebのプログラミングは,HTMLというマークアップを読み書きすることですか。それともDOMDocument Object Modelというツリー構造の操作でしょうか。今回は,この2つの関係を考えてみたいと思います。

マークアップ主義とテンプレートエンジン

HTMLを書くのは簡単です。テキストにいくつかタグを付け足せば最低限のHTMLはすぐにできあがります。プログラミングの必要なDOM操作と比べると,このわかりやすさはHTMLの大きな利点です。

Web開発がマークアップの読み書きだと答えた人の多くは,おそらくRuby 用のERBやJava のJSPJavaServer Pages)⁠Python向けのJinjaなど,サーバサイドで動くテンプレートエンジンを使っていることでしょう。テンプレートエンジンはHTMLのわかりやすさに簡潔さを加えてくれます。共通部分をモジュール化して冗長さを減らせるからです。

テンプレートエンジンなどHTML中心のフロントエンド開発を,本稿ではマークアップ主義と呼ぶことにします。わかりやすさと簡潔さを兼ね備えたマークアップ主義はWeb開発の一大勢力です。テンプレートエンジンはその中心でマークアップ主義者のメンタルモデルを支えています。

マークアップ主義には弱点もあります。たとえば対話的な機能interactivityは苦手です。イベントハンドラを使い操作に応じて表示内容を変更する。HTML単体にそんな対話性はありません。CSSで事足りるケースもありますが,たいていはJavaScriptを使ったDOM操作に踏み込む必要があります。

マークアップ主義の世界は一方通行です。HTMLという入力から出力である画面表示へ,処理はまっすぐ進んでいきます。HTMLから画面にまっすぐに進む一方通行。この制限によってマークアップ主義はわかりやすさを手に入れました。テンプレートエンジンがあっても一方通行に変わりはありません。しかしJavaScriptによる対話性はそれを壊してしまいます。

jQuery

jQueryは対話性を求めるマークアップ主義者を助けるヒーローです。jQueryならHTMLのわかりやすさを保ちながらページに対話性を持ち込めるからです。検索を宣言的に行うCSSセレクタ,フレームワークの中にfor文を隠す自動ループ,セレクタを拡張するかのようなメソッドチェイン。jQueryのスタイルは,どれもJavaScriptが持つ手続き型プログラミングの性格を隠してくれます。隠し切れない部分もなんとかプラグインに押し出して蓋をするのが流儀。jQueryは,対話的な機能をマークアップ主義の一方通行モデルで解釈しなおす試みなのです。

ツリー主義とGUIツールキット

マークアップ主義の対極にあるのがDOM中心のアプローチです。本稿ではこれをツリー主義と呼ぶことにします。HTMLのテキストを作るマークアップ主義に対し,ツリー主義ではJavaScriptのAPIでDOMツリーを作ります。いわゆる「Webサイト」がマークアップ主義を好むのに対し,たとえばGmailのように対話性を重視した「アプリケーション」サービスはツリー主義に進む傾向があります。

ツリー主義の強みは密度が高く反応が速いユーザインタフェースの開発です。ユーザの操作に応じ,JavaScriptで即座にページを書き換えるのです。ページ遷移も少なく,同一画面に機能を盛り込みます。こうした高い対話性を追い求めるツリー主義では,ページの書き換えというDOMの操作そのものに軸足を置きます。こうなると一方通行のマークアップ主義に立つ瀬はありません。

マークアップ主義者がテンプレートエンジンを使うように,多くのツリー主義者は「GUIツールキット」と呼ばれるJavaScriptのライブラリを使います。Mac OSのCocoaやJavaのSwing,あるいは.NETのFormsなどを模したGUI構築用のライブラリです。歴史あるネイティブアプリケーションの世界から対話的プログラミングのパターンを持ち込んだわけです。Ext JSSproutCoreClosure LibraryなどがJavaScript版GUIツールキットとして知られていますリスト1)⁠

リスト1 Ext JSのサンプルコード

var childPanel1 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 1',
    html: 'A Panel'
});

var childPanel2 = Ext.create('Ext.panel.Panel', {
    title: 'Child Panel 2',
    html: 'Another Panel'
});

Ext.create('Ext.container.Viewport', {
    items: [ childPanel1, childPanel2 ]
});

出典:http://docs.sencha.com/ext-js/4-0/#!/guide/components

テンプレートエンジンはHTML片をモジュール化しました。GUIツールキットはDOMツリーの断片をモジュール化します。たとえばDOMでカレンダーコントロールを作るには数十のDOMノードが必要でしょう。ツールキットの流儀ではそれを単一のウィジェットとしてオブジェクトにまとめます。カレンダーコントロールならCalendarウィジェットを定義するわけです。

多くのウィジェットは入れ子になっています。そして入れ子構造をツリーで表現します図1)⁠多くのツリー主義者はDOMツリーの代わりにGUIツールキットのウィジェットツリーを相手にコードを書きます。マークアップ主義者がHTMLを越え,テンプレートの語彙で考えるのと同じです。

図1 ウィジェットツリーとDOMツリー

図1 ウィジェットツリーとDOMツリー

ウィジェットはGUIの外見だけでなく,振る舞いもカプセル化します。これがテンプレートとの違いです。テンプレートでもカレンダーの外見を作ることはできます。しかしテンプレートから生成されたHTMLに振る舞いを付け加えるのは外見の再利用ほど簡単ではありません。HTMLとCSSに閉じないからです。

DOMとJavaScriptを一級市民として扱うウィジェットは,それらを無理なく扱えます。開発者はAPIでウィジェットを組み立てるだけ。ウィジェットを使った振る舞いのカプセル化は,高密度な画面を作り込む助けになります。

とはいえAPIでDOMを組み立てるのはマークアップでHTMLを書き出すより面倒なのも事実。画面全体を一望できないコード中心の世界はどうしても見通しが悪いのです。そのほかの要因も相まって,多くのWeb開発者はマークアップ主義にとどまりました。ツリー主義を選んだのは高度に対話的なアプリケーションを作ろうと意気込む開発者だけでした。

著者プロフィール

森田創(もりたはじめ)

平日はWebブラウザの開発,休日はWebブラウザの利用に従事。最近の趣味は/etc/hostsファイルに中毒性の高いWebサイトをリストし,127.0.0.1にリダイレクトすること。現在7サイト。スマートフォンの勉強をしなければと思いつつ/etc/hostsにアクセスできない端末を持つのが不安で躊躇している。

http://steps.dodgson.org/

コメント

コメントの記入