IE君はつらい

受託やったりSESやったりしてる小さな企業で働いてます。
最近フロントエンドの仕事もやるようになって、Vue.jsをやるようになりました。JavaScript、つらい。苦手です。

なかでもIE対応はつらいです。ですが覚えてしまえば回避できます。
いっぱいコードを書いたあとで、どうして動かないんだといちいちコメントつけてデバッグするととてもつらい思いをすることになるので、その予防策としていくつか共有いたします。

デフォルト引数について

function characterRoll(hasQBee = null){
  if (hasQBee){
    return new MahoShojo();
  }
}

デフォルト引数は使えないので、こんな感じで書かないといけません

function characterRoll(hasQBee){
  if (hasQBee === void 0) hasQBee = null;
  if (hasQBee){
    return new MahoShojo();
  }
}

アロー関数で死ぬ

function getMahoShojoById(id){
  const mahoShojos = [
    {id:'1', name:'まどか'},
    {id:'2', name:'ほむら'},
    {id:'3', name:'さやか'}
  ];
  const mahoShojo = mahoShojos.filter(shojo => shojo.id === 1);
  return mahoShojo;
}

アロー関数式は当たり前ですが使えません。
以下のように書きましょう。

function getMahoShojoById(id){
  const mahoShojos = [
    {id:'1', name:'まどか'},
    {id:'2', name:'ほむら'},
    {id:'3', name:'さやか'}
  ];
  const mahoShojo = arr.filter(function(shojo ){
    return (shojo.id === 1);
  });
  return mahoShojo;
}

式展開でも死ぬ

function alertMahoShojos(){
  const mahoShojos = ['まどか','ほむら','さやか'];
  var msg = mahoShojos.join(',');
  alert(`${msg}は魔法少女`);
}

素直に文字列結合しましょう

function alertMahoShojos(){
  const mahoShojos = ['まどか','ほむら','さやか'];
  var msg = mahoShojos.join(',');
  alert(msg + 'は魔法少女');
}

〆

Babelを導入しましょう、さもなくばコード書いた後でつらい思いをしないように、IE11にも対応している書き方を心がけましょう。Chromeを使って開発するだけじゃなくて、IEもちゃんと動くか確かめること（いわゆるクロスブラウザチェック）を習慣づけたほうがいいのかもしれません。自戒をこめて。