公開日: 2025 年 3 月 4 日
Baseline は Chrome チームによって作成され、現在は WebDX Community Group によって定義されています。Baseline は、ブラウザ間で相互運用可能な機能を明確にします。すべての主要なブラウザ エンジンで使用できる機能と使用できない機能を特定できるように設計されています。ただし、これらの機能を特定する方法が必要です。
幸いなことに、Web Platform Dashboardを使用して、Baseline Newly または Widely で利用可能な機能をクエリできます。これは、web-features npm パッケージを搭載しています。HTTP API を使用してこの情報にアクセスし、Baseline
データをツールワークフローに統合することもできます。このガイドでは、その方法について説明します。
Web Platform ダッシュボードの関連する Baseline クエリ構文
Web Platform ダッシュボードでは、特定のクエリ構文を使用してウェブ機能のサポートを検索できます。このクエリ構文は、ダッシュボード自体で直接使用できます。
baseline_status:newly 検索クエリを使用して、Baseline Newly で利用可能な機能のみを表示する検索に基づいています。
ページ上部の検索ボックスに入力すると、ウェブ機能のフィルタリングに使用できるクエリ パラメータが表示されます。
クエリ構文は表現力が豊かで、ダッシュボードに表示されるウェブ機能を柔軟にフィルタリングできます。次のスクリーンショットは、id クエリ パラメータを使用して特定の機能に絞り込む方法を示しています。
id パラメータの値は html です。これは、<html> 要素のサポートを示しています。この要素は、Baseline Widely で利用可能です。
クエリ構文はドキュメント化されていますが、機能の Baseline データを検索するためにすべてを把握する必要はありません。ダッシュボードでこれらのオプションを使用できますが、特に便利なオプションをいくつかご紹介します。
baseline_status: このパラメータを使用して、3 つの列挙値で機能をフィルタリングします。limited: ブラウザのサポートが限定的な機能を返します。この値でフィルタリングすると、Baseline ステータスに達していない機能のみが返されます。newly: Baseline Newly で利用可能な機能を返します。widely: Baseline Widely で利用可能な機能を返します。これは、少なくとも 30 か月間 Baseline であった機能です。これらの機能は、ブラウザのサポートやポリフィルを気にすることなく使用できます。
baseline_date:YYYY-MM-DD..YYYY-MM-DD形式を使用して、機能が Baseline に達した上限と下限を指定します。たとえば、1 年間のすべての機能を検索するには、2024-01-01..2025-01-01のような値を使用します。id: 特定の機能の識別子。これらの識別子は、web-features パッケージで定義されています。たとえば、機能エントリはPromise.try()の ID にマッピングされます。promise-trygroup: 機能の列挙されたグループ名の 1 つ。ウェブ プラットフォーム機能の特定のサブセットのみをクエリする場合に便利です。たとえば、値がcssの CSS 機能のリストにフィルタできます。
ダッシュボードのフロントエンドは確かに便利ですが、直接クエリできる HTTP API の上に構築されています。たとえば、Baseline Newly で利用可能なすべての機能を取得するエンドポイントは次のようになります。
https://api.webstatus.dev/v1/features?q=baseline_status:newly
JSON レスポンスの構造
HTTP API から受信する JSON レスポンスは、すべての機能で一貫した形式になっています。返されるレスポンスには、最上位に data プロパティが含まれています。このプロパティには、一致するすべての機能の配列が含まれます。これは JSON レスポンスで使用できるすべてのフィールドの完全なリストではありませんが、Baseline に関して役立つフィールドをいくつかご紹介します。
baseline: 特定の機能の Baseline ステータスに関する一般的な情報が含まれます。サブフィールドは次のとおりです。status: 機能の Baseline ステータス。値はlimited、newly、widelyのいずれかになります。注:statusの値がlimitedの場合、これは唯一のサブフィールドになります。low_date: 特定の機能が Baseline Newly で利用可能になった日付を示します。このフィールドは、statusがnewlyまたはwidelyの場合にのみ表示されます。high_date: 特定の機能が Baseline Widely で利用可能になった日付を示します。このフィールドは、statusがwidelyの場合にのみ使用できます。
feature_id: 機能の ID。たとえば、CSS グリッドの場合、値は"grid"になります。name: 機能の書式設定された名前。場合によってはfeature_idと似ていますが、通常は異なります。たとえば、feature_idの値はPromise.try()ですが、同じ機能の"promise-try"フィールドはnameです。"Promise.try()"spec: このフィールドには、linksという名前のサブフィールドが含まれています。これは、仕様やその他のリソースへのリンクの配列です。
他にもフィールドがあります。多くの場合、特定のサポート ブラウザがどのバージョンで機能を実装したかに関する情報、Web Platform Testsに関するデータ、その他、関心がある場合とない場合がある情報が含まれています。
クエリの例
使用可能なクエリ パラメータについて簡単に説明しました。次に、ツールやスクリプトで使用して、ワークフローに役立つウェブ ステータス機能を選択できるクエリの例をいくつか見てみましょう。
単一の機能のデータを取得する
API に慣れるには、単一のウェブ機能のデータを取得する基本的な例から始めるのがおすすめです。
// Specify and encode the query for a query string:
const query = encodeURIComponent('id:grid');
// Construct the URL:
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
// Fetch the resource:
const response = await fetch(url);
if (response.ok) {
// Convert the response to JSON:
const { data } = await response.json();
// Log data for each feature to the:
console.log(data);
}
この例では、値が grid の id パラメータを指定して、Baseline Widely で利用可能な CSS グリッドの機能サポート情報を取得します。この情報を使用して、たとえば、機能の使用状況を検出し、サポートを気にすることなく最新のブラウザ エンジンで使用できることをユーザーに知らせることができます。
これはほんの始まりにすぎません。HTTP API は、単一の機能のデータを取得するだけでなく、さまざまなことができます。
Baseline Newly および Widely で利用可能なすべての機能を取得する
Baseline Newly または Widely で利用可能なすべての機能を取得するスクリプトが必要だとします。たとえば、一定の間隔で実行されるスクリプトがあり、機能が在庫僅少から Baseline ステータスに移行するにつれて更新されるリストを取得する場合に便利です。
const query = encodeURIComponent('-baseline_status:limited');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
このクエリでは、Baseline Newly および Widely で利用可能なすべての機能を取得するのではなく、最初の 100
件のみを取得します。 取得した機能の数がこれを超える場合は、JSON レスポンスの最上位に metadata
フィールドがあり、最大 2 つのサブフィールドを含めることができます。
next_page_token: バックエンドへのGETリクエストのクエリ文字列に追加できるトークンを含む文字列。これを使用して webstatus.dev バックエンドからデータを再取得すると、一致する機能の次のバッチが返されます。注: 現在のクエリで 100 件未満の結果が返された場合、または現在のクエリが結果セットの末尾にある場合、このフィールドは使用できません。total: 現在のクエリで使用可能な機能の合計数を示す整数。
これらのフィールドはページネーションに便利です。これらのフィールドを使用して、大量のデータを返すクエリのすべての結果を取得する次のコードを試すことができます。
async function queryWebStatusDashboard (query, token) {
const urlBase = 'https://api.webstatus.dev/v1/features?q=';
let queryUrl = `${urlBase}${encodeURIComponent(query)}`;
if (token) {
queryUrl += `&page_token=${encodeURIComponent(token)}`;
}
const response = await fetch(queryUrl);
if (response.ok) {
const { data, metadata } = await response.json();
console.log(data);
// See if there's a page token in this query:
if ('next_page_token' in metadata) {
const { next_page_token } = metadata;
queryWebStatusDashboard(query, next_page_token);
} else {
console.log('All results collected');
}
}
}
// Make the first query, and if there are more
// than 100 entries, the function will run
// recursively until all features are fetched
queryWebStatusDashboard('-baseline_status:limited');
Baseline Newly で利用可能なすべての CSS 機能を取得する
CSS を専門とするエンジニアで、Baseline Newly で利用可能な CSS 機能を知りたいとします。これは、group クエリ値の最適なユースケースです。また、webstatus.dev のクエリで AND 演算子を使用する方法も示しています。
const query = encodeURIComponent('baseline_status:newly AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
group に css の値を指定すると、Baseline Newly で利用可能なすべての機能をクエリできます。Baseline Widely で利用可能な CSS 機能も対象に含める場合は、最後のコードサンプルと同じ方法で、-baseline_status:limited AND group:css' などのクエリで否定演算子を使用します。
クエリできるもう 1 つのフィールドは snapshot フィールドです。これは、特定の ECMAScript 機能セットの一部である JavaScript
機能を検索する場合に便利です。次のコードは、ecmascript-2023 スナップショットの一部である Baseline Newly
で利用可能なすべての機能をチェックします。
const query = encodeURIComponent('baseline_status:newly AND snapshot:ecmascript-2023');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
期間内のすべての Baseline 機能を取得する
baseline_date フィールドをクエリして、特定の期間内に Baseline になったすべての機能を検索できます。
const query = encodeURIComponent('baseline_status:widely AND baseline_date:2022-01-01..2022-12-31 AND group:css');
let url = `https://api.webstatus.dev/v1/features?q=${query}`;
const response = await fetch(url);
if (response.ok) {
const { data } = await response.json();
console.log(data);
}
上記のコードサンプルでは、2022 年の任意の時点で Baseline Widely で利用可能になった CSS 機能がクエリされます。baseline_date のクエリ構文では、開始日と終了日を .. で区切って指定できます。
まとめ
このガイドのクエリは、webstatus.dev バックエンドのクエリ方法を試すための出発点となるように設計されています。使用可能なクエリ パラメータの数に関係なく、アプリケーションに固有の結果を取得できます。
Web Platform ダッシュボードの HTTP API をクエリする方法を知っておくと、作業に役立つツールを作成したり、プロジェクトで使用する機能が十分なブラウザ サポートを備えているかどうかを把握したりできます。つまり、安全に使用できる最新のブラウザ機能を使用してウェブ アプリケーションを構築できるため、デベロッパー エクスペリエンスが大幅に向上します。