Baseline を使用すると、最新のブラウザ エンジン間で相互運用可能で、現在安全に使用できる機能を確認できます。では、プロジェクトで Baseline をどのように使用すればよいのでしょうか?このページでは、使用方法を決定する際に役立つ資料と、その過程で考慮すべき事項について説明します。

ベースラインの仕組み

ベースラインは、3 つのしきい値を使用してメッセージの明瞭さを提供することで機能します。これらのしきい値は、コアブラウザ セット(Android とパソコン版の Chrome、Android とパソコン版の Firefox、macOS と iOS の Safari、Edge)の相互運用性のレベルを示しています。これらのラベルと記号を見ると、最新のブラウザ エンジンでウェブ機能がどの程度確立されているかをすばやく把握できます。

限定的な可用性の機能は、コア ブラウザ セット全体で実装されていない機能です。これらの機能を使用するには、ポリフィルやプログレッシブ エンハンスメントを検討するなど、ある程度の計画が必要になります。
新しく利用可能になった機能とは、最近コア ブラウザ セットに実装された機能のことです。機能が [Newly available] と表示されている場合、これらの機能は時間の経過とともにブラウザ全体でより広くサポートされるようになります。
広く利用可能な機能とは、コア ブラウザ セットで少なくとも 30 か月間相互運用可能であった機能のことです。機能が Baseline Widely available になると、コアブラウザ セットで十分にサポートされることが期待できます。

プロジェクトで Baseline を使用する前に、使用する Baseline ターゲットを決定する必要があります。ベースライン ターゲットは、時間の経過とともに相互運用可能な機能を追加するように進化する移動ターゲットか、特定の年の相互運用可能な最新の機能セットを表す固定ターゲットのいずれかです。このガイドでは、データドリブンでベースラインの目標を選択する方法について説明します。

プロジェクトに Baseline を追加する

どの機能が相互運用可能なブラウザであるかを把握するのは大変な作業ですが、Baseline をプロジェクトに導入し、この作業を支援するツールを使用することで、作業量を減らすことができます。Browserslist には、プロジェクトで Baseline を簡単に使用できるようにする組み込みクエリがいくつか用意されています。

Browserslist に組み込まれたベースライン固有のクエリを使用して、開発のリンティング ツールとパッケージング ツールにベースラインを追加します。
この Codelab では、webpack、Babel、PostCSS を使用して Baseline をウェブ プロジェクトに統合する方法を学習します。

ベースラインのデモをチェックする

プロジェクトで Baseline をどのように使用するかを検討するうえで、ツール統合のデモが参考になります。

webpack プロジェクトで Baseline を使用する方法について説明します。
Rollup プロジェクトで Baseline を使用する方法について説明します。

すべてのウェブ機能が相互運用可能であるわけではありませんが、それらの機能を使用できないわけではありません。Baseline の一部として、相互運用不可能な機能を使用するかどうかはユーザーに委ねられています。これはご自身で判断していただく必要があります。そのためのガイダンスを公開していますので、ご参照ください。

独自のベースライン ツールを作成する

Baseline の特定のツールを探しているが見つからない場合は、ベースライン ツールは開発中の分野であり、必要なものがまだ開発されていない可能性があります。企業家タイプの場合は、独自のツールを作成できます。これらの記事では、ウェブ機能データをいくつかの方法で使用して、自分や他のユーザーにとって役立つツールを作成する方法を紹介します。

ウェブ プラットフォーム ダッシュボードと、ベースライン ツールの構築に役立つ HTTP API をクエリする方法について学びます。
web-features npm パッケージのデータを使用して独自の Baseline ツールを作成する方法を学びましょう。