プロジェクトでベースラインを使用する方法

プロジェクトでベースラインを使用する方法

この Codelab について

subject最終更新: 7月 12, 2025
account_circle作成者: Jeremy Wagner

1. はじめに

Baseline は、どのウェブ機能が相互運用可能で、今すぐ安全に使用できるかについて、より明確なメッセージを提供するイニシアチブです。ベースライン ツールが進化し、プロジェクトでベースラインを Browserslist クエリとして直接使用できるようになりました。これにより、ツールチェーンは選択したベースライン ターゲットに基づいてコードの出力を変更できます。

この Codelab では、サンプル プロジェクトで Baseline を使用する方法と、特定の Baseline ターゲットを選択するように構成する方法を学びます。また、選択したベースライン ターゲットに応じてプロジェクト ツールチェーンの出力がどのように変化するかを確認することもできます。

2. ローカルマシンでデモを設定する

まず、任意のターミナル アプリケーションに移動し、デモリポジトリのクローンを作成して、プロジェクト ディレクトリに入ります。

git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack-browserslist-config-baseline

この時点で、デモにはすでに Baseline が統合されていますが、最初から始めるコミットを確認します。

git checkout 94f12e34

リポジトリのクローンが作成されたので、デモを起動できます。このプロジェクトでは、nvm を使用して Node のバージョン管理を行います。比較的新しいバージョンの Node がグローバルにインストールされている場合は、この手順を完了する必要はない可能性があります。ただし、nvm を使用する場合は、次のコマンドを実行します。

nvm install
nvm use

ここから、プロジェクトのパッケージをインストールします。

npm install

デモを表示するには、次のコマンドを実行します。

npm start

次に、http://localhost:8080 に移動します。デモ自体は、ページ上部のフォーム フィールドを使用してフィルタできるカードのリストです。アプリ自体が、ベースラインのしきい値に達した機能の組み合わせを使用している。

デモが終了したら、ターミナルに移動して Ctrl+C キーを押すと、いつでもデモの実行を停止できます。

3. Baseline をプロジェクトに統合する方法

このデモでは、最初に Browserslist 構成を指定していません。Browserslist は、ツールチェーンでサポートする必要がある最小ブラウザ バージョンを指定するコンパクトなクエリ構文です。たとえば、last 3 years のクエリを使用すると、幅広いターゲットを指定できます。このデモでは、browserslist-config-baseline という名前の npm パッケージを使用して、ツールチェーンで使用できるベースライン ターゲットに沿った Browserslist クエリを指定します。

まず、次のように browserslist-config-baseline をインストールします。

npm install browserslist-config-baseline --save-dev

このパッケージをインストールすると、プロジェクトで extends Browserslist クエリを指定して、Baseline ブラウザのリストに解決できます。これらのベースライン ターゲットは、次のいずれかになります。

  • 動的なターゲット: 新しいブラウザがリリースされるたびに更新されます。
    • Baseline Newly available: 現在から 30 か月前までの間に、コアブラウザ セット全体で実装された相互運用可能な機能を調整します。
    • Baseline Widely available: 30 か月以上前にコア ブラウザ セット全体で実装された相互運用可能な機能が含まれます。
  • 固定ターゲット: 特定の時点のブラウザ バージョンを表します。これらは 2016 年から今年までの年で表されます。

まず、browserslist-config-baseline を使用して、プロジェクトの移動する Baseline Widely available ターゲットを選択します。これを行うには、package.json を開き、次のコードを追加します。

"browserslist": "extends browserslist-config-baseline"

4. 異なるベースライン ターゲットを選択して、コード出力の変化を確認する

デモ プロジェクトのターゲットとして [Baseline Widely available] を選択しました。次に、プロジェクトをビルドします。

npm run build

プロジェクトの babel.config.js で @babel/preset-env の debug オプションが true として指定されているため、余分な出力が多くなります。まず、バンドラーの統計情報で CSS と JavaScript のサイズを確認します。

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

JavaScript バンドルは 208 KiB、CSS は 3.64 KiB であることに注意してください。このプロジェクトでは、JavaScript ポリフィルに core-js を使用し、まだ完全に相互運用できない CSS プロパティにベンダー固有の接頭辞を適用するために autoprefixer を使用しています。core-js と autoprefixer はどちらも browserslist-config-baseline の影響を受けます。

出力で注意すべきもう 1 つの点は、Baseline Widely available の Browserslist クエリがどのように Browserslist クエリに変換されるかです。プロジェクトでは、次のようになります。

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

ビルド出力で core-js によって挿入されたポリフィルをメモします。

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

ベースラインの目標を変更すると、この出力も変更される可能性があります。たとえば、より厳格な SLA のため、アプリケーションが古いブラウザのセットをサポートする必要があるとします。このような場合は、より保守的な目標を選択することをおすすめします。package.json ファイルで、Browserslist 構成を次のように変更します。

"browserslist": "extends browserslist-config-baseline/2016"

これにより、ターゲットとして Baseline 2016 が選択され、Browserslist クエリに変換されます。ビルドを再実行すると、ツールチェーンの出力に違いが見られます。

npm run build

まず、バンドラーの統計情報で、プロジェクトの JavaScript と CSS のファイルサイズの変更を確認します。

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

JavaScript バンドルのサイズが 30 KiB 近く増加していることがわかります。プロジェクトの CSS は、2016 年のベースライン目標に基づいて autoprefixer がベンダー プレフィックスを追加したため、わずかに大きくなっています。Browserslist クエリの変更点にもご注目ください。

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

これらのブラウザ バージョンは、広く利用可能なベースライン ターゲットと比較してはるかに古いものです。このケースでターゲットにしている Edge のバージョンは、Chromium 以前のものです。

core-js によって挿入されるポリフィルも変更されます。これは、ターゲットとして [Baseline Widely available] を選択した場合よりも大幅な変更です。

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

ここで重要なのは、ベースライン ターゲットがプロジェクトのツールチェーンによるアプリケーションの変換方法に大きな影響を与える可能性があるということです。この例のアプリケーションは非常に基本的なもので、React にもアプリケーション自体にも最先端のデベロッパー エクスペリエンス機能はあまりありません。かなり複雑なアプリケーションの場合、結果は大きく異なる可能性があります。選択したベースライン ターゲットに準拠するために、追加のポリフィル、変換、その他の追加コードのソースがさらに多くなる可能性があります。

5. browserslist-config-baseline を使用してダウンストリーム ブラウザをターゲットにする

Baseline の対象となるコア ブラウザ セットには、次のブラウザが含まれます。

  • Chrome
  • Chrome（Android）
  • Firefox
  • Android 版 Firefox
  • Edge
  • macOS の Safari
  • iOS の Safari

ただし、「ダウンストリーム ブラウザ」と呼ばれるものをターゲットにすることはできます。これらのブラウザは、コア ブラウザ セットのブラウザ（多くの場合 Chromium）からエンジンが派生したブラウザです。Opera や Samsung Internet などのブラウザが該当します。package.json ファイルで browserslist-config-baseline を構成して、次のようにターゲットに設定できます。

"browserslist": "extends browserslist-config-baseline/with-downstream"

これは、Baseline Widely available target に従ってダウンストリーム ブラウザをターゲットにします。これが Browserslist クエリにどのように解決されるかを確認するには、プロジェクトを再ビルドします。

npm start

次に、Browserslist クエリの変更点を確認します。

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

また、ダウンストリーム ブラウザを年単位でターゲットにすることもできます。次に例を示します。

"browserslist": "extends browserslist-config-baseline/with-downstream/2016"

この構成では、Browserslist クエリが次のように変更されます。

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

6. リンターとその他のツール

browserslist-config-baseline はバンドラーやツールチェーンの他の部分にとって便利なツールですが、構成の一部としてベースライン ターゲットを採用したリンターなど、他のツールにも価値があります。

ベースラインのリンター サポートの好例として ESLint があります。これは、CSS リンティングの一部として、@eslint/css を使用する use-baseline ルールを提供します。このルールを使用すると、ベースラインの新規、ベースラインの広範な利用、ベースラインの年数をターゲットにできます。コミュニティの @html-eslint/eslint-plugin パッケージにも同様のルールがあり、eslint.config.js ファイルの HTML 機能に対して同じ処理を行うことができます。

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

この構成では、次の点に注意する必要があります。

  1. HTML と CSS の両方の linting パッケージで use-baseline ルールが使用され、available: "widely" 構成オプションを使用して Widely available に設定されています。
  2. 両方の lint パッケージで、linter 違反のログレベルが "warn" に設定されます。これを "error" に設定すると、エラーコードでドロップアウトしてビルドの発生を防ぐことができます。

以前に npm run build を実行したときにリンターの出力が表示されたことがあるかもしれませんが、リンターの出力だけを表示するには、次のコマンドを実行します。

npm run lint

出力には、プロジェクトの CSS のいくつかの警告が表示されます。

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

7. まとめ

ご覧のとおり、プロジェクトで browserslist-config-baseline を使用するには、基盤となるビルドツールと Browserslist のある程度の理解が必要ですが、プロジェクトに配置する作業は少しの労力で可能です。この機能を使用する主なメリットは、バージョン番号ではなく、Baseline ターゲットという形でサポートするブラウザを考えるだけで済むことです。

また、Rollup で実行されるこのデモのバージョンもあります。この Codelab は、そのデモでもほぼ同じように進めることができます。

ベースラインのサポートは、他のバンドルツールにも登場し始めています。たとえば、内部で Rollup を使用する Vite は、バージョン 7 以降、デフォルトで Baseline の広く利用可能なブラウザをターゲットにするようになりました。

どのような方法で進めるにしても、プロジェクトのツールチェーンに browserslist-config-baseline を導入し、自分に合ったベースライン ターゲットを選択することで、よりシンプルで信頼性の高い方法でブラウザをターゲットにできます。

bug_report 誤りを報告