「Chromeでは動くけど、IEでは動かない」の原因が「'」と「`」を間違えていたことだった話


AngularJSを使用してアプリを作っています。
今日はそのときに少しはまった話です。

何が起きたか

AngularJSのFilterを自作しました。
Chromeでは動くけども、IEで動かすと、「Unknow provider」のエラーが。。。

そもそもChromeで動いているし、何でだ?
と思い、Unknow providerを調べていました。

原因

IEのコンソールをよーく見ると、「文字が正しくありません。」というエラーが!
filter定義しているファイルは単独のファイルにしていました。ファイル読み込み時に表示されていて見逃していました。。。
確認すると、filter定義のところで「'」(シングルクォート)が「`」(バッククォート)になっていました。

正解.js
 ・・・
1 angular.module('myApp', [])
2  .filter('myFilter', [function () {  //ここ!
3    return function () {
4      ・・・ 
5    };
6  }]);

上記は正解です。
L2のmyFilterの定義のところが以下のように、``になっていました。

正解.js
 ・・・
1 angular.module('myApp', [])
2  .filter(`myFilter`, [function () {  //ここ!
3    return function () {
4      ・・・ 
5    };
6  }]);

これが原因でIEでは動いていませんでした。
これはfilter定義のみの話だけではなく、他でも同じようなことが起こりそうです(試したわけではないです)。

静的検証(ESLint等)使って確かめるなどをもっとくせづけていこうと思います。