IE対応とその心掛けについて

西村 志穂のプロフィール画像
エンジニア 西村 志穂

1,998 view

ある案件で、IE11ではVue.jsを用いているようなモジュールが表示されなくなる、動かないなどの崩れがでてしまった。
絞り込み機能の部分と、表の箇所だった。
Vue.jsは先輩エンジニアの方が実装したところで、原因もすぐにはわからず焦ったが、アドバイスいただき、無事解決に至ったので、今回の原因と解決方、学んだところを備忘録として書いておこうと思う。

①IEでソート機能が動かなかった

いわゆる絞り込み機能が、IEでは動作しなかった。

原因:IEではJSのincludesメソッドが使えない
解決方法:IEで使えるようにPolyfillを実装した

includesメソッドを使用していたのだが、IE11ではサポートがされていないことが原因だった。
IE対応用のPolyfillを公開しているページを参考に、該当箇所に記述を追加した。
自分ではincludesをやめて、IEも対応している他の記述に書き換えようとしたのだが、それではあまりにも効率が悪いため、「すでに書いている記述を活かしたまま動かす方法を考えた方がいい」とアドバイスいただき、勉強になった。

②jsonデータをVue.jsで取得して表示した表の部分が、IEでは表示されなかった

(ページのURLを取得し、カレントクラスを付与するしないを分岐している箇所だった)

原因:IEではtemplateタグが使えない
→このようになっていた記述を(pug)

tbody(v-if="(hoge.length > 0)")
    template(v-for="(item, index) in hoge")
     tr(v-if="hoge.currentPath === item.href").-current
   (略)
   tr(v-else)
       th

このように修正
tbody(v-if="(hoge.length > 0)")
    tr(v-for="(item, index) in hoge " v-bind:class="{ '-current' : hoge.currentPath === item.href }")
     th(v-if="hoge.currentPath === item.href") {{item.title}}
   th(v-else)

①も②もVue.jsが原因だと思い込んでいたが、丁寧に原因を探ると、HTMLのtemplateタグがIEでは使えないという問題だった。
templateを削除し、v-forとv-bindをひとつの場所で記述することで対応した。

何が原因なのかの判断も難しく、「これが原因だと思う」「このやり方しかないと思う」と思い込んでしまったりするが、それ以前の、単純なところに原因があったり、より効率を重視した違う考え方があったりする。

不要な思い込みで、遠回りを防ぐためにも、情報収集をしていろんな可能性を知識として持っていたり、必要な情報を得るために、検索慣れしておくことが大切だと改めて感じた。
また、丁寧に教えてくださる先輩エンジニアの方々に感謝です。

関連する日報

    潜在能力を引き出す壁打ちのコツ

    44 view

    野上 恵里のプロフィール画像
    野上 恵里 コンサルタント
    話し方の「良い例」「悪い例」

    2,597 view

    新屋敷 章寛のプロフィール画像
    新屋敷 章寛 デザイナー
    採用活動はフェアでありたい

    1,194 view

    今西 毅寿のプロフィール画像
    今西 毅寿 執行役員 / コンサルタント
    フィードバックは人のためならず

    463 view

    西岡 紀子のプロフィール画像
    西岡 紀子 ライター
    ウェブディレクターの役割について考えてみた

    762 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
上に戻る