【Vue.js】IE11でうまく表示されない（真っ白）原因と解決策

IE11でVue.jsを使う時の注意点

• 関数定義は厳密に
• アロー関数は使うな
• バッククォート禁止
• 設定項目は省略禁止 New
• それでも動かない場合 New

それぞれコード付きで解説します。

①：関数定義は厳密に

関数定義する時は厳密に書きましょう、functionを省略した形だとエラーが出ます。

IEだと動かないコード

methods: {
  cal() {

    var fruits = [
      { name: "バナナ", price: 100 },
      { name: "りんご", price: 200 },
      { name: "メロン", price: 1500 }
    ];

    fruits.forEach(item => {
      this.total += item.price;
    });

  }
}

SCRIPT1003: ':' がありません。

IEでも動くコード

methods: {
  cal: function() {

    var fruits = [
      { name: "バナナ", price: 100 },
      { name: "りんご", price: 200 },
      { name: "メロン", price: 1500 }
    ];

    fruits.forEach(item => {
      this.total += item.price;
    });

  }
}

②：アロー関数は使うな

ES6の代名詞とも言えるアロー関数、残念なことにIEでは動作しません、構文エラーやぞ！と怒られてしまいます。functionを使ってあげるとIEでも動作するようになります。

IEだと動かないコード

methods: {
  cal: function() {

    var fruits = [
      { name: "バナナ", price: 100 },
      { name: "りんご", price: 200 },
      { name: "メロン", price: 1500 }
    ];

    fruits.forEach(item => {
      this.total += item.price;
    });

  }
}

SCRIPT1002: 構文エラーです。

IEでも動くコード（※）

methods: {
  cal: function() {

    var fruits = [
      { name: "バナナ", price: 100 },
      { name: "りんご", price: 200 },
      { name: "メロン", price: 1500 }
    ];

    fruits.forEach(function(item) {
      this.total += item.price;
    });

  }
}

※アロー関数以外だとスコープが変わる

アロー関数を使わないパターンだとforEach内のスコープが変わってしまうので注意、変数にアクセスする際にthisを使用している場合は、ループ外で変数に格納して使用する必要があります（以下例）

const app = new Vue({
  el: "#app",
  data: {
    total: 0
  },
  methods: {
    cal: function() {

      var _this = this;

      var fruits = [
        { name: "バナナ", price: 100 },
        { name: "りんご", price: 200 },
        { name: "メロン", price: 1500 }
      ];

      fruits.forEach(function(item) {
        _this.total += item.price;
      });

    }
  },
})

③：バッククォート禁止

Vue.jsでtemplateを記述する際はバッククォート「`」を用いる事がほとんどですがこれもIEでは使えません、シングルクォート「'」で代用すると解決しますが、少々ダサイ記述形式になるのでモヤっとしますね。

IEだと動かないコード

const app = new Vue({
  el: "#app",
  template: `
  <ul>
    <li>アイテム</li>
    <li>アイテム</li>
  </ul>
  `
})

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

IEでも動くコード

const app = new Vue({
  el: "#app",
  template:
  '<ul>' +
    '<li>アイテム</li>' +
    '<li>アイテム</li>' +
  '</ul>'
})

④：設定項目は省略禁止 New

設定項目を省略形で記述するとIEでは動作しません、下記はVueRouterを使ってルーティングを設定しているわけですが、このままだとIEでは動作しません。ほんとゴミカスですね。

IEだと動かないコード

const router = new VueRouter({
    routes: [
        { path: '/', component: httpVueLoader('./page1.vue') },
        { path: '/page2', component: httpVueLoader('./page2.vue') },
    ]
})

const app = new Vue({
    el: "#app",
    router,
});

SCRIPT1003: ':' がありません。

IEでも動くコード

...

const app = new Vue({
    el: "#app",
    router: router,
});

⑤：それでも動かない場合【polyfill・babel】 New

それでも動作しないという事であれば、下記スクリプトをhead内にコピペして読み込ませてください。polyfill（ポリフィル）とbabel（バベル）を簡単に説明すると新しいコードを古いコードに変換してくれる便利なやつです。

<!-- IE対応 -->
<script src="https://cdn.jsdelivr.net/npm/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@latest/babel.min.js"></script>

まとめ：IE対応の是非を問う

いかがだったでしょうか、「Vue.js × IE11」でよく出るエラーは今回紹介した３つがほとんどで、どれも簡単に対処できる内容なので初心者の方でも問題なく対応できるものかと思います。

とはいえ、今のご時世IEを意識してコードを書くのは時代遅れな気もします、一昔前ならIEユーザーもかなりいたので対応する意味はあったかもしれませんが、ここ最近は減少傾向で利用者の割合も１割をきっているみたいですし。

MicrosoftもIEからEdgeに乗り換えろ！って言ってるくらいですから、作るものよってはIEは無視していいのかもしれませんね、クライアントにIE対応よろしく！って言われたら別途費用を頂くという形でいいんじゃないですかね(￣▽￣;)

他の人が読んでいる記事