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を作成する

HTMLにJavaScript関数を直接記載しない - jQuery and JavaScript Coding: Examples and Best Practicesより抜粋

外部のJavaScriptファイルから要素を指定して機能を追加する - jQuery and JavaScript Coding: Examples and Best Practicesより抜粋

JavaScriptを前提にした作りにするとJavaScriptが動作しないアプリケーションからのアクセスで問題がでる - jQuery and JavaScript Coding: Examples and Best Practicesより抜粋

JavaScriptが動作しない場合でもコンテンツには問題がないように作る - jQuery and JavaScript Coding: Examples and Best Practicesより抜粋

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

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

jQueryのDOMセレクタの例 - jQuery and JavaScript Coding: Examples and Best Practicesより抜粋

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

$(document).ready()を使えばonloadを外部のファイルから実現できる - jQuery and JavaScript Coding: Examples and Best Practicesより抜粋

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



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報