これでできる! クロスブラウザJavaScript入門

第1回 ウェブブラウザとJavaScriptの未来

この記事を読むのに必要な時間:およそ 10.5 分

IE(Internet Explorer)

シェアNo.1のIE。独自の仕様・実装に悩まされますが,バージョンごとの互換性は安定しています。

IE 5(もしくはそれ未満)

サポートの必要性はまずありません。

IE 5.5

特に理由がなければ,サポートする必要はありません。もしもサポートする場合,CSSが後方互換モードしかない点や,JavaScriptではArray.prototype.pushをサポートしていないなど,問題は多く,サポートには大きなコストがかかりますし,一方でそれに見合うメリットがあることは滅多にないでしょう。メジャーなJavaScriptライブラリも基本的にIE5.5をサポートしていません。

IE 6

最も悩ましいバージョンです。IE 6をサポートしないという選択をすれば,サイト構築・運営にかかるコストを抑えられるという面は確かにあるでしょう。ただし,IE 6に対応するためのノウハウ・バグは,これまで頻繁に話題になってきたので,少し調べれば情報が出てくるという特徴もあります(マイナーなブラウザでは自力で解決するしかないことが多いことに比べれば,利点と言えなくもないでしょう⁠⁠。例えば,position:fixedができない,透過PNGを表示できないといった問題はそのまま検索すればすぐに対応方法が見つかります。jQueryやPrototype.js,YUIなどメジャーなライブラリもIE 6をサポートしています。

ただ,最近ではGoogleが積極的にIE 6のサポートを終了するなど,IE 6に対応しないという風潮も出てきています。例えば,新しいモノ好きな人向けのサイトでIE 6を積極的にサポートする必要性は弱くなるでしょうから,場合によってもIE 6を基本機能しかサポートしないという選択も考えられます。

IE 7

IE 6をサポートした時点で,IE 7もサポートできていることが多いので,確認は後回しにしてしまっても問題ないバージョンです。逆に言えば,IE 7をサポートした時点で,IE 6のサポートはあと少しであることが多くなります。

IE 8

CSSの実装はかなり優秀です。Firefox,Webkitをターゲットに書いたCSS(もちろんCSS2.1の範囲ですが)をIE 8ではそのまま同様に表示できることも珍しくありません。JavaScriptについては主にDOMのイベント処理周りが依然として独自実装ですが,やはりIE 6で動けばIE 8でも動くので特別な対応をする必要はほとんどないでしょう。

Firefox

着実にシェアを伸ばしているFirefoxは,多くのユーザーを抱えていることもあり,後方互換はしっかりしています。Mozilla Developer Center(MDC)に素晴らしいドキュメントがあり,HTML/CSS/JavaScriptの標準仕様への準拠にも積極的なので,ウェブブラウザのスタンダードといえる存在です。ただし,現在のところJavaScriptについては独自実装が多いので注意が必要です。

Firefox 1.5(もしくはそれ未満)

サポートの必要性はまずありません。

Firefox 2

Firefoxを提供しているMozilla自体がFirefox 2のサポートを終了しているため,サポートしなければいけない理由はありません。しかし,現実にはFirefox 2を使い続けるユーザーは存在します。IE 5.5などに比べればFirefox 2のサポートは難しくないので,基本機能が動作しているか確認するレベルでも問題ないでしょう。

なお,CSSについては,display:inline-blockを使用する際に注意が必要だったりと,少々問題が出ることもあります。JavaScriptについてはECMA-262 3rd editionベースであれば,問題が出ることは少ないでしょう。

Firefox 3.0

HTML/CSS/JavaScriptを安定してサポートした模範的なウェブブラウザといえます。それゆえにFirefox 3.0での表示,動作は1つの指針となります(ただし,前述の通りJavaScriptについては独自実装が多いので注意が必要です⁠⁠。

Firefox 3.5,3.6

基本的にはFirefox 3.0と同様です。ただし,JavaScriptエンジンにJITが採用され大幅な高速化が行われており,一部の処理ではIE 6などの古いブラウザと大きな差があるため,Firefox 3.5基準の(IEから見たら)重いJavaScriptを書かないように注意する必要があります。

Safari

Firefoxに並んで,HTML/CSS/JavaScriptの標準化(特にHTML5関連)を牽引する存在です。しかし,ドキュメントが揃っていない,バージョンごとの細かな違いを調べることが難しい,異なるバージョンを同時にインストールする手段が(公式には)ないなど,やや問題もあるブラウザです。最近のバージョンではWeb Inspectorというデバッグツールが標準で搭載されており,デバッグが容易になっています。

Safari 1.3,2.0

特に理由がなければ,サポートしていなくても問題ないでしょう。JavaScriptを使用しないサイトであればそれなりに表示できるはずですが,Safari 1.3,2.0でのJavaScript周りをサポートするのは情報が少ないため容易ではありません。主要なJavaScriptライブラリでは,prototype.jsのみがSafari 2.0をサポートしているといった状況です。基本的に自力でサポートする必要があり,そのコストに見合うだけのメリットがあるかは疑問です。もしサポートする必要がある場合は,Safari の JavaScript の不備などが参考になります。

Safari 3.0.4

Safariのなかで,最もやっかいなバージョンです。CSS周りでの問題は少ないですが,JavaScript関連では,例えばaddEventListenerをサポートしているのに,DOMContentLoadedをサポートしていないなど,少々癖のあるバージョンです。とはいえ,主要なライブラリはSafari3.0からのサポートなので,ライブラリに頼れる範囲では難しくないでしょう。シェアとしては小さいので,サポートしないという選択も考えられます。

Safari 3.1,3.2

Safariの中では比較的安定したバージョンです。DOM/CSSのサポートはそこそこ,JavaScriptの処理速度などもそれなりに高速です。3.0.4に対応した後に,確認する程度でも十分かもしれません。

Safari 4.0.4

2010年3月時点での最新版です。DOM/CSSのサポートは十分なので,標準仕様に合わせて実装すれば自然とサポートできるはずです。

Google Chrome

レンダリングエンジンはSafariと同じWebKitを使用し,JavaScriptエンジンは独自開発した高速なV8を搭載しています。V8はSafariのJavaScriptエンジンとの互換性を重視しているため,ほぼSafariと同様に動作しますし,デバッガとしてWeb Inspectorも使用できます。デフォルトでブラウザの更新が自動で行われるため,ユーザーのほとんどが最新版を使用している点も大きな特徴です。そのため旧バージョンを積極的にサポートする必要はありません。サポートするとしても,どのバージョンもSafari 3.2やFirefox 3と同じかそれ以上にDOM/CSSのサポートが充実しているので,問題が出ることは少なくなっています。ただし,WebKitのバージョンがSafariと同じではないので,その微妙な差が問題になることもあります。

Opera

日本でのシェアは今一つですが,一昔前のハードウェアでも比較的快適に動作するという特徴のためか,一部の地域では大きなシェアを持っていたりと,なかなかクセのあるブラウザです。

Opera 9.2x(もしくはそれ未満)

すでにほとんど使われていないので,特にサポートする必要はありません。

Opera 9.5,9.6,10.x

DOM/CSSのサポートはそこそこで,IEやFirefoxとの互換性にも配慮されているため,一般的なサイトをなるべく標準的な仕様に従って作成すれば,Operaでも正常に動作することがほとんどです。ただし,ところどころでクセが強いため,右クリックのイベントが取れなかったり(ユーザーが明示的に許可した場合のみ可能)とイベント周りで特殊な動作をすることが多くなっています(仕様に対して忠実に実装した結果であることが多く,Operaのバグというわけでもないといったこともあります⁠⁠。また,何か問題があった際は参考となる情報を見つけることが難しく,自力で解決しなければいけないことが多くなっています。

Opera 10.50

2010年3月にリリースされたOpera 10.50はJavaScriptの実行速度が大幅に高速化されており,HTML5などのサポートも大幅に進んでいます。基本的にはそれ以前のバージョンと変わりありません。

以上,ざっくりと主要ブラウザの特徴を眺めてみました。これら以外にも,Sleipnir(IEのエンジンであるTridentを使用)やLunascape(Trident,Gecko,WebKitと3つのエンジンを搭載)などのブラウザが使われていますが,基本的にエンジンは同じなので,特別に対応しないといけないことはほとんどありません(あったとしたら,そのブラウザのバグか仕様かもしれません⁠⁠。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/