JavaScriptベストプラクティス: Unobtrusive DOMプログラミングのススメ

Alex Holt氏がSmashing MagazineにおいてjQuery and JavaScript Coding: Examples and Best PracticesのタイトルのもとJavaScriptプログラミングのベストプラクティスを紹介している。Alex Holt氏は「Unobtrusive DOM Scripting」と呼ばれるプログラミング手法がWebサイトに適用するにあたり優れているとし、Unobtrusive DOM Scriptingの実現にはjQueryが実にいい具合で活用できることを説明している。

同氏はDOMを経由してWebページの各種データにアクセスしてなんらかの動作をさせるプログラミング方法をDOM Scriptingと呼び、DOM Scriptingのなかでも必要な機能を必要な要素に対して適用するものといったニュアンスを強める場合にUnobtrusive DOM Scripting (出しゃばらないDOMスクリプティング)という言葉を使っている。

Unobtrusive DOM Scriptingのポイントは、JavaScriptコードをHTMLに含めず、完全に別のファイルに保持するところにある。コンテンツの論理構造はHTMLで、デザインはCSSで、付加的な機能や動きはJavaScriptで実現し、それぞれを別のファイルで保持する。あくまでもコンテンツに付加的な機能や動作を追加するのがJavaScriptという位置づけだ。それがゆえ、Unobtrusive (出しゃばらない)という言葉が使われている。Unobtrusive DOM Scriptingを実現するための基本的な規則は次の3つ。

• 規則1: JavaScript関数をHTMLに含めない
• 規則2: JavaScriptを前提とした作りにしない
• 規則3: まず意味的な構造が正しいHTMLを作成する

JavaScriptが機能しないアプリケーションからでも問題なく閲覧できるようにHTMLを作成すること、DOMを経由して各種要素にアクセスするためHTMLのマークアップは意味的に正しい状態にすることなどが説明されている。説明されているように完全に分離できると、より多くのデバイスやアプリケーションからのコンテンツへのアクセサビリティが向上するうえコードの保守もしやすくなる。

DOMを経由してHTMLの要素を指定し、それに対して機能や動作を追加するわけだが、これに関してはjQueryが便利だ。Prototypeもそうだが、jQueryではDOMを使った要素指定が実に簡単に実現するセレクタが提供されており、これがDOM Scriptingを自然に実現させてくれる。

またonloadを使う代わりにjQueryの$(document).ready()を使う方法も紹介されている。$(document).ready()でonloadと同じことが実現できる上、HTMLファイルにJavaScriptを記載する必要がなくなるという利点がある。これ以外にもCSSを使って表示や非表示を切り替える場合のテクニックも紹介されている。

jQuery and JavaScript Coding: Examples and Best Practicesはベストプラクティスが簡潔でわかりやすくまとめられているうえ、主旨も明確で理解しやすい。簡単なサンプルコードも掲示されている。紹介されているベストプラクティスはどれも基本的で広く知られたものだが、簡潔に丁寧にまとまっているところにこのドキュメントの価値があるといえる。Webデベロッパはぜひ一度同記事に目を通しておきたい。英語が苦手な場合でもサンプルコードが掲載されているためだいたいの推測は可能だ。