フロントエンド開発では「どのブラウザバージョンまでサポートすべきか」という判断が繰り返し必要になります。Can I Useを手動で調べてBrowserslistに反映する方法はメンテナンスコストが高く、チーム間で基準もブレがちです。
Web Platform Baselineは、Chrome・Edge・Firefox・Safariの主要4ブラウザでの機能対応状況を「Newly Available（全ブラウザで利用可能になった直後）」「Widely Available（30ヶ月以上の安定サポート実績あり）」の2段階で分類する仕組みです（出典: web.dev）。
baseline-browser-mappingは、このBaseline情報をプログラムから参照し、対応ブラウザの最小バージョンを配列として取得できるnpmパッケージです。W3C WebDX Community Groupが管理しており、web-featuresと@mdn/browser-compat-dataのデータを日次で自動更新しています（出典: GitHub）。
インストール手順
開発依存として追加します。
npm i baseline-browser-mapping@latest -D
yarnやpnpmの場合は以下の通りです。
# yarn
yarn add -D baseline-browser-mapping@latest
# pnpm
pnpm add -D baseline-browser-mapping@latest
-D（--save-dev）を指定する理由は、ビルド時にブラウザバージョンを解決するためのツールであり、本番コードには含めないためです。
主要APIと使い方
baseline-browser-mappingは2つの関数を公開しています。
getCompatibleVersions()
Baseline基準を満たすブラウザの最小バージョン一覧を返します。
import { getCompatibleVersions } from "baseline-browser-mapping";
// Widely Availableの最小バージョンを取得
const browsers = getCompatibleVersions();
console.log(browsers);
// [
// { browser: "chrome", version: "105", release_date: "2022-09-02" },
// { browser: "firefox", version: "104", release_date: "2022-08-23" },
// ...
// ]
主要オプション一覧
| オプション | 型 | 説明 |
|---|---|---|
targetYear | number | 指定年末時点のBaseline Newly Available対応バージョンを返す |
widelyAvailableOnDate | string | YYYY-MM-DD形式で日付を指定し、その時点のWidely Available対応バージョンを返す |
includeDownstreamBrowsers | boolean | Chromium派生ブラウザ（Opera、Samsung Internetなど）を含める。デフォルトfalse |
includeKaiOS | boolean | KaiOSを含める（includeDownstreamBrowsers: trueが前提） |
listAllCompatibleVersions | boolean | 最小バージョン以降の全バージョンを列挙する |
suppressWarnings | boolean | データ古化の警告を抑制する |
年別ターゲットの指定例
// 2024年末時点のBaseline Newly Available対応を取得
const v2024 = getCompatibleVersions({ targetYear: 2024 });
// 特定日付のWidely Available対応を取得（再現可能ビルド向け）
const vFixed = getCompatibleVersions({
widelyAvailableOnDate: "2025-06-01"
});
targetYearとwidelyAvailableOnDateは排他的なオプションです。同時に指定するとエラーになります。
派生ブラウザを含める
const withDownstream = getCompatibleVersions({
includeDownstreamBrowsers: true
});
// Opera、Samsung Internet、Android WebViewなども含まれる
getAllVersions()
全ブラウザバージョンのBaseline対応情報を返します。アクセス解析データとの突合やダッシュボード構築に適しています。
import { getAllVersions } from "baseline-browser-mapping";
const all = getAllVersions();
// [
// {
// browser: "chrome",
// version: "120",
// release_date: "2023-12-06",
// year: 2023,
// wa_compatible: true
// },
// ...
// ]
getAllVersions()の出力形式
outputFormat | 説明 |
|---|---|
"array"（デフォルト） | オブジェクト配列 |
"object" | ブラウザ名をキーとしたオブジェクト |
"csv" | CSV文字列 |
// CSV形式で取得してファイルに保存
import { writeFileSync } from "fs";
const csv = getAllVersions({ outputFormat: "csv" });
writeFileSync("browser-support.csv", csv);
Browserslistとの3つの連携方法
baseline-browser-mappingのデータをビルドツール（Babel、PostCSS、Autoprefixerなど）で活用するには、Browserslistとの連携が必要です。現在3つの方法があります。
方法1: Browserslistネイティブクエリ（推奨）
Browserslist本体がBaselineクエリをサポートしています。追加パッケージは不要です。
{
"browserslist": ["baseline widely available"]
}
年別やNewly Availableも指定できます。
{
"browserslist": ["baseline 2024"]
}
{
"browserslist": ["baseline newly available"]
}
日付固定で再現可能なビルドを実現する場合は次のように書きます。
{
"browserslist": ["baseline widely available on 2025-06-01"]
}
方法2: browserslist-config-baseline
browserslist-config-baselineは、baseline-browser-mappingを内部で利用するBrowserslist設定プリセットです。
npm i browserslist-config-baseline -D
{
"browserslist": ["extends browserslist-config-baseline"]
}
年別ターゲットや派生ブラウザの設定も可能です。
{
"browserslist": ["extends browserslist-config-baseline/with-downstream/2024"]
}
package.jsonにオプションオブジェクトを追加する方法もあります。
{
"browserslist-config-baseline": {
"baselineYear": 2024,
"includeDownstreamBrowsers": true,
"logConfigToConsole": true
}
}
方法3: bl2bl（CLI変換ツール）
bl2blはBaselineターゲットをBrowserslist設定に変換するCLIツールです。
npm i bl2bl -D
npx bl2bl
実行すると、package.jsonのbrowserslistフィールドに具体的なバージョン番号が書き込まれます。デフォルトでsavePrevious: trueのため、変更前の設定は.browserslistrc_backupに自動バックアップされます。
{
"bl2bl": {
"baselineThreshold": "widely available",
"downstreamBrowsers": false,
"savePrevious": true
}
}
3つの方法の比較
| 特徴 | ネイティブクエリ | browserslist-config-baseline | bl2bl |
|---|---|---|---|
| 追加パッケージ | 不要 | 必要 | 必要 |
| 設定の柔軟性 | 高（日付指定可） | 高（年別・派生ブラウザ指定可） | 中 |
| バージョン固定 | 日付クエリで可能 | widelyAvailableOnDateで可能 | 実行時点の値で固定 |
| CI/CDとの相性 | 動的解決 | 動的解決 | 静的（コミット可能） |
| 用途 | 一般的なプロジェクト | 細かい制御が必要な場合 | バージョン番号を明示したい場合 |
「データが古い」警告への対処
baseline-browser-mappingはインストール後2ヶ月以上更新しないと、次のような警告が表示されます。
[baseline-browser-mapping] The data in this module is over two months old.
Please update to the latest version.
この警告はNext.jsのビルドログで表示されることが多く、GitHub上でも多数の報告があります（出典: GitHub Issue）。
対処法1: パッケージを最新版に更新
npm i baseline-browser-mapping@latest -D
対処法2: suppressWarningsオプション
API呼び出し時にオプションで抑制できます。
const browsers = getCompatibleVersions({ suppressWarnings: true });
対処法3: 環境変数
CIパイプラインなど、コードを変更できない場面では環境変数で抑制します。
BASELINE_BROWSER_MAPPING_IGNORE_OLD_DATA=true npm run build
対処法4: package.jsonにscriptを追加して自動更新
{
"scripts": {
"preinstall": "npm i baseline-browser-mapping@latest -D"
}
}
CDNからの利用
サーバーサイドだけでなく、ブラウザからCDN経由で直接利用することも可能です。
<script type="module">
import {
getCompatibleVersions,
getAllVersions,
} from "https://cdn.jsdelivr.net/npm/baseline-browser-mapping";
const browsers = getCompatibleVersions();
console.table(browsers);
</script>
分析ダッシュボードやブラウザ対応表の動的生成など、フロントエンドでの用途にも活用できます。
Babelでのバンドルサイズ削減効果
Baselineターゲットを設定すると、不要なポリフィルやシンタックス変換が削減されます。web.devの記事では、デフォルト設定から「baseline 2020」への変更で、ファイルサイズが12KBから1.5KBに削減された事例が紹介されています（出典: web.dev）。
// babel.config.js
module.exports = {
presets: [
["@babel/preset-env", {
targets: "baseline widely available"
}]
]
};
async/awaitやoptional chainingなど、Widely Available済みの構文に対してはBabelの変換が不要になり、出力コードが軽量化されます。
パッケージ概要
| 項目 | 内容 |
|---|---|
| パッケージ名 | baseline-browser-mapping |
| 管理元 | W3C WebDX Community Group |
| リポジトリ | web-platform-dx/baseline-browser-mapping |
| ライセンス | Apache-2.0 |
| 対応Node.js | v8以上 |
| データソース | web-features、@mdn/browser-compat-data |
| 更新頻度 | 日次（GitHub Actionsによる自動更新） |
まとめ
baseline-browser-mappingは、ブラウザ対応の基準をWeb Platform Baselineという業界標準に委ねることで、手動メンテナンスの負担をなくすパッケージです。getCompatibleVersions()で最小バージョンを取得し、getAllVersions()で全バージョンの対応状況を分析できます。
Browserslistとの連携はネイティブクエリ・browserslist-config-baseline・bl2blの3通りがあり、プロジェクトの要件に応じて選択できます。再現可能なビルドが必要な場合はwidelyAvailableOnDateオプションや日付指定のBrowserslistクエリを使用してください。
npm i baseline-browser-mapping@latest -D