IE11で使えないJavaScriptの記法
背景
何も気にせず 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 についてのまとめ記事は探すとたくさん出てくるので、困った際はエラー文でググると、すぐに原因が見つけられると思います。