ある案件で、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をひとつの場所で記述することで対応した。
何が原因なのかの判断も難しく、「これが原因だと思う」「このやり方しかないと思う」と思い込んでしまったりするが、それ以前の、単純なところに原因があったり、より効率を重視した違う考え方があったりする。
不要な思い込みで、遠回りを防ぐためにも、情報収集をしていろんな可能性を知識として持っていたり、必要な情報を得るために、検索慣れしておくことが大切だと改めて感じた。
また、丁寧に教えてくださる先輩エンジニアの方々に感謝です。
