このページは Cloud Translation API によって翻訳されました。

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

1. はじめに

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

この Codelab では、サンプルプロジェクトで 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 に移動します。デモ自体は、ページ上部のフォームフィールドを使用してフィルタできるカードのリストです。アプリ自体が、ベースラインのしきい値に達した機能の組み合わせを使用している。

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

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

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

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

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

"browserslist": "baseline widely available"

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 クエリの影響を受けます。

出力で注意すべきもう 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": "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 年のベースラインの目標に基づいて 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. ダウンストリームブラウザをターゲットにする

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

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

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

"browserslist": "baseline widely available 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": "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. Linter とその他のツール

Browserslist に組み込まれているベースラインクエリは、バンドラーやツールチェーンの他の部分などのツールで便利ですが、リンターなどの他のツールにも価値があります。リンターは、構成の一部としてベースラインターゲットを採用しています。

ベースラインのリンターサポートの好例として 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"       }]     }   } ];

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

HTML と CSS の両方の linting パッケージで 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 が提供するベースラインクエリを使用するには、基盤となるビルドツールと Browserslist 自体についてある程度の理解が必要ですが、プロジェクトに配置する行為自体は簡潔です。この機能を使用する主なメリットは、バージョン番号ではなく、Baseline ターゲットという形でサポートするブラウザを考えるだけで済むことです。

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

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

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