IE11対応(JavaScript)

5159 ワード
ブラウザバック JavaScript IE11 IE JavaScript テキストリンク

IE対応の意義

下記URLを見ると2020年11月現在でも未だIE対応しなければならない現実があります.
https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-201810-202010

下記の通り2020年11月現在, IEが7.88%のシェアを占めています.

(ちなみに全世界だとIEのシェアは2.15%まで落ちます(2020年11月現在))

世の中ではまだまだIEが使われていることがわかる.

IE11においては, JavaScript?のES6が一部のみの対応に留まっている.
モダンな実装ができないと困るのでBabelというものを使う.

Babel

JavaScript?のコンパイラ. ES6以降の構文をES5以前の形式に変換するのに利用されたり, TypeScript?のコンパイルにも使われたりする.
https://babeljs.io

例えば下記のコードは普通だとIE11では動きません
アロー関数とテンプレートリテラルがIE11で非対応だからです.

ES6
//Doesnot work on IE11  
let foobar = ( hoge, fuga ) => {  
        return console.log("ほげの出力:${hoge}");  
//~~~~~~~~~~処理~~~~~~~~~~~~~~  
        return console.log("ふがの出力:${fuga}");  
//~~~~~~~~~~処理~~~~~~~~~~~~~~  
  }

これを下記のようなES5形式に自動コンパイルしてくれる.

ES5
// Works on IE11  
let hogefuga = function( hoge, fuga ){  
        return console.log("ほげの出力:" + hoge);  
//~~~~~~~~~~処理~~~~~~~~~~~~~~  
        return console.log("ふがの出力:" + fuga);  
//~~~~~~~~~~処理~~~~~~~~~~~~~~  
  }

ES6形式の方が効率がよく, できることも多く, 実装によっては(promiseなどは特に)必須になってくることがあるので,
コンパイルしてもらったほうがいい.

BabelPolyfill

スタンドアロンのBabelPolyfill?を使うとIE11でもES6記法が動く.
CDNだけで対応できてお手軽.

BabelスタンドアロンCDNの場合

html
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@latest/dist/polyfill.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@latest/babel.min.js"></script>  
<script type="text/babel" data-presets="env,stage-3" src="./js/main.js"></script>

main.jsは適宜書き換えてください.

npmの場合

npm install --save @babel/polyfill  

import "@babel/polyfill";