IEでアロー関数が使えなかった話

javascript

はじめまして。2020年新卒入社しました。S.Rです。
まだまだ勉強中の身ですが、私の記事が皆さんの
お役にたてれば幸いです。

今回は初学者の私が少しつまずいたトピックを取り上げます。

何が起きたか

タイトル通りではありますが、ブラウザInternet Explorer（以下IE）での動作テスト中にエラーが起こる。Google Chromeでの動作は問題が無い。。。
→調べると、クライアント側のJavaScriptにおいてアロー関数がIEでは使えないことが判明しました。

アロー関数とは

下記がES5以前の書き方です。（ESについては後述します。）

var normal = function arrow() {  
    return '一般的な関数';  
};

一方こちらがアロー関数です。
【 => 】・・・矢印（アロー）

var arrow = () => {  
    return 'アロー関数';  
};

同じ内容を少ない文字数で書くことができるだけでなく、その他にもメリットはありますがここでは割愛します。 詳細は下記を参照ください。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions

なぜ

なぜ同じプログラミング言語でもブラウザが異なることで一部の関数だけが使えなくなるのでしょうか。

理由は大きく２点
①JavaScriptにバージョンがある
②ブラウザ側がバージョンに対応する必要がある

JavaScriptにはES〇〇（数字または西暦）の名前でバージョンが複数存在します。
2015年以降は毎年新しいバージョンがリリースされています。

それに対し、IEは最新バージョンに対応していないため、
過去にリリースされたJavaScriptの機能には対応できても、
一部の新しい機能には対応できないという状況になっています。

IEではES5（2009年リリース）までが使用可能ですが、アロー関数はES6（2015年リリース）から実装された関数であるため、IEではアロー関数が使えないのです。

以下ES6の各ブラウザ対応表です。（IEは真っ赤ですね。。。）
http://kangax.github.io/compat-table/es6/

どうする?

私は今回アロー関数を使わない方針で、書き直しました。
書き直す際には以下のサイトが便利です。
https://babeljs.io/

おわりに

初学者の私にとってプログラミング言語が日々進化し、バージョン毎に違いがあることは新鮮な感覚でした。願わくば私自身も日々成長を続けられたらな、といったところです。

今年も押し迫り、体調管理には気を抜けない日々が続いておりますが、どうぞよいお年をお迎えください。