GAミント至上主義

Web Monomaniacal Developer.

IEで起こるJavaScriptエラーをpolyfill.ioを使ってなんとかする

シニアジョブでは、まだまだ古いPCを使っているシニアの方が多いのか、令和になったこの頃でも、残念ながらIEのアクセス数が無視できない程度に健在です。

JavaScriptのエラーが起きてしまうとその後の処理が止まってしまったり影響が多いため、なんとかしたいところ。

でもVueなども使っており、全部をIEでも動くコードに書き換えることは現実的ではないので、ポリフィルを使った対応を行っています。

ポリフィルとは

IEなど古いブラウザにない機能を追加するコードのこと。詳しくは下記。
Polyfill (ポリフィル) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

polyfill.ioとは

選択したポリフィルをブラウザーに合わせて、必要なだけ配信してくれるサービスです。
生成したURLをscriptタグで読み込むだけで使用できます。

Chromeなどでアクセスするとコメントだけのファイルが返ってくるのが確認できます。

polyfill.io

それぞれの機能ではなく、es5などのセットもありますが、余計なコードを読み込ませるのを防ぐため今回はエラーを見て一つずつ追加しました。

今の所こんな感じ

    <script src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.classList%2CPromise%2CIntersectionObserver%2CObject.entries%2CObject.keys%2CArray.prototype.forEach%2CNodeList.prototype.forEach"></script>

ポリフィルでは対応できないエラー

文法エラー(Syntax Error)は残念ながらポリフィルでは対応できません。
主にconst, letと、アロー関数があるので、それは書き換えが必要です。

const hensu = 1;
# var hensu = 1; に変更

アロー関数はthisが変わるのでちょっと注意が必要かも。

BabelやTypeScriptを使ってる場合はビルドオプションでなんとかできるはず。

動作確認の方法

Windowsがあれば、IE11と互換モードでIE9までテストできますがシニアジョブでは基本的にMacなのでそうは行きません。

今回はVirtualBoxとMS公式のVMを使いました。Windows10とIE11が動かせます。重い。
Virtual Machines - Microsoft Edge Developer

どうやって必要な機能を選ぶか

IEで該当のページを開きF12などで開発者ツールを開き、その「Console」タブを開きます。
こんな感じでエラーが出ると思います。

f:id:uyamazak:20200519104436p:plain
f:id:uyamazak:20200519103627p:plain

IEのコンソールのエラーはまじクソで該当の箇所を示してくれず、MS社員がどうやってDebugしてたのか謎の機能なので、行数と文章でなんとかあたりをつけます。
私が使いこなせてないだけかもしれませんが、使いこなす日はこないでしょう。

あたりを付けた機能を下記ページで選択してURLを発行して読み込ませます。
https://polyfill.io/v3/url-builder/

今回のエラーだとnowはおそらくDate.nowだろってことで追加したらエラー消えました。
forEachは、Array.forEachだろと思いましたがNodeListの方だったっぽい。でも両方使う機会が多いので追加しておきました。
Syntax Errorは上記のconst でした。


Polyfillを使った対応は最善では無いですが、IEも減ってきて、最新のJS機能を使いたいこの頃では、現実的な解決方法だと思います。