ウェブには膨大な量の機能があります。ブラウザ互換性データ プロジェクトには、14000 を超えるそれらがリストされています。すべてを理解するにはどうすればよいですか?

これは長い間答えられていない質問です。はい、すべての Web 開発者は caiuse.com を使用しています。あるいは、Google で調べたり、chatgpt に質問したりすることもあります。問題は、これらのツールには特定の質問に対する答えはあるものの、全体像や真実の情報源へのリンクが欠けていることです。

WebDXグループ

もうない！ WebDX グループは現在、Web プラットフォーム周りの物事を整理し、分類し、名前を付けるという素晴らしい仕事をしています (← これはご存知のとおり、これが難しい部分です)。彼らは、連携した方法で Web とブラウザの全体的な開発者エクスペリエンスを向上させようとしています。

WebDX は、W3C の一部であるコミュニティ グループです。彼らがリポジトリで何を調理しているのかを見ることができます。私にとって最も興味深い出力は、Web 機能リポジトリです。彼らが行ったことは、膨大な量の特定の機能を、より理解しやすい高レベルの機能のセットに分類することです。

たとえば、新しく利用可能になった機能の 1 つは、メソッドの設定です。セットを操作するための新しい方法はすべて、単一の機能である可能性があります。ただし、単一の高レベルの機能として伝達および文書化すると、さらに便利になります。

ドキュメント

もう 1 つの部分は、機能に関する詳細情報を見つける方法です。さて、ここで Open Web Docs イニシアチブが登場しました。MDN は常に優れたリファレンスですが、実践的なコンテンツが不足していました。 Open Web Docs グループは、この状況を変えようとしています。彼らは、基礎となるデータである BCD (Browser Compat Data) の更新だけでなく、MDN Web ドキュメントの新しいチュートリアル、ガイド、解説を大量に作成しています。

一例として、相対色に関する MDN のページがあります。これは、高レベルの Web 機能に明確にマッピングされています。各色の特徴の個別のリファレンス ページよりも、その特徴に関する理解とコンテキストがはるかに良くなります。

調査

上記の取り組みで本当に素晴らしいのは、彼らが本気でコラボレーションしたいと考えていることです。 The State of HTML や The State of CSS などの調査から情報を取得し、後で Web 機能に同じ名前のセットを使用して、それらに関する調査結果を追跡できます。

ところで、これらのアンケートに記入しているときに、[リーディング リストに追加] ボタンをクリックすることができます。 MDN へのリンクが表示され、あなたが知らなかったことについてさらに詳しく知ることができます。

現実

素晴らしいですが、Web は改善されていますか?ああ、その通りです!

ブラウザ間で必要な機能と実際に利用できる機能との間のギャップを埋めるための取り組みは明らかです。つまり、Interop プロジェクトは、一連の機能がすべての主要なブラウザーに可能な限り完全に実装されることを保証します。このプロジェクトは毎年新たに実施されます。

これらの機能がどの程度、どの程度うまく実装されているかは、Web プラットフォーム テストを使用して測定されます。同じ一連のテストがすべてのブラウザに対して実行されます。だからこそ、ブラウザーの機能の実際の状態を反映するこのような優れたパーセンテージが得られるのです。

ベースライン

すべての主要ブラウザに機能が実装される瞬間は非常に重要です。そして、上で説明したように機能を適切にグループ化したので、現時点で不足しているのは名前だけです。そして、それができました: 機能はベースラインであり、すべての主要なブラウザーでサポートされている場合に新たに利用可能になります。そして、ある機能は、新しく利用可能になってから 2 年半が経過すると、広く利用できるようになります。

Google によって開始されたベースラインのアイデアについては、web.dev で詳しく読むことができます。

ビジュアルダッシュボード

より視覚的な方法で見ることができると、すべてがより意味を持ち始めます。うまくデザインされた表、グラフ、そこにあるリソースへの便利なリンク…

これは、便利なダッシュボードを作成するためのいくつかの試みにまとめられています。それぞれをチェックしてみてください。それぞれがこのテーマについて異なる見解を持っています:

• WebDX グループの背後にいる人々によるシンプルなダッシュボード
• Google Chrome チームによる機能ごとの Web プラットフォーム テストの合格に関する素晴らしいグラフ
• そして、よりインタラクティブなバージョンを作成するという私の試み

これらを時々使用して、一般的な新機能や広範な採用状況の新機能を把握することができます。また、新しいプロジェクトを開始し、どの機能セットが実際に利用可能で十分にサポートされているかを判断するときにも役立ちます。

Web 機能エクスプローラーは情報をわかりやすく表示します

Webstatus.dev は、合格した Web プラットフォーム テストに関する機能の実際の進捗状況をグラフで示します

[Web プラットフォーム機能] ダッシュボードで機能のフィルタリングと並べ替えが可能

未来

最近、いくつかの機能がすべてのブラウザにかなり早く実装されました。ただし、一部のブラウザ メーカーによっては、良いアイデアとさえみなされないものもあります。何が提供されるか、または提供されない可能性があるかについての詳細情報は、次のサイトで見つけることができます:

• Mozilla 標準の立場
• Webkit チームの標準ポジション
• Google Chrome 機能ロードマップ

結論

Web プラットフォームが進化するのを見るのは興味深いです。フィードバックループは改善されています。多くの分野で相互運用性が向上しています。

長い間、Web 機能を備えた便利なダッシュボードが欲しいと思っていましたが、突然データの品質が非常に高くなったため、数晩で独自のダッシュボードを構築することができました。