【JavaScript】IEでアロー関数が効かなくて悲しくなった

カレー

JavaScriptのES6で導入されたアロー関数は便利でやみつきになります
でもIE11では「SCRIPT1002: 構文エラーです。」
という冷たいコンソールエラーとともに動かない現実・・・。

動かなかったアロー関数

例えばこんなソースだと「そんな構文知らないよ」とエラーがはかれる

// fruits(連想配列)の中から'Orange'に一致するものを見つけたい
const targetFruit = fruits.find(fruit => fruit.name === 'Orange')

// fruits(連想配列)を'A'でフィルタリングしたい
const filteredFruits = fruits.filter(fruit => {
  return new RegExp('A').test(fruit.name);
})

IEでも動くように書き換えるならこんな感じ

const targetFruit = fruits.find(function (fruit) {
  return fruit.name === 'Orange'
})

const filteredFruits = fruits.filter(function (fruit) {
  return new RegExp('A').test(fruit.name);
})

IEでも動くように変換してくれる便利なサイト見つけた

https://babeljs.io/repl/

  • 上記サイトにアクセス
  • サイドバーの「TARGETS」をdefaultsだけにする
  • 左側にエラーが出ているソースを貼り付ける
  • IE対応したソースを出力してくれる

便利〜