控えめなJavaScript

控えめなJavaScriptとは

控えめなJavaScript（Unobtrusive JavaScript）は、WebページにおけるJavaScriptの利用方法に関する一般的なアプローチです。明確な定義はありませんが、以下の原則を含むものとして理解されています。

機能（behavior layer）の分離: Webページの構造（HTML）、コンテンツ、表示（CSS）からJavaScriptの機能を分離します。
ベストプラクティスの適用: ブラウザ間の差異や拡張性の問題など、従来のJavaScriptプログラミングにおける課題を回避するための手法を用います。
プログレッシブエンハンスメント: 高度なJavaScript機能をサポートしないユーザーエージェントでも、Webページが利用可能となるように配慮します。

背景

従来、JavaScriptは扱いが難しく、大規模なアプリケーション開発には不向きな言語とされてきました。その理由として、言語自体の問題に加え、ブラウザごとのDOM実装の違い、コピー＆ペーストによるコードの蔓延などが挙げられます。頻繁に発生するランタイムエラーはデバッグが困難であり、スクリプトが動作していれば修正されないことも珍しくありませんでした。

しかし、近年では、標準に準拠したブラウザの普及、JavaScriptフレームワークの登場、高品質なデバッグツールの利用などにより、体系的で拡張可能なJavaScriptコードの開発が可能になりました。また、Ajaxインターフェースの登場により、そのようなコードの必要性が高まりました。JavaScriptは、かつてはバリデーションや装飾といった比較的単純なタスクに用いられることが多かったのですが、現在ではWebサイトの中核機能を担う大規模で複雑なコードベースを記述するために使用されています。そのため、ランタイムエラーや予期しない動作は、もはや小さな問題ではなく、重大な欠陥と見なされるようになりました。

控えめなJavaScriptの概念

控えめなJavaScriptの支持者は、このアプローチをより大きなWeb標準の動きの一部と捉えています。ブラウザ間の互換性確保のために、標準化されたマークアップとCSSが重視されるようになったのと同様に、リッチインターネットアプリケーションの需要の高まりが、JavaScriptの使用方法におけるベストプラクティスを推進する原動力となっています。

「控えめさ（unobtrusiveness）」の概念は、2002年にStuart Langridgeによって提唱されました。彼は、HTMLから全てのJavaScriptコードを分離する方法を主張し、その後、書籍や記事を通じてこの考え方を詳細に解説しました。

David Flanaganは、控えめなパラダイムの本質的な要素を定義しようと試み、著書の中で以下の3つの主要な目標を挙げています。

1. JavaScriptのモジュールを他のモジュールから分離し、HTMLマークアップから分離すること。
2. グレースフル・デグラデーションを実装すること。つまり、JavaScriptが動作しない環境でもコンテンツが利用可能であること。
3. ユーザーの環境（障害の有無、ブラウザの種類、設定など）に関わらず、HTMLのアクセシビリティを損なわないこと。理想的には、アクセシビリティを向上させること。

Web Standards Projectは、JavaScriptマニフェストの中で、控えめなDOMスクリプティングの4つの利点を説明しています。

ユーザビリティ: ユーザーが意識しなくても利用できる。
グレースフル・デグラデーション: あらゆるブラウザでエラーメッセージを表示せず、機能が動作しなくても静かに消える。
アクセシビリティ: スクリプトが動作しなくても、Webページの中核機能と情報が利用可能である。
* 分離: JavaScriptコードが他のファイルやスクリプト、HTMLに影響を与えずに独立して管理できる。

Christian Heilmannは、2007年のパリWebカンファレンスで、控えめなJavaScriptの7つのルールを提唱しました。

1. あらゆる仮定を行わない: JavaScriptが動作しない可能性や、ブラウザが期待されるメソッドをサポートしていない可能性を考慮する。
2. 結びつけるものや関係を見つける: HTML要素のIDや属性などを利用する。
3. DOMオブジェクトの操作は専門家に任せる: ブラウザに組み込まれたCSSハンドラなどを活用する。
4. ブラウザとユーザーを理解する: ブラウザの動作や、ユーザーの環境（設定、使用方法など）を理解する。
5. イベントを理解する: イベントの発生メカニズムや、イベントハンドラに渡されるEventオブジェクトの機能を理解する。
6. 他のスクリプトとうまく共存する: グローバルな関数や変数名の使用を避ける。
7. 次の開発者のために作業する: 分かりやすい変数名や関数名を使用し、論理的で読みやすいコードを記述する。

動作とマークアップの分離

従来、JavaScriptはHTMLドキュメント内に直接記述されることが一般的でした。しかし、控えめなJavaScriptの支持者は、マークアップは文書の構造を記述するものであり、プログラム的な動作を記述するものではないと主張しています。この2つを混同すると、コンテンツと表示を混同するのと同じように、Webサイトの保守性が低下すると考えられています。

控えめなJavaScriptでは、必要なイベントハンドラをプログラム的に登録します。HTML要素に直接イベントハンドラを記述するのではなく、class属性やid属性などを使って要素を識別し、JavaScriptでイベントハンドラを付与します。

まとめ

控えめなJavaScriptは、Webページの保守性、アクセシビリティ、ユーザビリティを向上させるための重要なアプローチです。Web標準を尊重し、より優れたWeb開発を実現するために、控えめなJavaScriptの原則を理解し、実践することが重要です。

もう一度検索