【随時更新】IE11で使えない、よく使うJavaScript構文【JS ES6】

hatomugi_s

5年前

こんにちは、はとむぎです。

今回は、IE11では使えないよく使うJavaScript構文ということで、作業中に気付いた（そしてエラーを頑張って直した）ものを紹介していきます。

Edgeが出て久しいですが、まだ日本でのIE11のシェアはそれなりに多いです。Windowsにも標準搭載されているので、IE対応が必要な案件やサイトのコーディング時に参考にしていただけると幸いです。

昔はIE8とかいう諸悪の根源がいましたが、今はそこまでの対応はもう必要なさそうです。flexbox等が使えるのがIE10からなので、それ以上を対象として制作される制作会社も今は多いですね。

【あわせて読みたい】
・IE11のサポートを切ると使えるようになるCSSとか一覧

長くなりましたが、紹介していきます。今後随時追加していきます。

IE11では使えない、よく使うJS構文集

見出しのものがIE11では使えなかったものです。各項目に代用の方法も書いていきますので、参考にしてみてください。また、下記のコードをEdgeで試しており、そちらではすべて問題なく使えました。

for … of …

for ofは配列を一つずつ取り出してくれるeachに似た命令で、慣れると使いやすくて多用してしまいがちですが、IE11では使えません。対策としては、下記のようにfor inを使って代用すると良いでしょう。

let items = [ 'apple', 'orange', 'lemon' ];

// IE11非対応
// for of は配列からひとつ取って変数（今回はitem）に代入する
for( let item of items ){
  console.log( item ); // 初回はapple
}

// IE11対応
// for in は変数（今回はi）にインデックス番号を代入する
for( let i in items ){
  console.log( items[i] ); // 初回はapple
}

// IE11対応
// for of → for in にする簡単な方法
for( let i in items ){
  let item = items[i]; // この1行を足す
  // ここから下は最初のfor of と同じ書き方でOK
  console.log( item );
}

アロー関数

関数を省略した形で書けるアロー関数。filterなどでよく使います。これは単純に省略せずに書くのがベストです。

let items = [ 'apple', 'orange', 'lemon' ];

// IE11非対応 アロー関数
let result = items.filter( item => items.length > 5); // [ 'orange ]

// IE11対応
// 省略なしで ↑ を書く
let result = items.filter(function( item ){
  return items.length > 5; // [ 'orange ]
});

startsWith関数

startsWith()は、文字列が引数で指定された文字列で始まるかを判定してtrueかfalseを返すメソッドです。最初の部分だけ判定するのであれば、長い文章でもパフォーマンスが悪くならないこの関数を使いたいところです。

ですがIE11では使えないので、ポリフィルを使いましょう。 String.prototype.startsWith()を使います。この書き方であれば問題ありません。
公式リファレンス – startsWith

if (!String.prototype.startsWith) {
    Object.defineProperty(String.prototype, 'startsWith', {
        value: function(search, rawPos) {
            var pos = rawPos > 0 ? rawPos|0 : 0;
            return this.substring(pos, pos + search.length) === search;
        }
    });
}

関数の引数に初期値を設定

関数の引数にあらかじめ初期値を設定しておき、値がなかった場合はその初期値を使うということができます。PHPにもありますね。しかし当然IE11では使えません。これは代用ができないので、関数を呼ぶ際にちゃんと引数を設定するようにしましょう。

// IE11非対応
// 引数に初期値を設定。yがなかった場合でも y = 5が設定される。
function test(x, y = 5) {
  return x + y;
}
// つまりこういう呼び方もできる
test( 3 ); // 8が返る

// IE11対応
// しょうがないので関数内で対応する
function test(x, y) {
  return x + y;
}
// y は省略できない
test( 3, 5 ); // 8が返る

複数の変数を一度に代入

変数に一度に代入できると本当に便利なんですが、IE11非対応です。。。ちゃんとそれぞれ代入しましょう。

// IE11非対応 複数の変数に一度に代入できる
let [ a, b ] = ['Hello', 'World'];
consoke.log( a + b ); // HelloWorld

// IE11対応 それぞれに代入する
let a = 'Hello',
    b = 'World';
consoke.log( a + b ); // HelloWorld

バッククオート（`）

バッククオート（Macでは shift + @）を使うと、JavaScript中の文字列を複数行書けて便利です。JSにはPHPにもあるようなヒアドキュメントという仕組みがないので、複数行の文字列を書く方法は実質これだけです。ただこれもIE11では使えません。悲しいですね。

少ない行であれば問題ないんですが、たくさんの行を文字列として書くとなるとかなり見づらくなります。これを避けるために、vue.jsなどの導入も検討してみてもいいかなと思います。

// IE11非対応 バッククオートで囲って複数行を入力
let str = `
  <div>
    <p>テキスト</p>
  </div>
`;

// IE11対応 シングル、ダブルクオートで囲って単行で書くしかない
let str = '<div><p>テキスト</p></div>';

という感じで、よく使うものを集めてみました。使うタイミングがあったものは随時更新していきます。基本的にはデバッグツールでエラーが出るので、その行をググればすぐに解決すると思います。

IEのサポート終了までまだ時間がありますので、もうしばらくは悩まされることになりますね。本当に困った子ですが、以前よりはだいぶマシなので、頑張って対応してあげましょう。