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

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

2,048 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をひとつの場所で記述することで対応した。

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

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

関連する日報

    社員がチャレンジしやすい環境はなぜ生まれる?

    1,569 view

    西岡 紀子のプロフィール画像
    西岡 紀子 ライター
    「わかりやすい」ミーティングの3原則

    7,057 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    「この案件は特殊だった」は言い訳でしかない

    2,750 view

    野上 恵里のプロフィール画像
    野上 恵里 コンサルタント
    「答えにくい質問」をやめるコツ

    5,082 view

    川名子 紗依のプロフィール画像
    川名子 紗依 デザイナー
    名前が変われば会議が変わる

    6,541 view

    西岡 紀子のプロフィール画像
    西岡 紀子 ライター
上に戻る