はじめに
ウェブ開発において様々なブラウザやバージョンを考慮することは重要です。
しかし、すべてのブラウザに対応するコードを書くのは手間がかかります。
この記事では、ブラウザ互換性を効率的に管理するためのツール「Browserslist」について紹介します。
Browserslistとは？
Browserslistは、ターゲットとなるブラウザやそのバージョンを定義するためのツールです。
ESLint、Autoprefixer、PostCSS、StyleLintなどの様々なフロントエンドツールと連携して、指定されたブラウザ向けの最適化を自動で行います。
主な特徴
- 柔軟なクエリ構文でブラウザの対象範囲を指定。
- 複数のツールとの統合が可能。
- 共有設定によるプロジェクト間の一貫性維持。
Browserslistで使用できるクエリ
Browserslistは柔軟なクエリ構文を提供しており、以下のような指定も可能です。
-
> 1%: 全体のシェアが1%以上のブラウザ -
last 2 versions: 最新2バージョンのブラウザ -
not dead: サポートが終了していないブラウザ -
maintained node versions: Node.jsのメンテナンスされているバージョン -
fully supports es6-module: ES6モジュールを完全にサポートしているブラウザ
設定したクエリがどれくらいのユーザーをカバーするかは、https://browsersl.ist/で確認できます。
Browserslistの設定方法
1. package.jsonに設定を追加
package.jsonファイルにbrowserslistフィールドを追加して設定します。
{
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
2. .browserslistrcファイルを使用
プロジェクトのルートに.browserslistrcファイルを作成して設定を記述します。
> 1%
last 2 versions
not dead
3. 設定ファイルからの読み込み
別のパッケージからエクスポートされたBrowserslist設定を参照できます。
{
"browserslist": [
"extends browserslist-config-mycompany"
]
}
このメソッドは安全性を重視しており、browserslist-config-接頭辞を含むパッケージのみ参照可能です。
npmスコープのパッケージも、@scope/browserslist-configのように命名することで参照できます。
例:
{
"browserslist": [
"extends browserslist-config-mycompany/desktop",
"extends browserslist-config-mycompany/mobile"
]
}
共有可能なBrowserslist設定ファイルを作成するには、下記のように配列をエクスポートすればOKです。
browserslist-config-mycompany/index.js
module.exports = [
'last 1 version',
'> 1%',
'not dead'
];
4. 環境ごとの設定
さらに環境に対応した設定も可能です。BrowserslistはBROWSERSLIST_ENVやNODE_ENVの変数によって、適切なクエリを選択します。
package.jsonの例:
{
"browserslist": {
"production": [
"> 1%",
"not dead"
],
"modern": [
"last 1 chrome version",
"last 1 firefox version"
],
"ssr": [
"node 12"
]
}
}
.browserslistrcの例:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12
5. CLIでの確認
設定が正しく機能しているかを確認するには、パッケージ下で以下のコマンドを実行すれば見れます。
npx browserslist
注意点
- last ... versionsを使用する場合は、以下のようなブラウザーを除くために
not deadを追加することを推奨します。- サポートが終了したブラウザ
- 長期に渡りアップデートされていないブラウザ
-
Opera Miniを除外することを推奨します。
- Opera Miniは、HTMLレンダリングエンジンを搭載していないため、対応したら逆にその他のブラウザーで互換性の問題が発生する可能性があります。
まとめ
Browserslistは現代のウェブ開発において欠かせないツールです。
効率的かつ正確にブラウザ互換性を管理することで、開発の手間を削減し、クリーンなコードを保つことができます。
ぜひプロジェクトで活用してみてください！
Discussion