公開日: 2025 年 9 月 12 日
ベースラインの新しいツールを使用すると、現在のウェブ アプリケーションで安全に使用できるウェブ機能を特定できます。これらのツール（リンターや IDE 機能など）は、最新のブラウザでのサポートに関するデータを含むウェブ プラットフォーム機能のデータソースを使用します。
ウェブ プラットフォームのステータス ダッシュボードは、これらの機能のデータソースの 1 つであり、クエリ可能な HTTP API を提供します。このデータソースをオンデマンドでクエリすることは、すべてのツールで実用的ではありません。多くのツール ユースケースでは、web-features npm パッケージは、ローカルで使用するウェブ機能データのより信頼性が高く実用的なバージョンです。このガイドでは、web-features パッケージを使用して独自のベースライン ツールを開発する方法について説明します。
web-features パッケージを使ってみる
まず、パッケージをプロジェクトの依存関係としてインストールします。
npm install web-features
インストールしたら、web-features パッケージから 1 つ以上の名前付きエクスポートをプロジェクトにインポートします。
import { features, groups, browsers, snapshots } from 'web-features';
目標によっては、これらのエクスポートがすべて必要になるとは限りません。これらのエクスポートでは、次の情報を確認できます。
features: オブジェクトの配列。各オブジェクトはウェブ機能を表します。これは最も頻繁に使用するエクスポートです。browsers: ブラウザを説明するオブジェクトの配列。groups: 特徴の論理グループを定義するオブジェクトの配列。これらは、CSS や JavaScript などのウェブ プラットフォーム機能のサブセットや、より具体的なグループをターゲットにする場合に便利です。snapshots: ES2023、ES2022 などの対応する JavaScript 機能の ECMAScript バージョンが含まれます。
機能エクスポートでは、ベースライン ツールを構築するための次のプロパティが提供されます。
id: 機能の固有識別子。たとえば、CSS Grid の識別子は"grid"です。注: これはデータ オブジェクト内のプロパティではありません。オブジェクト キーです。compat_features: 機能に含まれる個々の BCD キーの配列。name: 機能の名前の人間が読める文字列（"Container Queries"など）。description: 機能の簡単な説明。group: 特徴が属するグループ。これは、groupsエクスポートで見つかったグループデータに対応しています。baseline: 機能のベースライン ステータス。次の 3 つの値のいずれかになります。false: 機能のステータスが「限定公開」です。"low": 機能が Baseline Newly available であることを示します。"high": この機能は Baseline で広く利用できます。baseline_high_date: 機能が Baseline Widely Available になった日付。注: この機能が Baseline Widely available でない場合は、利用できません。baseline_low_date: 機能がベースラインの新規利用可能になった日付。注: これは、利用可能な機能が制限されている場合には使用できません。
次の例は、CSS サブグリッド機能の完全なデータ オブジェクトです。
"subgrid": {
"caniuse": "css-subgrid",
"compat_features": [
"css.properties.grid-template-columns.subgrid",
"css.properties.grid-template-rows.subgrid"
],
"description": "The subgrid value for the grid-template-columns and grid-template-rows properties allows a grid item to inherit the grid definition of its parent grid container.",
"description_html": "The <code>subgrid</code> value for the <code>grid-template-columns</code> and <code>grid-template-rows</code> properties allows a grid item to inherit the grid definition of its parent grid container.",
"group": "grid",
"name": "Subgrid",
"spec": "https://drafts.csswg.org/css-grid-2/#subgrids",
"status": {
"baseline": "low",
"baseline_low_date": "2023-09-15",
"support": {
"chrome": "117",
"chrome_android": "117",
"edge": "117",
"firefox": "71",
"firefox_android": "79",
"safari": "16",
"safari_ios": "16"
}
}
}
groups エクスポートでは、次の構造で特徴グループに関するデータが提供されます。
id: グループの固有識別子。たとえば、CSS 機能の ID は「css」です。注: これは groups オブジェクト内のプロパティではありません。オブジェクト キー自体です。name: 人が読める形式のグループ名。parent: グループの親グループの ID。グループに親がない場合は使用できません。
例
次の例は、web-features package を使用して Baseline ツールを構築するために必要なデータを取得する方法を示しています。
特定の機能のベースライン ステータスを調べる
import { features } from 'web-features';
function getBaselineStatus (featureId) {
return features[featureId]?.status.baseline;
}
この例は、web-features パッケージの最も直接的なユースケースを表しています。ここでは、特徴の ID を指定して、status.baseline プロパティで使用可能なベースライン データを取得します。このプロパティは、機能が Limited availability（限定提供）、Newly available（新機能）、Widely available（一般提供）のいずれであるかを示します。後者の 2 つのケースでは、特定のベースラインしきい値に達した日付にもアクセスできます。
特定の BCD キーのベースライン ステータスを調べる
BCD は browser-compat-data の略で、ブラウザ間の機能サポートをカタログ化するために MDN が維持しているプロジェクトです。BCD キーは、特定の CSS プロパティ値や仕様で定義された動作のサブ機能など、粒度の細かい機能に対応しています。
web-features プロジェクトは、関連する BCD キーを各機能の compat_features 配列にグループ化します。機能全体のベースライン ステータスではなく、1 つの BCD キーのベースライン ステータスが必要になることがあります。たとえば、CSS リンターを構築し、プロパティと値のペアが主要なブラウザ間で互換性があるかどうかを知る必要がある場合、機能レベルのデータは粗すぎます。これは、パッケージが構成要素であるすべての BCD キーで各機能を集約するためです。一部のキーは、他のキーよりもブラウザのサポートが優れています。
BCD キーのベースライン ステータスを調べるには、機能オブジェクトの status.by_compat_key プロパティを調べます（web-features 3.6.0 以降で利用可能）。
import { features } from 'web-features';
function getBaselineStatus (featureId, bcdKey) {
return features[featureId]?.status.by_compat_key[bcdKey];
}
たとえば、getBaselineStatus('outline', 'css.properties.outline') の出力は次のようになります。
{
"baseline": "low",
"baseline_low_date": "2023-03-27",
"support": {
"chrome": "94",
"chrome_android": "94",
"edge": "94",
"firefox": "88",
"firefox_android": "88",
"safari": "16.4",
"safari_ios": "16.4"
}
}
ベースライン ステータスで機能を並べ替える
この例では、features オブジェクト内のすべてのフィーチャーを反復処理し、各フィーチャーをベースライン ステータスごとに配列に分類します。
import { features } from "web-features";
const webFeatures = Object.values(features);
const widelyAvailable = webFeatures.filter(feature => {
return feature.status.baseline === 'high';
});
const newlyAvailable = webFeatures.filter(feature => {
return feature.status.baseline === 'low';
});
const limitedAvailability = webFeatures.filter(feature => {
return feature.status.baseline === false;
});
この例では、ツールで status.baseline プロパティを操作する方法を示します。たとえば、このアプローチをウェブ アプリケーションで使用して、すべてのウェブ機能のリストを Baseline ステータス別に表示できます。
グループ内のすべての特徴を検索する
これまでの例ではすべて features エクスポートを使用していますが、groups エクスポートではすべての機能がグループ内で論理的に整理されます。たとえば、次のようにして、ビュー遷移の一部であるすべての機能を見つけることができます。
import { features, groups } from 'web-features';
const groupKeys = Object.keys(groups);
const featuresData = Object.values(features);
const viewTransitionsGroup = groupKeys.find(groupKey => {
return groupKey === 'view-transitions';
});
const viewTransitionsFeatures = featuresData.filter(feature => {
return feature.group === viewTransitionsGroup;
});
features と group のエクスポートの共通部分を使用すると、ウェブ機能の検索対象を、その機能が属するグループで絞り込むことができます。
すべてを組み合わせる
ルックアップを使用すると、CSS リンターの作成など、便利なツールを構築できます。
CSS リンターは、@ 規則、疑似要素、プロパティ、プロパティと値のペアを評価します。ベースライン リンターでは、親機能ではなく BCD キーで各トークンのステータスを検索します。
CSSTree などのパーサーは CSS をトークン化し、スタイルシートを抽象構文ツリー（AST）に分割します。次の例は、汎用クラス セレクタとスタイル宣言を使用する CSS ルールを示しています。
.foo {
word-break: auto-phrase;
}
AST は次のようになります。
{
"type": "StyleSheet",
"children": [
{
"type": "Rule",
"prelude": {
"type": "SelectorList",
"children": [
{
"type": "Selector",
"children": [
{
"type": "ClassSelector",
"name": "foo"
}
]
}
]
},
"block": {
"type": "Block",
"children": [
{
"type": "Declaration",
"important": false,
"property": "word-break",
"value": {
"type": "Value",
"children": [
{
"type": "Identifier",
"name": "auto-phrase"
}
]
}
}
]
}
}
]
}
AST をたどってプロパティ宣言を見つけたら、そのプロパティ名を対応する BCD キーにマッピングして、ベースライン ステータスを確認します。BCD は CSS プロパティを css.properties オブジェクトに分類するため、対応する BCD キーは css.properties.word-break になります。
次に、その BCD キーに関連付けられている機能を見つけて、そのステータスを調べます。
// Assuming we only know the BCD key and not the feature ID.
const bcdKey = 'css.properties.word-break';
const [featureId, feature] = Object.entries(features).find(([id, feature]) =>
feature.compat_features?.includes(bcdKey)
) || [];
const status = feature?.status.by_compat_key[bcdKey];
word-break プロパティのベースライン ステータスは次のとおりです。
{
"baseline": "high",
"baseline_high_date": "2018-03-30",
"baseline_low_date": "2015-09-30",
"support": {
"chrome": "44",
"chrome_android": "44",
"edge": "12",
"firefox": "15",
"firefox_android": "15",
"safari": "9",
"safari_ios": "9"
}
}
"high" ベースライン ステータスは、プロパティが広く利用可能であることを示しているため、リンターは警告を発行する必要はありません。次に、プロパティの値を調べます。
AST には、このプロパティの値が auto-phrase であることが示されています。対応する BCD キーを取得するには、親プロパティの BCD キー（css.properties.word-break.auto-phrase）に値を追加します。
この場合、web-features は word-break: auto-phrase プロパティと値のペアのステータスが Baseline ではないことを示しています。
{
"baseline": false,
"support": {
"chrome": "119",
"chrome_android": "119",
"edge": "119"
}
}
この linter の例の情報を使用して、このプロパティと値のペアがベースラインではないことをデベロッパーに警告します。この警告により、デベロッパーは主要なブラウザ エンジンで期待どおりに動作しないことを認識できます。
実際の例
前の例は、web-features パッケージの基本的な使用方法を示しています。このデータを活用するツールはすでに多数存在します。次に例を示します。
eslint-cssは、use-baselineルール内のweb-featuresパッケージを使用して、特定の機能の lint を行います。- Visual Studio Code のホバーカードでは、
web-featuresパッケージを使用して、CSS 機能と HTML 機能のベースライン情報を表示します。 - MDN では、ほとんどの機能ページ（
abs()など）のバナーでweb-featuresデータを使用して、ベースラインのステータスを伝えています。
このデータソースを使用してベースライン ツールを構築する方法については、他にも多くの例があります。皆様のプロジェクトがその一例となることを願っています。