JavaScriptをIE11対応させるためにしたことまとめ

急にIE11対応を頼まれた

JavaScript初心者の私が、IE11対応を頼まれて苦戦した箇所をまとめます。
修正前と修正後のコードを載せたので、参考になれば嬉しいです。

アロー関数

該当のコード

$button.click((event) => {
    alert('ボタンを押しました');
});

// => SCRIPT1002: 構文エラーです。

修正後のコード

$button.click(function(event) {
    console.log('ボタンを押しました');

// => ボタンを押しました
});

テンプレートリテラル

バッククォートで囲んだ文字列の中で変数展開させるやつ

該当のコード

const age = 20
console.log(`私の年齢は${age}です。`);

// => SCRIPT1014: 文字が正しくありません。

修正後のコード

const age = 20;
console.log('私の年齢は' + age + 'です。');

// => 私の年齢は20です。

isNaN

引数が非数かどうか評価するメソッドらしい

該当のコード

const int = 1000;
console.log(Number.isNaN(int));

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

修正後のコード

const int = 1000;
console.log(isNaN(int));

// => false

.find()

該当のコード

const fruits = ['Apple', 'Orange', 'Banana']
if(fruits.find(function (fruit) {return fruit === 'Grape'})) {
  console.log('りんごだよ！');
}else {
  console.log('りんごじゃないよ！');
}

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

修正後のコード

function sample(arg) {
    const fruits = ['Apple', 'Orange', 'Banana']
    if(fruits.filter(function (fruit) {return fruit === arg})[0]) {
      console.log('くだものだよ！');
    }else {
      console.log('くだものじゃないよ！');
    }
}

sample('Banana')
sample('Tomato')

// => くだものだよ！
// => くだものじゃないよ！

2020/11/12追記

indexOfの方がわかりやすく書ける

function sample(arg) {
    const fruits = ['Apple', 'Orange', 'Banana']
    if(fruits.indexOf(arg) !== -1) {
      console.log('くだものだよ！');
    }else {
      console.log('くだものじゃないよ！');
    }
}

sample('Banana')
sample('Tomato')

// => くだものだよ！
// => くだものじゃないよ！

@il9437さんご指摘ありがとうございますm(_ _)m

バージョン情報

IE: 11.418.18362.0

「もっとこうした方がいいよ！」とか「こういう書き方もあるよ！」とか、アドバイスがあればコメントしてくださいm(_ _)m