ついに本連載の最後となりました。今回のテーマはJavaScriptの設計スタイルです。

　JavaScriptで様々なアクションを実現しようとすると，ブラウザによって挙動が異なったり，場合によっては動かない場合があります。例えば，標準化されているW3C DOMといえども，ブラウザの種類やバージョンによってその実装の度合が異なるからです。

　今日，様々なブラウザがあふれており，またそれらのバージョンも多岐にわたります。すべてのブラウザ，そしてすべてのバージョンで全く同じように動くようにするというのは，もはや現実的ではありません。

　そこで，近年，Unobtrusive Scriptingと呼ばれるスクリプティングの考え方が注目されるようになりました。"Unobtrusive"は，"でじゃばらない"，"控え目な"，"つつましい"といった意味を持っています。

Unobtrusive Scriptingの概念

　このように，JavaScriptというものを"Unobtrusive"なものとして扱うのです。

　以前は，如何にしてどんなブラウザでも動作するのかを扱うテクニックが重宝されました。ブラウザの種類やブラウザのバージョンを判別し，それぞれごとに処理を文岐し，ブラウザ独自に実装されたJavaScriptの機能も駆使して，なんとか目的のアクションを実現しようとしてきました。しかし，近年においては，それも限界に達しているといわざるをえません。

　そこで，Unobtrusive Scriptingでは，旧来の考え方を改め，目的のアクションを果たせるブラウザがある程度は限定されることを許容し，そして，目的のアクションを果たせないブラウザに対してはどうすべきか，という点を考慮します。

　では，Unobtrusive Scriptingの概念を一つずつ詳しく見ていきましょう。

でしゃばらない ～ JavaScriptの完全分離 ～

　Unobtrusive Scriptingにおいて，まず前提となるのが，JavaScriptをHTMLから分離することです。

スクリプトの分離

　一つのウェブコンテンツは，Behavior（動作），Presentation（表現），Content（内容）という三つの概念で成り立っています。実際にはそれぞれを，jsファイル，cssファイル，htmlファイルとして分離してウェブコンテンツを作ります。

　HTML内にJavaScriptのコードを一切入れることなく，JavaScriptを完全にファイルとして分離する方法はすでに本連載で解説してきました。これは，HTMLファイルで表すContent（内容）の領域に，JavaScriptがでしゃばらないようにしてきたわけです。

　しかし，ここで求められる分離とは，ファイルとして分離さえすればよいというわけではありません。本当の意味の分離とは，ファイルだけではなく，それぞれの概念も分離することを意味します。

　この意味を，実際のサンプルでみてみましょう。

BehaviorにPresentationが混在した例（HTML）


<div id="box"></div>

BehaviorにPresentationが混在した例（JavaScript）


var box = document.getElementById("box");
box.style.backgroundColor = "#ffeeee";
box.style.border = "1px solid #4c4c4c";
box.style.color = "dd8888";
box.style.fontWeight = "bold";

　このサンプルは，div要素の背景や境界線や文字の色をJavaScriptを使って変更しようとしています。これは，Behavior（動作）にPresentation（表現）が混在していることになります。

　このサンプルでは，ただ単に，固定的なCSSプロパティの値をセットしようとしているに過ぎません。もしこのコンテンツのPresentation（表現）を変更しようとしたら，いちいちJavaScriptを改造しなければいけません。

　では，Presentation（表現）の領域に，Behavior（動作）がでしゃばらないようにする解決方法を見ていきましょう。

BehaviorとPresentationを分離した例（CSS）


.boxstyle2 {
  background-color: #ffeeee;
  ・・・
}

BehaviorとPresentationを分離した例（JavaScript）


var box = document.getElementById("box");
box.className = "boxstyle2";

　このように，見た目を変えたいだけなのであれば，JavaScriptでインラインスタイルを直接変更することはせず，CSS側で切り替え先のスタイルを事前に定義しておき，class属性値をJavaScriptで切り替えるようにするのが良いでしょう。

　こうすることで，見た目を変更したい場合は，JavaScriptを改造するのではなく，CSSを変更すればよく，保守性が向上します。また，CSSプロパティを個々に変更する処理がなくなった分，JavaScriptのコードもすっきりします。