これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
Post on:2022年9月27日
sponsors
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。
条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。
Browserslist
Browserslist -GitHub
Browserslistの特徴
Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。
0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了しているブラウザなどのクエリを使用してブラウザのバージョンリストを生成できます。クエリはCan I useのデータが使用されています。
Browserslistの使い方
Browserslistの使い方は簡単、登録など面倒なことは一切不要です。
まずは、サイトにアクセスします。
右上「Check compatible browsers」から「defaults」をクリック、または「defaults」を入力します。
「defaults」は世界中のユーザーを対象にしたデフォルトで、メンテナンスされているブラウザ、かつ0.5%以上のシェアがあるブラウザが対象です。
日本のユーザーを対象にする場合は、「Region」のプルダウンから「Japan」を選択します。
これで「defaults」の条件で、かつ日本のユーザーを対象にしたデフォルトです。
さまざまな条件でターゲットブラウザを調べる
Browserslistでは、さまざまな条件でターゲットブラウザを調べることができます。
ある程度のユーザーが利用しているブラウザだと、0.2%以上のシェアがあるブラウザを対象にしてみます。
前述の0.5%にはなかったブラウザが、0.2%にすると見られます。
現在サポートされていないブラウザを除いてみます。
0.2%以上のシェアがあるブラウザで、デッド バージョンを除外。
たとえば最新とその前のバージョンのみをサポート、というのもよく見かけます。どのくらいのシェアがあるのか気になりますね。
69.3%は厳しい数字ですね、これに限定してしまうのは危険です。
CSSやJavaScriptの機能をサポートしているブラウザのシェアを調べることもできます。たとえば、CSS Gridをサポートするブラウザのシェアです。
ほかにも、CSSの:has()疑似クラスだとsupports css-has、scriptタグを介してJavaScriptモジュールをサポートするバージョンだとsupports es6-moduleで分かります。
sponsors
