Microsoft社とNetscape社が自社ブラウザに対してそれぞれ独自の拡張を施したため、HTMLの記述が繁雑になり混乱した時期がありました。そこでW3C※1では、HTMLを制御するためのAPI※2としてDOMの制定を勧告しました※3。
- ドキュメント・オブジェクト・モデル -
DOMはDocument Object Modelの略で、HTML文書（Webページ）、そこに表示されるテキスト、個々の画像などを＜オブジェクト＞と捉え、そのプロパティやメソッドをスクリプト言語によって操作することで、動的なページを構築するという手法です。
例えばWebページは“ドキュメント”（先に登場した“document”）という1つのオブジェクトであり、その中のIMGタグで示された画像、Pタグによる段落（パラグラフ）なども、それぞれ個別のオブジェクトです。
つまり先ほど紹介したファイル更新日付の表示も、DOMを利用した処理ということになります。
| ※1 |
W3C：World Wide Web Consortium。1994年、WWWの普及と標準化を推進するために設立された国際的な団体 |
| ※2 |
API：Application Programming Interface。異なるプログラミング言語から共通の手順で利用できる機能および機能の集合 |
| ※3 |
かつては、DOMの概念を用いて記述するHTMLをDynamic HTML――略してDHTMLなどと呼んでいましたが、W3Cではこの名称をメーカーが独自に名付けたマーケティング用語としており、公的には用いられていません。 |
- テキスト表示色の変更 -
DOMではCSS(Cascading Style Sheets：カスケーディング・スタイル・シート)によるフォントの種類や表示色、行間の制御などがよく知られており、Webプログラミングと言うよりWebデザインの分野と捉えられることが多いようです。
実際、DOMのAPIはHTMLからでも扱えますが、細かな制御を行うにはJavaScriptまたはVBScriptを用いることになります。
リスト5は、JavaScriptで作成した関数(function)をオブジェクトのイベントから呼び出すことで、マウスポインタで示したテキストの色を変更するという処理です。
リスト5：JavaScriptを使ったテキストカラーの変更
- 画像のフェードイン -
ブラウザにボタンを表示させ、それがクリックされたときに独自の処理を実行させることもできます。
リスト6では、[表示]ボタンをクリックすると、画像（sample.gif）がフェードイン表示されます。この機能は、Internet Explorer 4.0以降で利用できます。
リスト6：画像のフェードイン
- ブラウザごとの相違がネックになる -
DOMを導入することによって、それまでブラウザによってまちまちだった制御方法が統一の方向に向かい、Internet ExplorerでもNetscape Navigatorでも、同じソースコードで同じ結果を出せるようになってきました。
しかし、残念ながら＜完全に同じ＞という訳にはいきません。先の最終更新日の表示処理でもわかるように、同名のオブジェクトやプロパティでもブラウザによって独自の拡張がなされていたりするため、ブラウザの種別を調べて処理を切り替える必要が生じます。
また、ブラウザのバージョンによっても拡張機能に違いがあるため、ブラウザを問わず細かな制御を行うには、ブラウザのバージョンまで調べて処理を分岐させなければならない場合もあります。
そうなると、ブラウザの種別やバージョンごとに記述した＜同じ処理を行うための複数のソース＞をブラウザはすべて読み込まなければなりません。実際には処理されない大量のソースコードが読み込まれるのは、大変な無駄です。
こういったことを考えると、DOMとスクリプト言語によるWebアプリケーションは、ブラウザの種類とバージョンを制限できる組織内ネットワーク向きであるとも言えます。実際、組織内でInternet Explorerしか使用しないのであれば、JavaScriptの代わりにVBScriptでソースを記述しても、Internet Explorer独自の機能を使っても、まったく問題がありません。
JavaScriptの特徴と使い方を紹介してきました。スクリプト型の言語はコンパイルが不要で、記述してその場で動作を確認できるため、気軽にプログラムを作ることができます。また、DOMを利用してWebページの見た目を自在に制御できることも、JavaScriptの大きなメリットでしょう。
しかし、ソースコードの読み込みや実行に時間がかかること、ブラウザごとの仕様の違い、ローカルな資源を操作できないことなど他の手段に比べて制限も多いため、大規模な業務処理には向いていません。
サーバーや他のクライアントと連携しなくてもよい、シンプルな処理に向いた言語と言えるでしょう。特にスタイルシートなどと併用すると、業務処理よりWebデザインにとって強力な武器になるはずです。
 サンプルファイル (LZH形式 49 KB)
 |
|
|
