ブラウザのサポート情報の活用 前編 ブラウザのサポート情報を知る
CSSプロパティやAPIがどのブラウザのどのバージョンでサポートされているか、またそのサポートの動向を知るときに、エンジニアなら知っておきたい情報サイトを紹介し、その活用方法を解説します。
- カテゴリー
- ブラウザ
発行
はじめに
あるCSSプロパティやAPIが、どのブラウザのどのバージョンでサポートされているかを知りたくなるときがあります。検索でも事足りますが、調べ方を知っているとより効率よく目的の情報にたどり着けます。
ブラウザのサポートがどうなのか知りたい
コードを書くにあたって、そこで使いたいと思っている機能が、ターゲットとしているブラウザでサポートされているかを知りたいと思うことはないでしょうか。
検索エンジンで「なになに browser support」などと入力してもいいのでしょうが、サポート情報をまとめているサイトを知っていると、検索結果から探す手間が省けるので便利です。今回は、そのようなサイトやドキュメントを紹介します。
Can I Use：サポート情報の総合サイト
Can I useは、HTML、CSS、各種APIについて、ブラウザのサポート情報をまとめたサイトです。
ページの上部にある検索ボックスに機能名を入れると、ブラウザのサポート情報がその下にすぐに表示されます。
CSS Gridを検索すると、サポート情報が現れた。おおむね緑なので、CSS Gridは使えそうというのがわかる。
サポート情報は、現在のバージョンを中心とした表示になっています。名前のとおり「（いま）使えるのか」にフォーカスしたかたちですね。
この表示は、表示されたサポート情報の左上にあるボタンをクリックすることで、ブラウザのマーケットシェアに応じたものや、年表のように時系列に沿ったものにも切り替えられます。
マーケットシェアまわりの表示ついては、ちょっとおもしろい機能がありますが、少し長くなりそうなので、次回取り上げます。
Can I useのデータは、コミュニティの貢献で成り立っています。追加したい機能がある場合や、サポート情報が古い、誤りがある場合などは、GitHubレポジトリにプルリクエストを送るとよいでしょう。筆者もたまに、データを更新したりしています。
ブラウザベンダーのサポート情報ページ
Can I useはコミュニティによる管理なので、ベンダーが公開する一次情報ではありません。また、サポートしている・いないという情報を載せているだけなので、その機能が実装中なのか・サポート予定がないのかなど、サポートの動向を知ることはできません。
こうしたベンダーの意向をうかがうには、ベンダー自身が提供するサポート情報のページにあたるのがよいでしょう。
- Chrome Platform Status
- Firefox Platform Status
- WebKit Feature Status
- Microsoft Edge web platform features status and roadmap
これらを眺めると、どの機能を実装中なのか、どの機能について検討しているのか、実装する気がないのかなど、今後の動向がわかります。
Service Workerの状況を表示（2017年12月時点）。「IN DEVELOPMENT」といった実装ステータスや、他のベンダーの実装状況もうかがえる。
どのステータスがいつ変更されたかを知る方法は、これらのサイトで提供されていません。ただ、上記のサイトのデータをもとに、ステータスの変更を追いかけているサイトもあります。
JavaScriptのサポート情報はECMAScript compatibility tableを
JavaScriptの機能、特に新しいECMAScriptのバージョンで定義・提案されている機能については、ECMAScript compatibility tableが便利です。
ECMAScriptのサポート情報はCan I useにもいくつかあるのですが、最新機能についてはデータがあまりありません。また、Can I use自体がこのcompat tableを参照してね、とも書いており、JavaScript版のCan I useと言えそうです。
ベンダーのステータスページにもECMAScript関連の情報はありますが、このcompat tableでは、表になっているのもあり、複数の機能のサポート情報を一覧できるのが魅力です。
Can I useのように、ECMAScriptの機能について、その実装状況をパッと見て確認できるのが特徴。
また、ブラウザだけでなく、Nodeでのサポート、さらにはBabelやClosure Compilerといったトランスパイラについてもサポート情報があります。比較的新しいECMAScriptの機能を使う場合はトランスパイラを使うことが多いですし、そのサポート情報も載っているのは理にかなっていますね。
細かい情報はMDN Web Docsが便利
ここまで紹介したサイトでも見つけられない情報がある場合や、細かい情報を知りたい場合には、MDN Web Docsを見てみましょう。
MDN Web Docsは、Mozillaがスタートさせ、現在ではGoogle、Microsoft、Samsung、W3Cなども協力し、Web技術のリファレンスやチュートリアルをまとめたサイトです。
サポート情報をまとめたというよりは、リファレンスの中にサポート情報があるというものですが、細かい情報を知りたい場合には重宝します。
たとえば、HTMLのinput要素には、HTML5でemailやtel、datetime-localなどさまざまなtype属性値が追加されました。これらは数もありますし、それぞれの属性値によって実装状況が異なります。個々の属性値のサポート情報についてはCan I useが良いかもしれませんが、複数の値に関する実装情報をまとめて見たいとなると、少し面倒です。
MDNでは、サポート情報が表となっていて、リファレンスの下部に設けられています。input要素のページにある、サポート情報の表を見てみましょう。
各type属性にについて、それぞれのブラウザで実装されたバージョンを確認できる。
リファレンスも充実しているので、サポート情報を調べるついでに読んでみるのもいいでしょう。
情報鮮度の古さは改善の流れ
MDNは、ベンダーが関わるようにもなりましたが、コミュニティの貢献も大きいメディアです。英語以外への言語についてはその傾向が強いため、日本語を含めた翻訳は、ボランティアまかせというのが現状です。
このため、英語版と日本語版で情報鮮度に差が出てしまうことは珍しくありません。サポート情報も例外ではなく、日本語版で更新が滞っているものもあります。これは、言語ごとにページが作られ、サポート情報もそのページに直接記述されているため、管理が行き届かないことに問題があります。
多言語での情報鮮度の差や、このようなやり方に内在する管理性の悪さもあり、サポート情報まわりは新しい仕組みに移行中です。新しい仕組みでは、サポート情報はGitHubで管理され、ページでそのデータを表示するかたちになります。いくつかのページではベータテストとして、新しいサポート情報の表を見られます。
新しいMDNのサポート情報テーブル。Can I useのように色付けが行われている。
ページ本文について、情報鮮度の差を解決するのは難しいでしょうが、少なくともサポート情報については、英語と日本語で鮮度の違いが生まれることはなくなりそうです。データもJSONと構造化されているので、Can I useのように外部利用しやすいものになりそうです。
どう使えばよいか
Can I use、ベンダーのステータスページ、ECMAScript compatibility table、MDN Web Docsと、4つのサイトを紹介しました。ECMAScriptはJavaScriptに特化しているのでわかりやすいですが、どう使い分ければよいでしょうか。
筆者のおすすめは、まずCan I useで調べ、そこにない情報を他で紹介したサイトで調べてみるというものです。
Can I useをまずおすすめする理由は、掲載されている機能の数（執筆時点で400個以上）と、サポートされているかいないかを判別しやすいデザインにあります。また、情報の更新頻度も高いため、精度の高いサポート情報を得られることもプラスです。
Can I useの短所は、先述のとおりベンダーの意向についてはわからないことと、現在提案中・実装中の機能についてはデータがないことでしょう（後者については「今使えるか」に答えるサイトなので、指摘するのも野暮ではありますが）。
提案中・実装中の機能について、Can I useにデータがない場合は、ベンダーのステータスページを見てみましょう。機能がJavaScriptの場合は、ECMAScript compatibility tableが一覧性が高いのでいいかもしれません。
APIの1メソッドやCSSの1プロパティなど、探したい機能の粒度が小さい場合は、Can I useやベンダーのステータスページにデータがないことが多いです。この場合は、MDNを探すとよいかと思います。
まとめ
ブラウザのサポート情報を扱うサイトはいくつかあります。Can I useがおすすめですが、機能の性質や粒度によってはほかのサイトも見ないといけないかもしれません。
今回はサポート情報を調べることについてフォーカスしましたが、サポート情報をもとにコードレベルで開発の手助けとなるツールも増えています。次回は、サポート情報を活用するツールについて取り上げます。