IE嫌いでも、対応しないとクライアントは納得しなかったりする。
HTMLファイル内に数行をコピペするだけで、IE対応するために...のメモ
STEP1） java script を Babel で IE対応に変換しておく
IEだとアロー関数とか使えないから
Babelで変換しておく
STEP2） HTMLファイル内に記述
</head>の直前とかに下記のコードをコピペしておく
<head>
<!-- 〜省略〜 -->
<!-- IE対策 -->
<script type="text/javascript">
//prettier-ignore
function addScript(path) {var script = document.createElement("script");script.type = "text/javascript";script.src = path;document.getElementsByTagName("head")[0].appendChild(script);}
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") !== -1 || userAgent.indexOf("trident") !== -1) {
addScript("https://polyfill.io/v3/polyfill.min.js");
addScript("https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js");
addScript("https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js");
}
</script>
<!-- END IE対策 -->
</head>
ユーザーエージェントがIEのときに、スクリプトを<head>内に追加する。
IEのときは動作が重くなるけど、まぁ...しかたないさ。IEだもん
IE
↑ IEのときはpolyfill.ioなどの外部スクリプトの読み込みが追加されている
Chrome
↑ IEじゃないブラウザ（上記はChrome）なら外部スクリプトの読み込みが追加されていない
何をもって IE と判別するか
コメントで @htsign さんから「UA での判断は絶対ではないので…。」とアドバイスいただきました。調べてみるとなるほどです。
IE を判別する方法として２択あります。
ユーザーエージェントでの判定
if (userAgent.indexOf("msie") !== -1 || userAgent.indexOf("trident") !== -1)
IE の機能で判別する （オススメ）
if (document.documentMode && document.uniqueID)
document.documentMode も document.uniqueID も IEの持つ特有の機能です。言い換えると「機能が存在する＝IE」ということのようです。こっちの方がパット見もスッキリですね
【参考サイト】
document.documentMode：推奨されていないドキュメント モードと Internet Explorer 11
document.uniqueID：要素固有の ID を取得する
ユーザーエージェントに依存しない、JavaScriptでのブラウザハックまとめ
よって最終的に...
<head>
<!-- 〜省略〜 -->
<!-- IE対策 -->
<script type="text/javascript">
//prettier-ignore
function addScript(path) {var script = document.createElement("script");script.type = "text/javascript";script.src = path;document.getElementsByTagName("head")[0].appendChild(script);}
if (document.documentMode && document.uniqueID) {
addScript("https://polyfill.io/v3/polyfill.min.js");
addScript("https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js");
addScript("https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js");
}
</script>
<!-- END IE対策 -->
</head>
IE
↑ if (document.documentMode && document.uniqueID) で判定して、scriptが追加されている様子
これでいきます。
他の記載方法
<script type="text/javascript">
document.documentMode && document.uniqueID && document.write('<script src="https://polyfill.io/v3/polyfill.min.js"><\/script>');
document.documentMode && document.uniqueID && document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"><\/script>');
document.documentMode && document.uniqueID && document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"><\/script>');
</script>
こんな方法もあるんですね！
こっちの方がaddScript()みたいなfunctionを書かなくていいので楽ですね！
なおdocument.documentMode && window.MSInputMethodContext && document.uniqueIDってするとIE11に限定できるようです。
ちなみ、こんな感じになります（</body>タグの直前に追加されます）↓
【参考サイト】
返せ、工数！コーダー泣かせの☓☓☓☓――IE11対応まとめ
【javascrip】Internet Explorerを判定する方法
JavaScriptの「&&」「||」について盛大に勘違いをしていた件
AND演算子（&&）
MSInputMethodContext object