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

1. はじめに

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

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

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

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

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

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

git checkout d3793f25

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

nvm install
nvm use

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

npm install

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

npm start

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

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

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

このデモでは、最初に Browserslist 構成を指定しません。Browserslist は、ツールチェーンでサポートする必要がある最小ブラウザバージョンを指定するコンパクトなクエリ構文です。たとえば、a query of last 3 yearsのクエリを使用すると、幅広いターゲットを指定できます。このデモでは、ツールチェーンで使用できる Baseline ターゲットに沿った Browserslist クエリを指定します。Baseline ターゲットは、次のいずれかになります。

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

まず、プロジェクトの移動 Baseline Widely available ターゲットを選択します。これを行うには、package.json を開いて次のように追加します。

"browserslist": "baseline widely available"

4. さまざまな Baseline ターゲットを選択してコード出力の変化を確認する

デモプロジェクトのターゲットとして 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 の両方が、選択した Baseline Browserslist クエリの影響を受けます。

出力で注意すべきもう 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" }

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

"browserslist": "baseline 2016"

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

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 年の Baseline ターゲットに基づいて autoprefixer がベンダー接頭辞を追加したためです。また、Browserslist クエリの変更にも注意してください。

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

Baseline Widely available ターゲットと比較して、これらのブラウザバージョンははるかに古いものです。この場合、ターゲットとなる 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" }

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

5. ダウンストリームブラウザをターゲットにする

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

Chrome
Chrome（Android）
Firefox
Firefox（Android）
Edge
Safari（macOS）
Safari（iOS）

ただし、「ダウンストリームブラウザ」と呼ばれるものをターゲットにすることもできます。これらのブラウザは、コアブラウザセットのブラウザ（ほとんどの場合 Chromium）から派生したエンジンを使用しています。Opera、Samsung Internet などのブラウザが含まれます。有効な Baseline Browserslist クエリに with downstream を追加すると、コアブラウザセットのブラウザに加えて、これらのブラウザをターゲットにできます。

"browserslist": "baseline widely available with downstream"

これにより、Baseline Widely available ターゲットに従ってダウンストリームブラウザがターゲットになります。これが 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": "baseline 2016 with downstream"

この構成では、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 に組み込まれている Baseline クエリは、バンドラやツールチェーンの他の部分などのツールに便利ですが、構成の一部として Baseline ターゲットを採用しているリンターなどの他のツールにも価値があります。

Baseline のリンターサポートの好例として、ESLint があります。ESLint は CSS リンティングの一部として、use-baseline ルールを @eslint/css を使用して提供し、Baseline Newly、Baseline Widely available、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"
      }]
    }
  }
];

この構成では、次の点に注意してください。

HTML と CSS の両方の lint チェックパッケージで use-baseline ルールが使用され、available: "widely" 構成オプションを使用して Widely available に設定されています。
両方の 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 が提供する Baseline クエリを使用するには、基盤となるビルドツールと Browserslist 自体を理解する必要がありますが、プロジェクトに配置する作業は簡潔です。これを使用する主なメリットは、サポートするブラウザをバージョン番号で考える必要がなくなり、代わりに、面倒な作業を代行してくれる Baseline ターゲットを使用できることです。

また、Rollup で実行されるこのデモのバージョンもあり、そのデモを使用してこの Codelab のほとんどの手順を行うことができます。

Baseline のサポートは、他のバンドルツールにも導入され始めています。たとえば、内部で Rollup を使用する Vite は、バージョン 7 以降、デフォルトで Baseline Widely available ブラウザをターゲットにしています。

どのような方法で進めるにしても、Browserslist で利用可能な Baseline クエリをプロジェクトに導入し、自分に合った Baseline ターゲットを選択することで、よりシンプルで信頼性の高い方法でブラウザをターゲットにできます。