ReactのInternetExplorer対応

2019-06-06

Page content

Reactで作ったページがIEで表示できなかった。

InternetExplorer11が、JavascriptのES2015(ES6)記法に対応していないため。

マイクロソフトも使わないでくれと言うようなレガシーブラウザですが、今なお結構なシェアを誇っているため、対応せざるを得ないケースも多いかと。

polyfillを使います。

polyfillは、「隙間を埋める」ような意味の言葉で、「存在しないメソッドを、既存メソッドで擬似的に再現する」ようなもの。

IEが対応していないES6のメソッドも、ES6以前のメソッドを用いて再現してくれます。

react-app-polyfillと、@babel/polyfillを使います。

（僕の場合、前者だけだと表示されず。）

まずpackage-jsonのあるディレクトリでpolyfillをインストール。

$ npm install react-app-polyfill --save
$ npm install @babel/polyfill --save

これでpackage-jsonに追加されます。

続いて、index.jsファイルにimportします。

import '@babel/polyfill'; 
import "react-app-polyfill/ie9";
import React from "react";
import ReactDOM from "react-dom";
...

import "react-app-polyfill/ie11"とするとIE11に、

import "react-app-polyfill/ie9"とするとIE9〜11に対応してくれる。

再度ビルドすると、無事IEから見ることが出来ました。

弊社の標準ブラウザもInternet Explorer！！！()