こんにちは，id:os0xこと太田昌吾です。今回から，クロスブラウザ対策を中心としたJavaScriptの初級から中級の方向けの連載を開始します。JavaScriptの基礎的な文法は理解されているという前提での解説となりますので，ご了承ください（間違いやすい，わかり難いと思われるところは適宜補足します）。初回である今回はJavaScriptやウェブブラウザの背景など盛りだくさんの内容でお届けします。

JavaScriptのイマ

JavaScriptは2010年現在において，最も重要な言語となりつつあります。旧来はすべての処理をサーバーで行って，結果をウェブブラウザ上に表示するだけというのがウェブの一般的な姿でした。2005年に登場したGoogle Mapsを一つの契機として徐々にウェブブラウザ・クライアント側での処理が見直され始め，近年ではクラウドやSaas，そしてHTML5の流行によって，多くの処理をクライアント側で行うことが当たり前になってきています。特にクラウドにおいては，クライアント側での処理やキャッシュコントロールによってサーバーの負荷を抑えることで，コストの削減に直結できるというメリットもあります。

このクライアント側での処理について，その処理系はJavaScriptでほぼ決まりといってよいでしょう。対抗馬と言えるActionScript（Flash）は，開発環境にコストがかかる（フリーのSDKも存在はしますが），環境によってはクラッシュしやすく不安定という問題を抱えているといった理由からか，Flashが実際に採用されることは少なくなっています。多くのウェブアプリケーションで使われているのはJavaScriptです。もはや，JavaScriptが最も重要な言語であることは疑いようがないように思えます。

しかし，JavaScriptは多くのウェブ開発者にとって悩みの種となっているようです。JavaScriptのベースであるECMAScriptはコンパクトでわかりやすい仕様ですし，2009年に10年ぶりの改定となるECMAScript 5がリリースされましたが，それでも大きな仕様変更はありませんでした。それほど安定しているにも関わらず，JavaScript自体を苦手とされる方が多い背景には，クロスブラウザという課題があるためです。

主なJavaScriptエンジンには，IEのJScript，FirefoxのSpiderMonkey（TraceMonkey），SafariのJavaScriptCore（Nitro），ChromeのV8，OperaのFutharkやCharakanなどがあります。これらの実装の違いが多くの開発者の悩みの種となっています。さらに，各ブラウザはレンダリングエンジンも異なるため（SafariとChromeは同一のエンジン（WebKit）ですが，バージョン違いに悩まされることも少なくありません），HTMLやスタイルシートについてもエンジンごとの違いを把握しておく必要があります。

さらに，各ブラウザは頻繁にバージョンアップを行っており，古いバージョンも使われ続けることが多いため，各バージョンごとの違いにも注意する必要があります。特にIEについてはIE 6，IE 7，IE 8とバージョンが分散してしまっています。MicrosoftはIE 6のサポートを続けていますし，依然として一定のユーザーが存在するため，多くのケースでIE 6をサポートすることになります。IE 6をサポートしないというのも1つの選択ですが，どちらにしてもIE 7をサポートするのであれば，あと少し（少しでないケースもありますが…）の手間でIE 6もサポートできるので，あえてIE 6だけをサポートしない理由もあまりないでしょう。

と，問題ばかりのように書いてしまいましたが，実際にJavaScriptを扱う際は，ライブラリを使用することでクロスブラウザ対応のコストを大きく下げることができます。特に人気があるのはjQueryで，JavaScriptではない別言語といわれるほどに強力なライブラリです。そのほか，prototype.jsやdojo，YUI LibraryにGoogle Closure Library，日本製ではuupaa.jsなどの汎用的なライブラリは多数あります。これらを利用することで，クロスブラウザの問題をそれほど意識することなくJavaScriptを書くことは可能です。とはいえ，ライブラリに頼っていては限界があり，特に何か問題が起きた時の対処に苦労することが多くなります。

ウェブブラウザの種類とクセ

前置きが思いのほか長くなってしましたが，この連載のメインテーマはクロスブラウザです。「普段ライブラリ（特にjQuery）を使ってJavaScriptを書いている方向けに，ライブラリを使わないでクロスブラウザな実装をしてみる」というケーススタディを中心にお送りたいと思います。

さて，クロスブラウザというからには，その対応ブラウザを明確にしなければいけません。まず，一口にクロスブラウザ対応と言っても，その対応にも種類があります。例えば，YUIでは，サポートの段階をA-grade（フルサポートするブラウザ），C-grade（基本機能のみサポートするブラウザ），X-grade（不明もしくはレアなブラウザ）の3つに分けています（参考：YUI Graded Browser Support）。この連載でも，フルサポート（すべての動作が意図どおりに動く，積極的な対応）とベーシックサポート（最低限動けばよい，消極的な対応）を区別します。では，現在使用されているブラウザの種類とバージョンの特徴をまとめたいと思います。

まずは，標準仕様との関係を整理してみます。図1にECMAScriptとブラウザを中心とした仕様の関係をまとめてみました（HTML5関連の仕様は今回は関係性が弱いので，広義な意味でのHTML5としていますが，今後の連載ではそちらも扱っていきます）。

どのブラウザもECMA-262 3rd editionとDOM Level 1までは概ね足並みが揃っています（DOM Level 0はまた特殊ですが，ここでは触れません）。大きな問題は，IEがDOM Level 2に相当する部分を独自の仕様で実装している点です。この連載でも，この部分をたびたび取り上げることになります。また，IEのみECMAScript 5関連の実装が遅れている点もポイントです。正確にはIE8がECMAScript 5のnative JSONをサポートしているので（ただし仕様に準拠するには修正パッチを当てる必要がありますが），まったく手つかずというわけではないのですが，ほかのブラウザからは大きく乖離しています。

では，もう少し詳細に各ブラウザごとの特徴と，バージョンごとの対応についてざっくりとまとめます。ここではあえて大雑把に主観的なまとめをしており，詳細は連載の中で随時言及していきます。サポートするしないといった記述もありますが，この判断は2010年3月時点での筆者の主観にすぎない点をご了承ください。