こんにちは。DSOC サービス開発部 Bill One Entryグループの山﨑です。
クラウド請求書受領サービス『 Bill One 』で取り込まれた請求書のデータ化システム『 Bill One Entry 』を開発するチームでエンジニアをしています。
Bill One Entry の画面は TypeScript + React/Redux で開発していますが、新しく追加した画面でこれまでサポート対象外にしていた Internet Explorer 11（以下、IE11）をサポートする必要があったので、そのためにやったことをまとめたいと思います。
目次
- なぜ IE11 に対応する必要があるのか
- IE11 に対応するために何をしたか
- browserslist の設定
- Babel で使用する Polyfill の設定
- 残っている課題
- まとめ
なぜ IE11 に対応する必要があるのか
世の中には様々な種類のブラウザがあり、日々アップデートされています。そのため、ユーザーによって使用しているブラウザの種類、バージョンは様々です。
ブラウザによって JavaScript の実行エンジン が異なるため、同じコードでもブラウザによって意図したとおりに動いたり動かなかったりする場合があります。特に ES6 以降のいわゆる Modern JavaScript で書いたコードは IE11 のようなレガシーなブラウザでは意図したとおりに動かないことも多く、トランスパイル（ES5 のような動くコードに変換）する必要があります。
ちなみに、書きたいコードがどのブラウザでサポートされているのかは Can I use というサイトで調べることができます。
今回新しく追加した画面は一定数 IE11 を使用したユーザーからのリクエストが想定されるため、サポートする必要がありました。
国内における IE11 のシェアは 2021/05/06 時点で3%以上あり、少ないようですが世界全体のシェア1%未満と比較するとまだまだ多く、無視できません。実際に国内ではまだまだ IE11 をサポートしている Web サービスはたくさんあります。
IE11 に対応するために何をしたか
browserslist の設定
browserslist とは、アプリケーションでターゲットにしているブラウザや Node.js のバージョンを異なるフロントエンドツール間で共有するためのライブラリです。
package.json に書くやり方と .browserslistrc を作成して記載するやり方があります。どちらかにターゲットブラウザを記載することで Autoprefixer や Babel など異なるライブラリでそれぞれターゲットブラウザの設定をする必要がなくなります。
ちなみに Bill One Entry はそれほど大きなアプリケーションではなく設定を1箇所にまとめておいた方が管理がしやすいので package.json に書く方を選択しました。
詳しい書き方はぜひ Github のページを確認していただきたいのですが、簡単な例を上げるとこのような感じです。
この例では、Chrome と Firefox の最新2バージョンと IE11 をターゲットブラウザとしています。
"browserslist": [ "last 2 Chrome versions", "last 2 FF versions", "ie 11" ]
次の例は、日本で1%より大きいシェアがあり、過去2年以内に公式のアップデートがあったブラウザをターゲットブラウザとしています。
"browserslist": [ ">1.0% in JP", "not dead" ]
自分が設定した browserslist でターゲットになっているブラウザは yarn browserslist で確認できます。
Babel で使用する Polyfill の設定
Bill One Entry ではトランスパイラに Babel を使用しています。
Bebel は core-js を Polyfill として採用しているので、そのための設定を .babelrc に記載しました。
Polyfill とは、レガシーなブラウザでも動く Modern JavaScript の機能を模倣したコードのことです。
browserslist で設定したターゲットブラウザからのリクエスト時は、該当ブラウザで動かないコードを Polyfill で代替してトランスパイルして配信してくれます。
Babel の設定をするときは、こちらの記事を参考にさせていただきました。初心者にもわかりやすく非常に勉強になりました。
残っている課題
現状 IE11 での動作テストを自動化できていないので、変更するたびに人間の手と目で動作確認が必要です。 IE11 をサポートする必要がある画面の数が少なく変更頻度もそう高くはないので、自動化の優先順位は高くはないのですが、いつかやりたいなと思っています。
そのときはこの記事が参考になりそうです（ありがたい・・・）。
まとめ
ということで、IE11 に対応した理由と対応するためにやったことを簡単にご紹介しましたが、いかがでしたでしょうか。
私は Sansan に入社する前はバックエンドの開発しかしたことがなく、フロントエンドの開発をするようになってまだ日が浅いですが、IE11 に対応するタスクの中で多くの学びがありました。
IE11 のようなレガシーなブラウザに対応するの辛い・・・と思うこともありますが、非常にいい経験でした。
