browerlist-ga を利用して開発対象のブラウザにより適した Browserslist を設定してみよう
UI開発者 古川Browserslist とは、 Autoprefixer や Babel などのツールにおいて、開発対象ブラウザを共有するためのライブラリです。
Browserslist は通常 Can I use のデータを元に、全世界のブラウザ利用状況の中から package.json などの設定ファイルに指定した記述に従って対象ブラウザを列挙します。
Browserslist の指定には要注意
Browserslist の指定には少し注意が必要です。
例えば、Browserslist で単に「last 2 versions」と指定した場合、ブラウザのシェア率が0%のブラウザや、既に開発が終了している Internet Explorer 10 までが機械的に対象となってしまいます。
上記の指定方法は極端な例ですが、もし仮にグローバルな統計において開発対象ブラウザには不要なブラウザが列挙されている場合、開発者が意図しない記述がソースコードで出力されてしまう可能性があります。 例えば Autoprefixer を開発環境で導入していた場合、CSSプロパティに本来であれば不要なプレフィックスが付与されてしまいます。
このような事態を避けるために、開発対象のブラウザに近いブラウザをピックアップできる記述を適宜指定することが望ましいですが、Browserslist には様々な記述方法が存在します。
対象ブラウザを個別に指定できるのはもちろんのこと、全体的な統計の中の割合で指定する方法や、国別の統計の中で占める割合で指定する方法もあり、どのように記述を行えばよいか判断に困る場合があります。
そこで、より開発環境に適した Browserslist の設定を行う手段のひとつとして、Browserslist には、カスタムデータを利用する機能が備わっています。
フォーマットがドキュメントで指定されたものであれば、どのような手段でカスタムデータを用意しても動作しますが、ワンライナーで Google Analytics と連携し、実際のWebサイト利用者のブラウザシェアの統計データの生成をサポートしてくれるライブラリが提供されています。
それが browserslist-ga です。
browserslist-ga の使い方
browerlist-ga の利用方法は非常に簡単です。
まず、コマンドラインからプロジェクトのドキュメントルートへ移動した後、下記コマンドを実行します。
npx browserslist-ga
すると、Webブラウザが起動し、 Google Analytics との連携を求められます。 browserslist-ga は Google Analytics のデータ表示をリクエストするため、特に問題がなければ「許可」を選択してください。
連携が完了してからコマンドラインに戻ると、データを生成したい Google Analytics 上のサイトや、計測の対象期間を尋ねられるため、適宜選択します。
全て完了すると、ドキュメントルートに browserslist-stats.json が生成されます。
生成されたデータを元に、package.json にカスタムデータを指定する Browserslist の記述を行えば完了です。
{
...
"browserslist": [
"> 1% in my stats"
]
...
}
上記の設定は、Google Analytics で計測された統計データの中で、1% 以上の流入があるブラウザを列挙しています。どこまでのブラウザをカバーするかの割合は適宜設定が可能です。
例えば、コマンドラインから、「世界的な統計の中でのシェア率1%以上のブラウザ」を確認してみると下記が列挙されますが、
> npx browserslist "> 1%"
and_chr 66
and_uc 11.8
chrome 66
chrome 65
edge 16
firefox 59
ie 11
ios_saf 11.3
ios_saf 11.0-11.2
op_mini all
samsung 6.2
browerlist-ga を利用して生成されたデータを参照すると、「実際にGoogle Analytics上で計測された統計の中でのシェア率1%以上のブラウザ」が列挙されます。下記は一例です。
> npx browserslist "> 1% in my stats"
chrome 66
edge 16
firefox 60
ie 11
ios_saf 11.3
まとめ
Browserslist の設定で本来カバーしなくてもいいブラウザまで列挙されてしまうと、もう既にポリフィルが必要のないコードも変換されて出力されてしまい、コードが冗長になってしまう場合があります。
そのような事態を極力避けるためにも、公式のドキュメントで紹介されているベストプラクティスも併せて参考にしながら、Browserslist の設定は開発対象ごとに適宜見直していきたいですね。