Baseline 入門 - 「この機能もう使っていい？」をチームの共通語にする

新しい CSS や Web API を見つけたとき、必ず出てくる問いが「これ、もう使っていいの？」です。これまでは Can I Use を開いて緑のマスを数え、対応ブラウザを一つずつ確認していました。でもその判断は人によってブレますし、チームで合意を取るのも面倒でした。

Baseline は、この「使っていいか」を共通の言葉にする仕組みです。個々のブラウザ対応表を読む代わりに、「この機能は Baseline か」で判断できる。この記事では Baseline の仕組みと、チームの判断軸として実務に組み込む方法を整理します。

Baseline とは

Baseline は、相互運用可能なブラウザ群にまたがるWeb 機能の対応状況を明確にする指標です。ポイントは、ブラウザごとのバージョンを覚える必要がなく、2つの段階で機能を捉えられることです。

段階	意味
Limited availability	まだコアブラウザの一部でしか使えない（Baseline 前）
Newly available	コアブラウザすべてで対応し、相互運用が取れた状態
Widely available	Newly available から30か月が経過。ほとんどのサイトで対応を気にせず使える

つまり「Newly available になった＝主要ブラウザで一通り使える」「Widely available になった＝枯れていて安心」という、2段階の安全基準として読めます。

コアブラウザ集合

「すべてのブラウザ」ではなく、Baseline が見るのはコアブラウザ集合です。デスクトップとモバイルにまたがる4系統です。

Chrome（デスクトップ / Android）
Edge
Firefox（デスクトップ / Android）
Safari（macOS / iOS）

この集合すべてで対応したときに Newly available になります。「主要ブラウザ」をこう明確に定義してあるので、判断の前提がブレません。

Baseline 年バッジ

機能は、Newly available になった年でまとめられ、「Baseline 2024」「Baseline 2025」「Baseline 2026」のような年バッジになります。これにより「2024年に主要ブラウザで揃った機能群」のようにまとめて把握でき、自社のサポート方針（例: 直近2年は様子見、など）と照らし合わせやすくなります。

NOTE

「Newly available なら本番で使ってよいか」はプロダクト次第です。最新のブラウザを使う層が中心なら Newly available で十分なことも多い一方、幅広い端末を相手にするなら Widely available（＝30か月経過）を基準にするのが安全です。Baseline は「いつ使えるか」を示しますが、「自分たちがどの段階を採用基準にするか」はチームで決める必要があります。

どこで見られるか

Baseline の表示は、もう普段使うサイトに溶け込んでいます。

MDN: 各機能のドキュメントに Baseline ステータスが出る
Can I Use: 従来の対応表に Baseline の判定が併記される
web.dev: 記事中で機能の状態を明示する

「caniuse を開いて緑を数える」から、「MDN を見れば Baseline と書いてある」へ。判断のコストが下がっています。

ツールに組み込む（ここが実務の肝）

Baseline は「読む」だけでなく、ツールに判定させて自動化できます。これがチーム運用で効きます。

Browserslist: baseline widely available のようなBaseline クエリでターゲット指定ができる。ビルドのトランスパイル対象を「Baseline 基準」で決められる
ESLint: CSS や Web 機能の使用を Baseline 基準でチェックするプラグインがある。「まだ Baseline でない機能を使ったら警告」を自動化できる
Chrome DevTools: CSS プロパティに Baseline 情報が出る
VS Code: エディタに Baseline サポートが組み込まれている

たとえば Tailwind CSS v4 は、デフォルトのブラウザターゲットに「baseline widely available」相当の考え方を採用しています。Baseline はもう、設定ファイルの中の実際の基準値として機能し始めています。

WARNING

Baseline は便利ですが、万能の許可証ではありません。自社の利用者に古いブラウザや特殊な WebView が多い場合、Newly available でも実際には問題が出ることがあります。Baseline は「主要ブラウザでの相互運用」を示すもので、あなたのプロダクトの実際のアクセス解析に置き換わるものではありません。最終判断は自社のユーザー層と必ず突き合わせてください。

実務での使い方（チェックリスト）

採用基準を決める: 「Widely available のみ」か「Newly available も可」か、プロダクトのユーザー層で決める
Browserslist に反映: ビルドのターゲットを Baseline クエリで揃える
ESLint で自動チェック: 基準外の機能をレビュー前に検知する
例外はアクセス解析で判断: 「この機能は使いたいが Baseline 前」のときは、自社のブラウザ比率とフォールバックで個別判断

まとめ

Baseline は「この機能もう使っていい？」を共通語にする指標。ブラウザ別の対応表を読まずに段階で判断できる
段階は Newly available（コアブラウザで相互運用）→ Widely available（その30か月後で枯れている）
コアブラウザ集合は Chrome / Edge / Firefox / Safari（デスクトップ＋モバイル）。年バッジ（Baseline 2026 等）でまとめて把握できる
MDN / Can I Use / web.dev で表示され、Browserslist・ESLint・DevTools・VS Codeに組み込める
ただし最終判断は自社の実際のユーザー層と突き合わせること。Baseline は許可証ではなく共通の物差し

「使っていいか」を毎回個人の感覚で決めるのをやめて、Baseline という物差しに乗せる。それだけで、機能採用の議論がぐっと速く・揃ったものになります。