Vue.jsや素のJavaScriptコードのIE対応

アナリティクスのデータを解析していたら意外とIEからのアクセスが多く、割合としては全体の1割程度あり、これまでVue.jsを使用しているページについてはIEを完全に無視して作っていましたが、さすがにまったく動作しないのも問題だったので、この際、IEに対応することにしました。

対応するサイトのアクセスで各ブラウザの割合は以下の通りとなっています。

せめてEdgeを使ってくれていたらわざわざ対応する必要がなかったのですが、意外とEdgeよりもIEの方が多いです。

サイトの特性もあるのですが、これだけのアクセスがあるのであれば、IEに対応しておいた方がよさそうです。

以下、修正したコードの内容になります。

IEではKey/Valueを省略した以下のような記述はNGです。

const routes = [
    { path: '/list' },
    { path: '/list/:cid/:tid' },
];

const router = new VueRouter({
    mode: 'history',
    routes
});

実行するとコンソールに「':' がありません」と出力されて処理が中断します。

修正方法は以下のようにKey/Valueをどちらも記述します。

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

IEではfunctionの省略もNGです。

const router = new VueRouter({
    mode: 'history',
    routes: routes,
    scrollBehavior(to, from, savedPosition) {
        return savedPosition
    }
});

実行するとKey/Valueを省略した時と同じで、コンソールに「':' がありません」と出力されて処理が中断します。

修正後のコードは以下の通り。

const router = new VueRouter({
    mode: 'history',
    routes: routes,
    scrollBehavior: function(to, from, savedPosition) {
        return savedPosition
    }
});

forEach()などで使うアロー関数（=>）も使えません。

products.forEach(x => {
  console.log(x);
});

アロー関数の場合、「構文エラーです」というエラーが出力されます。

修正後のコードは以下の通り。

products.forEach(function(x) {
  console.log(x);
});

個人的に一番面倒だったのはテンプレートリテラル（バッククォート）が使えないことでした。

var title = 'サンプル';
var html = `
    <div class="content">
        <span>${title}</span>
    </div>
`;

上記のコードを実行すると、「文字が正しくありません」というエラーが出力されます。

修正後のコードは以下の通り。

var title = 'サンプル';
var html = 
    '<div class="content">' +
    '    <span>' + title + '</span>' +
    '</div>';

IEっていつになったら完全に消滅してくれるんでしょうか...

• 注意！IE11で使えない最新JavaScritコード（ES6） – console dot log