ブラウザーのサポート情報の活用2025 前編 ブラウザーの実装情報を知る
さまざまなウェブの機能について、ブラウザーの実装情報を知るための情報源について紹介します。おなじみのCan I UseやMDN Web Docsのほか、比較的新しい情報源も紹介します。
はじめに
新しいHTMLやCSS、APIが日々提案・実装されています。夢だと思っていた機能がリリースされるというニュースを見ると、遠くまで来てしまったものだと感じます。
ただ、どのような機能が入ったのかを調べるのは意外と手がかかるものです。
筆者は以前、「サポート情報を知る」シリーズを執筆しましたが、先日見返したところもう7年前のことでした。今回は改訂版として、2025年の今日、ブラウザーの実装情報を知る情報源を改めて紹介します。
Can I Use
Can I Useは、各種ウェブ標準のブラウザーの対応情報をまとめたウェブサイトです。ブラウザーの実装情報を調べるサイトとしてまず訪れる方も多いのではないのでしょうか。
ページ上部の検索ボックスに機能名を入力すると、マッチした機能の実装情報が一目でわかるようになっています。サイトの見栄えも機能も長年大きく変わっておらず、老舗感があります。
未対応のバージョンは赤、対応済みのバージョンは緑と、視覚的にわかりやすい表示になっている。
データが充実し、より「まずここから」なサイトに
Can I Useのデータは「コンテナクエリー」や「Fetch API」など、多くの開発者がまず知りたいと思う単位でまとめられています。しかし、ウェブは常に機能拡張を続けているため、機能によってはプロパティやメソッドが後から追加されることもあります。こうした細かいプロパティやメソッド単位の情報を調べるのは少し難しいです。
この細かいデータの情報を表示するため、次節で紹介するMDNからのデータも表示するようになりました。MDNの実装情報データは細かい単位で分かれているため、Can I Useとはお互いを補え合える関係です。扱う情報の粒度が幅広くカバーされるようになり「まずはCan I Use」という位置づけが補強されました。
また、最近ではBaselineのデータも表示するようになりました。Baselineについては次回紹介しますが、「実装が揃った」「十分に使える段階になった」など、採用する目安として使いやすいラベルを提供するものです。
MDN Web Docs
MDN Web DocsはMozillaがホストするウェブ開発者向けのドキュメントサイトです。リファレンスやチュートリアルとして使っている方が多いかもしれませんが、ブラウザーの実装情報を知るのにもよいサイトです。ウェブ機能を説明するページの下部に、「ブラウザーの互換性」というセクションがあり、主要ブラウザーでの実装バージョンをまとめた表を見られます。
例として、dialog要素の互換性を見てみましょう。dialog要素には要素自身と、openという属性があります。さらに最近closedbyという属性も仕様に追加され、実装が進められています。MDNの表では、こうした要素や属性などを機能ごとにまとめ、それぞれのブラウザーで実装の有無や、バージョンを確認できます。Can I Useよりも細かい機能ごとの実装情報をいっぺんに確認できるのが特徴です。
GitHubへの移行、Open Web Docsとの協力
MDNは近年、デザインや運営に関して大きな変更がありました。一つは以前はWikiとして管理されていたコンテンツがGitHubに移行し、今のウェブ開発フローに馴染んだことです。日本語をはじめとした翻訳もGitHubで管理されています。
GitHubへの移行によりレビューが実施されることになり、コンテンツの質も向上しました。さらに、以前よりMDNに協力していたGoogleやMicrosoftにより、ウェブ技術のドキュメンテーション運用をサポートするOpen Web Docsが設立されました。OWDではテクニカルライターを雇用し、MDNのドキュメンテーションの追加や管理に貢献しています。
MDN browser-compat-data
MDNで提供されているブラウザーの実装情報も大きく変わりました。以前はWikiに記述されていた情報が、GitHubに移行し、構造化されたデータになったからです。
データはmdn/browser-compat-dataというリポジトリで管理され、npmのパッケージとしても公開されています。Can I Useで使われているMDNからのデータも、このbrowser-compat-dataになります。
ECMAScript compatibility table
JavaScriptの仕様であるECMAScriptが、年に一度更新されるようになり10年が経ちました。毎年、大小さまざまな仕様が追加されています。
ECMAScriptの機能の実装情報を確認するサイトとしては以前からECMAScript compatibility tableがあります。比較的最近の機能の実装情報を知りたい場合、ページ上部の「2016+」というリンクをクリックすると、ES2016以降の仕様の実装情報を年ごとに確認できます。
ECMAScript compatibility tableでは、Node.jsやDenoなどブラウザー以外のJavaScript実行環境での実装情報も見られます。また、TypeScriptやBabelなどのライブラリーでのサポートも掲載されています。MDNにもNode.jsとDenoの実装情報はありますが、ブラウザー以外でJavaScriptを使う場合はECMAScript compatibility tableの情報が多く参考になるのではと思います。
ブラウザーベンダーからの情報
実装情報だけでなく、その機能の概要も知りたい場合はどうでしょう。各種ウェブ開発系のブログなどもよいですが、ブラウザーベンダーからの情報も多くなったのでおすすめです。
web.devとChrome for DevelopersはGoogleが運営しているサイトです。web.devではウェブ開発の基礎知識を学ぶドキュメントが提供されているほか、ブログでは主要なブラウザーで実装が揃った機能についてを取り上げています。対してChrome for DevelopersではChromeのリリースノートや、Chromeが提案し実装している新しい機能の紹介があります。
WebKit blogはAppleが運営しています。リリース時に公開されるエントリーでは、そのリリースで目立つ機能について背景から詳細に説明されることが多く、参考になります。また、Appleが注力している機能について紹介する記事もあります。
Microsoft Edge BlogはMicrosoftが運営しています。EdgeのUI関連機能の紹介も多いですが、Microsoftが提案している機能の紹介もあります。
Mozilla HacksとMDN BlogはMozillaが運営しています。Mozilla HacksではMozillaの関わる技術の紹介で、フロントエンドに限らない情報も掲載されます。MDN Blogではウェブに追加された新しい機能の紹介記事のほか、GitLabやDebugBearなどによる開発のテクニックを紹介するスポンサー記事も公開されています。
Firefoxの各リリースで実装された機能を知りたい場合は、MDNの開発者向けFirefoxリリースノートが参考になるでしょう。
What's New in Chromeというページにはリリースノートへのリンクや、新しくChromeに実装された機能を紹介する記事がまとめられている。
標準に対するスタンス
Chrome、EdgeのレンダリングエンジンBlinkには、機能の実装やリリースにおいて、WebKitやMozillaにその仕様を評価してもらうプロセスがあります。
提案された仕様に対して、肯定的か否定的か、仕様を進めるにあたっての懸念などがまとまっています。注意したいのが、肯定的であるからとはいえ将来の実装を確約するものではないことです。ただ、ある機能がウェブ標準として本当に持続的かを判断する指標の一つにはなるでしょう。
レビューが与える影響
W3CのTechnical Architecture Groupでも、標準化視点でのレビューを行っています。こちらもBlinkのプロセスにおいて必要とされています。
各種レビューを行うことが必要とされてはいるものの、否定的な判断があるからといってその実装がリリースされないわけでもありません。懸念点を解消するため、機能を再検討することもありますが、そのままリリースされてしまうこともあります。
レビューはあくまで参考情報と、リリースのプロセスにおける透明性の確保のために行われているととらえたほうがよいでしょう。
まとめ
今回は、ブラウザーの実装情報を知るための情報源を紹介しました。
- Can I Useや実装情報を調べるための定番。MDNの情報も表示するようになり、扱う情報が増えた
- MDN Web Docsコンテンツの質が向上し、ブラウザーの実装情報も充実している
- 各ブラウザーベンダーからの情報も増え、機能を深く知る術が増えた
次回は、最近進んでいるBaselineという、機能を使う目安を示すプロジェクトについて紹介します。