macoblog

「ゲーム × プログラミング」で生きていく

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

JavaScript

WEBトマトWEBトマト

どうも、とまとです。久しぶりにVue.jsを触ったらIE11でエラー出まくりで、何も表示されないわ画面は真っ白だわで無駄な時間を取られてしまいました、って事でエラーの原因と対応について備忘録として残しておきますね。

目次【本記事の内容】 [ click ]

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

Vue.jsを使ってプログラムを書いたものの「IE」だと何も表示されず真っ白の画面、開発中は「chrome」でデバッグしていたが問題なく動作していた、「fireFox」や「Safari」でもエラーを吐く事なく正常に動作している、なぜIEだけ動かないんだ、、、
WEBトマトWEBトマト

まず先に言っておくとあなたは悪くない、何も悪くない。全てはIEという害悪ブラウザのせいだ、これを頭に入れてVue.jsでのIE対応時のポイントをおさらいする、以下の通りだ。

  • 関数定義は厳密に
  • アロー関数は使うな
  • バッククォート禁止
  • 設定項目は省略禁止 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」でよく出るエラーは今回紹介した3つがほとんどで、どれも簡単に対処できる内容なので初心者の方でも問題なく対応できるものかと思います。

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

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

人気記事無料体験が受けられるプログラミングスクール7社。現役エンジニアが厳選

人気記事【完全版】WEB制作に必要な9つのスキルと学び方。現場から解説