2020 October 24th, Saturday

IE11で使えないJavaScriptの記法

JavaScriptIE

背景

何も気にせず JavaScript を書いていたら IE で正しく動作しないものにいくつか当たったので、エラー内容とその修正方法を記録します。

メソッド記法

エラー内容

SCRIPT1002: 構文エラーです。

原因

const question = {
  getAnswer() {
    console.log("回答だよ");
  }
};

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions

メソッド定義の短い構文は IE では使えない。

解決方法

const question = {
  getAnswer: function() {
    console.log("回答だよ");
  }
};

functionを省略しない。

テンプレート文字列

エラー内容

SCRIOPT1014: 文字が正しくありません。

原因

const massage = `メッセージは${text}です。`;

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals

バッククォートを使用した記法は IE ではできない。

解決方法

const message = "メッセージは" + text + "です。";

for...of

エラー内容

SCRIPT1004: ‘:’ がありません。

原因

for (let answer of Answers) {
  console.log(answer);
}

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of

for...of を使った配列のループは IE ではできない。

解決方法

for (let i = 0; i < Answers.length; i++) {
  const answer = Answers[i];
  console.log(answer);
}

アロー関数

エラー内容

SCRIPT1002: 構文エラーです。

原因

element.addEventListener('click', () => {
  console.log('クリックされたよ');
};

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

アロー関数での function の省略はできない。

解決方法

element.addEventListener('click', function() {
  console.log('クリックされたよ');
};

NodeList に対する forEach

エラー内容

SCRIPT438: オブジェクトは 'forEach' プロパティまたはメソッドをサポートしていません。

原因

element = document.querySelectorAll('.test');
element.forEach(function (item) {
  console.log(item);
};

https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

querySelectorAll()メソッドはNodeListを返す。

https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach

IE では NodeList に対する forEach はサポートしていないのでエラーになる。

解決方法

elementNodeList = document.querySelectorAll('.test');
// Arrayに変換している
element = Array.prototype.slice.call(elementNodeList, 0);
element.forEach(function (item) {
  console.log(item);
};

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array に対する forEach は IE でも使用できる。ので Array に変換してから forEach を使用。

他にもいくつかの解決方法があるらしい。

まとめ

解決方法は一例です。 正しく動かない記法はまだまだあると思いますが、自分が使用した段階で追加します。 IE で正しく動かない JavaScript についてのまとめ記事は探すとたくさん出てくるので、困った際はエラー文でググると、すぐに原因が見つけられると思います。

参考記事