ふるさとチョイスの推奨・動作環境を厳密化させる試み

トラストバンクふるさとチョイス事業本部CTO室リーダーの礒部です。

私が所属しているCTO室というチームは、エンジニア組織の横断的な管理、プロジェクトにおける技術的側面のサポート、新技術導入の提案・検証・実行などといった業務を行っています。

その取り組みの一つとして、ふるさとチョイスが正常に動作する環境（ブラウザ・OS）を厳密に定義しようという試みを進めているので、それについて書きたいと思います。

ふるさとチョイスのフロントエンド事情

推奨環境の前にふるさとチョイスのフロントエンド事情について簡単に触れておきたいと思います。

ふるさとチョイスのフロントエンド開発環境は、タスクランナーにgulp、モジュールバンドラーにwebpackを利用しています。

JavaScriptはES6以上の記法で記述されているため、レガシーな環境でも動作させられるようにwebpack+Babelで以下のbrowserslistの設定をもとにビルドを行っています。

"browserslist": [
    "last 1 version", // 各環境の最新バージョン
    "ie >= 11", //IE11以上
    "ios >= 10.2", // iOS10.2以上
    "android >= 4.4" // android4.4以上
]

CSSにおいてもSCSSのコンパイル時にautoprefixerでこの設定を参照しています。

browserslistには各環境の最新バージョンという広い指定から、ブラウザ・OSのバージョン指定といった細かい指定までできます。

この情報をもとに必要なベンダープリフィックスをCSSに付与したり、JavaScriptを動かすのに必要なpolyfillを入れたりするので、あまり幅広い範囲を指定してしまうと、レガシーな環境で動かすための余計なコードが増えてファイル容量が圧迫したりパフォーマンスが低下するといったことも起こり得ます。

現状の推奨・動作環境

現状のふるさとチョイスのbrowserslistでサポートされる環境をリストアップしたものが以下です。

Android Browser 98 (0.00% global usage)
Android Browser 4.4.3-4.4.4 (0.25% global usage)
Android Browser 4.4 (0.00% global usage)
Chrome 98 (0.02% global usage)
Edge 98 (0.00% global usage)
Firefox 97 (0.02% global usage)
IE 11 (0.60% global usage)
IE Mobile 11 (0.02% global usage)
Safari on iOS 15.2-15.3 (3.50% global usage)
Safari on iOS 15.0-15.1 (5.89% global usage)
Safari on iOS 14.5-14.8 (3.53% global usage)
Safari on iOS 14.0-14.4 (0.87% global usage)
Safari on iOS 13.4-13.7 (0.28% global usage)
Safari on iOS 13.3 (0.08% global usage)
Safari on iOS 13.2 (0.02% global usage)
Safari on iOS 13.0-13.1 (0.04% global usage)
Safari on iOS 12.2-12.5 (0.60% global usage)
Safari on iOS 12.0-12.1 (0.04% global usage)
Safari on iOS 11.3-11.4 (0.04% global usage)
Safari on iOS 11.0-11.2 (0.07% global usage)
Safari on iOS 10.3 (0.11% global usage)
Safari on iOS 10.0-10.2 (0.03% global usage)
Opera 83 (0.02% global usage)
Safari 15.2-15.3 (0.86% global usage)

browserslistではIE, iOS, Android以外は最新のバージョンとなっているので、PCは範囲が狭く、スマホは逆に範囲が広いです。

browserslistはCan I Useの情報（Can I UseはStatCounter GlobalStatsのデータをもとにしている）をもとにリストを作成するため、実際のサービスのユーザー情報は加味されません。

GAのアクセスユーザー情報をもとに推奨環境を設定する

そこで実際にサイトを訪れているユーザーの情報をもとにbrowserslistを設定するためbrowserslist-ga-exportを活用してみようと考えました。

browserslist-ga-exportのGithubに書かれている手順は以下のようになります

  1. GAのユーザー設定の編集から言語をEnglish（United States）を選択する

  2. GA上でカスタムレポートを作成する

    • 種類はフラットテーブルを選択
    • ディメンションはオペレーティングシステム、OSのバージョン、ブラウザ、ブラウザのバージョン、デバイスカテゴリの並び順で設定（並び順重要）
    • 指標はページビュー数を選択

    f:id:trustbank-developers:20220222093332p:plain

  3. カスタムレポートの画面からCSVをエクスポートする

    • カスタムレポートを開き、絞り込む期間を設定
    • ブラウザで昇順にソート

    f:id:trustbank-developers:20220222093426j:plain

    • 表示件数を5000件に設定
    • 「エクスポート」からCSV形式でエクスポート

  4. 3でエクスポートしたCSVを以下のコマンドで読み込ませてJSON化する（—outputPathの指定をしなければデフォルトでbrowserslist-stats.jsonが生成される）

     browserslist-ga-export --reportPath {CSVファイル}

この手順で生成されたJSONをもとにbrowserslistを出します。

npx browserslist "> 1% in my stats”

サイト利用率1%以上を対象にした場合、以下のようになりました。

and_chr 88
android 98
chrome 96
chrome 95
chrome 94
chrome 93
chrome 92
chrome 91
chrome 90
chrome 89
edge 97
edge 96
edge 95
edge 94
edge 93
edge 92
edge 91
edge 90
edge 89
firefox 80
ie 11
ios_saf 15.0-15.1
ios_saf 14.5-14.8

閾値を何%にするかは、これから調整していきますが、この方法で以前よりも推奨・動作環境を厳密化させることができると思います。

終わりに

ブラウザやOSの更新頻度はどんどん早くなってきていてユーザーが利用している環境も目まぐるしく変わっていきます。そんな中でサイトの推奨・動作環境をどのように定義していくかというのは難しい問題ではありますが、仕組みでどうにか解決していきたいですね。

P.S. 2022年6月15日にとうとうIE11がサポート終了しますね。