2021年03月04日 に更新

注意！IE11で使えない最新JavaScritコード（ES6）

こんにちは。フリーランス・コンサルタント＆エンジニアの 九保すこひ です。

さてさて、前回の記事、完全な手順！VueJSで自動ページ送りする方法では、ES6を使ってページ送り機能を実装してみましたが、その際ふと疑問に思ったことがありました。

それは、

インターネットエクスプローラー11（IE 11）だと、どんなES６の記述ができるんだろう？？

というものです。

IEといえば、当のマイクロソフトでさえedgeへの移行をすすめている、もはやレガシーなブラウザですが、未だに一定数以上のシェアを持っていることから、どうしても古いJavaScriptの書き方をせざるを得ないのが現状です。（BableとかはIEへの対応という意味合いが大きいですね）

そこで！今回は、実際にIE11でES6の主要な書き方を実行し、うまくいくかどうかをひとつずつ検証してみます。（そして、せっかくなのでedgeでも検証してみました。）

ぜひ開発の参考にしてみてください。

「ひさびさにVirtualBoxを起動するぞ♪」

※実行環境はIEが11.15.16299.0、edgeが41.16299.15.0です。

let で変数を指定してみる

let letArg = '「let」が使えます！';
document.write(letArg);

IE：  成功！
edge： 成功！

ともに成功しました。

const で変数を指定してみる

const constArg = '「const」が使えます！';
document.write(constArg);

IE：  成功！
edge： 成功！

letと同じくどちらも成功です。

【追記：2021.03.04】
訪問ユーザーさんからご指摘をいただきまして、IE 11では以下のようにfor()の中では使えないようですので追記させていただきます。

皆さん、貴重な情報いつもありがとうございます。😊✨

const items =  { a: 1, b: 2, c: 3 };

for(const key in items) { // ⚠ここの const は IE 11 ではサポートしていません。

    console.log(key);

}

※ なお、Can I useによるとfor 〜 inだけでなく、for 〜 ofもIE 11ではサポートしていないようです。

📝参考URL: https://caniuse.com/?search=const

関数のデフォルト値をつけてみる

function test(x, y = 5) {

    return x + y;

}
document.write(test(3));

IE： 失敗…

上のコードは動けば「8」が表示されますが、IE11では以下のエラーが発生してしまいました。

edgeの実行結果： 成功！

アロー関数を実行してみる

var arrow = () => {

    return 'アロー関数が使えます！';

};
document.write(arrow());

IE： 失敗…

ES6の代表的な新機能といってもいいアロー関数ですが、これもIE11ではエラーがになります。

edge： 成功！

オブジェクトを省略して書いてみる

var obj = {
    shortFunction(){

        return 'オブジェクト内の関数が省略ができます！';

    }
};
document.write(obj.shortFunction());

IE： 失敗…

この記述法があるだけで、functionを省略できて一気にコードを減らすことができるのですが、やはりIE11ではうまく動きませんでした。「SCRIPT1003: ‘:’ がありません」と言われてしまいます。

edge： 成功！

引数を一気に指定してみる

var setScores = function(first, second, ...rest) {

    document.write(rest.join(',')); // 92,32,89,95,40

};
setScores(80, 57, 92, 32, 89, 95, 40);

IE： 失敗…

可変的に変数の指定ができるので、多くの状況に対応しやすいのですが、IE11では引数を全て書き込んでundefinedをチェックするしかないようです。

edge： 成功！

for〜of でループしてみる

for(var os of ['Windows', 'Mac', 'Linux']) {

    document.write(os);

}

IE： 失敗…

ループで中身だけを取得できるようになるfor〜ofもとても便利な機能ですが、IEでは「SCRIPT1004: ‘:’ がありません。」というエラーが発生して使うことができません。

edge： 成功！

テンプレート記法で文字列をつくってみる

var name = '山田太郎';
var age = '20歳';
var template = `テンプレートが有効です。${name}さんは、${age}です。`;
document.write(template);

IE： 失敗…

テンプレート記法は、Vueコンポーネント内でも使えるととても便利なのですが、IEでは「SCRIPT1014: 文字が正しくありません。」というエラーが発生します。

edge： 成功！

複数の変数を一気に代入してみる

var [firstName, lastName] = ['山田', '太郎'];
document.write(firstName + lastName);

IE： 失敗…

Pythonのような変数の指定方法です。
実行できればよりすっきりしたコードを書くことができますが、IEでは「SCRIPT1010: 識別子がありません。」というエラーが発生します。

edge： 成功！

オブジェクトから変数に一気に代入してみる

var {rock, pop, jazz} = {
    rock: 'ロック',
    pop: 'ポップ',
    jazz: 'ジャズ'
};

IE： 失敗…

これも前項目と同じく実行できません。

edge： 成功！

【追記：2020.5.11】junerさんからご指摘があり、コードを変更しました。ご指摘ありがとうございます😊✨

クラス定義（Constructor, Setter, Getter）

class TestClass {

    constructor(name) {

        this.name = name;

    }

    get Name() {

        return this.name;

    }

    set Name(name) {

        this.name = name;

    }

}

let testClass = new TestClass('鈴木');
testClass.Name = '佐藤';
document.write(testClass.name); // 佐藤

IE： 失敗…

クラス構文が使えるようにあると、何かひとつの機能をカプセル化しやすくなるので、コードの使い回しがしやすくなりますが、IEでは「SCRIPT1002: 構文エラーです。」とエラーになります。

edge： 成功！

Promise

var promise = new Promise((resolve, reject) => {

    // 非同期処理

    // 成功した時実行する
    resolve('非同期処理、成功です！');

    // 失敗した時実行する
    reject('残念、失敗です...');

});

promise
    .then(function(result){

        document.write(result);

    })
    .catch(function(result){

        document.write(result);

    });

IE： 失敗…

非同期の機能を開発する場合にはPromiseがとても便利ですが、これも実行できませんでした。ただ、Ajax通信をする場合でしたら、axiosなどのライブラリを使えば比較的楽に実装ができるでしょう。

edge： 成功！（ただし、このコードではずっとロード中のままでした）

配列へ挿入

var partialWeekNames = ['火',  '水',  '木'];
var fullWeekNames = ['日', '月', ...partialWeekNames,  '金',  '土'];
document.write(fullWeekNames.join(','));

IE： 失敗…

個人的にあまりこの書き方をしたことはないのですがエラーが発生。ただ、使えると便利な方法かもしれません。

edge： 成功！

Map型

var map = new Map();
map.set('eyes', '目');
map.set('nose', '鼻');
map.set('mouth', '口');
document.write(map.get('eyes') + map.get('nose') + map.get('mouth'));

IE： 失敗…

【追記：2020.5.17】こちらも junerさんからのご指摘で変更しました。さらに、このコードはjunerさんに書いていただいたものになります。
ありがとうございました😊✨

edge： 成功！

おどろきました。edgeはともかく、IEでもMapが実行できるんですね。
IEでは実行できません。

Set型

var familyNames = new Set(['鈴木', '佐藤', '山田']);
document.write(familyNames.size); // 3

if(familyNames.has('佐藤')) {

    document.write('佐藤さんが入っています！');

}

IE: 失敗…

エラーは表示されませんでしたが、sizeが3となるところが0になるなど、実行ができませんでした。むしろエラーが出た方がいいかもしれません。

edge： 成功！

配列で条件をクリアする最初のデータを取得

var scores = [80, 57, 92, 32, 89, 95, 40];
var result = scores.find(function(value, index, array){

    return (value > 90);

});
document.write('一番最初に90点を超えた点数は「'+ result +'点」です。'); // 92

IE: 失敗…

ネイティブでこういった記述ができるととても便利ですが、まだIEでは未対応で「SCRIPT438: オブジェクトは `find` プロパティまたはメソッドをサポートしていません。」となります。

edge: 成功！

ダウンロード

今回の検証で使ったJavaScriptコードをダウンロードできます。HTMLファイルだけなので展開してすぐ確認できますよ！

IE11で使えない最新JavaScritコード（ES6）
開発のご依頼お待ちしております
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

結果として、IEで実行ができたのは以下の３つだけという結果になりました。

  • let
  • const
  • Map

そして、逆にedgeでは全ての実行が成功しました。（もちろんchromeでも全てOKです）

そのため、JavaScript未対応の件は、マイクロソフトの怠慢というよりは、ユーザーが頑なにIEに固執しているという側面もあるのかなという印象を受けました。

ぜひ今後IEのシェアが減って、edgeの方への移行が進むことを願っています！

ではでは。

このエントリーをはてなブックマークに追加       follow us in feedly  

合わせて読みたい