気ままなDevLog

webとかプログラミングについての雑記帳

つつましいJavaScriptで幸せになろう

最近時間に余裕ができてきたので、けっこう前に購入しておいて全部読めてなかった
標準DOMスクリプティング JavaScript+DOMによるWebアプリデザインの基礎
を最初から一気に読みなおしてみた。
久しぶりにここに書き残しておきたいネタがあったのでエントリ

この書籍ではDOMスクリプティングの基本から、HTMLの操作、CSS、イベント処理というように順を追って解説されており、段階的に学習していける内容となっている。
DOM入門者はもちろん、DHTMLをやったことあるけどDOMとどう違うのとお思いの方にも有効な内容である。

webの歴史の中でいまだ無くなることのないクロスブラウザの対策についても、具体的かつ実践的なサンプルとともに丁寧に解説されているのがありがたい。
この本が発行されたのが2007年初めであるが、2年たった今でも書かれている内容は色褪せていない、すばらしい!


さて、
ここでまとめておきたいのはこの本の第6章に書かれている。
この章に書かれていることこそ、web製作に関わる者なら頭に入れておくべき事柄なのではなかろうか。

前半にて「Javascriptはつつましくあれ」と題し具体的にその内容を説明しているので簡潔にまとめてみる。

クロスブラウザ対策におけるパラダイム・シフト

「どうすればすべてのブラウザで動くか」ではなく「動かないブラウザではどうするか」

アノブトゥルーシブ・スクリプティング(Unobtrusive Scripting)

つつましいスクリプティングのこと。
執拗に実行させようとしない、引き際が肝心。
次の2つの目標がある。

・階層の完全分離
ひとつのページは構造(HTML)、表現(CSS)、動作(JavaScript)に分けられるべき。
もし1つのファイルに構造、表現、動作が混在しているとメンテナンス性が悪い。

・動作環境確認
アクセス元は必ずしも最新のブラウザではなく、古いブラウザやテキストブラウザJavascriptをオフにしている、ロボットの場合もある。Javascriptが実行できないなら、そのページで伝えるべき内容は確実に出力しつつ、コードの実行はきれいに終了する。

プログレッシブ・エンハンスメント(Progressive enhancement)

アノブトゥルーシブ・スクリプティングの概念を集約したもの。
コンテンツが主役、Javascriptは脇役に徹するという概念。
つまり、コンテンツ(HTML)だけで目的を達成することができて、Javascriptはそれに便利な機能を付加するものである。
それがSEO対策にもなる。

グレイスフル・デグラデーション(Graceful Degradation)

プログレッシブ・エンハンスメントを活用し、貧弱なエージェントでも目的を達成できるようにすること。
フォールト・トレランスの概念に似ている。

オブジェクト検知

DOMのインターフェースはすべてオブジェクトなのでオブジェクトを検知する。
なのでDOMに準拠しているか判断するのにエージェントを見る必要はない。


後半は「ロボットに優しいHTMLを目指して」と題して、バックリンクやセレクトリンク、画像ポップアップといった良く実装される機能を題材に、アノブトゥルーシブ・スクリプティングの実践方法を解説しています。


この第6章の内容だけでも非常に刺激的で読む価値は十二分にあると思いました。
なんでもっと早く読まなかったんだと、自分を罵るくらいにw


すべてのプログラマ、デザイナー、コーダーがつつましいスクリプティングを実践できればきっともっとみんな幸せになれるかもね。