IE対応はそんなに大変じゃなさそう2020
幸いにも私のエンジニア人生ではこれまでIE対応を考えながらコードを書いたことがなかった。
しかし、新しい就職先ではIE対応は当たり前のように行われているという情報を耳にした。
IE対応を考えるとなると、CSSとJavaScriptになるわけだが、CSSではAutoprefixer、JavaScriptではpolyfilというブラウザ間の互換を保つ機能が存在する。
全体重をかけてこういう技術に乗っかる気満々であるが、polyfilの導入方法に加え、IE対応で困った時に参照しそうな情報くらいはまとめておこうと思う。
IEのシェアを確認
IE(11)非対応のJSメソッドたち
ありがたいことに先駆者達が記事にまとめてくれている。
IE非対応のJavascriptをまとめてみた
注意!IE11で使えない最新JavaScritコード(ES6) – console dot log
IE11 で使用できる・できない JavaScript の機能 | knooto
参照先に情報はまとまっているので、ここにはメソッド名を列挙するだけにとどめて置く。
- promise
- fetch
- arrow
- ParentNode, ChildNodeのメソッド
- intersection observer
- class
- find
- for-of
- include
- スプレッド構文
- テンプレートリテラル
- 関数の引数にデフォルト値を設定する
- 配列に対して複数の変数を一気に代入
- オブジェクトから変数に一気に代入
- Map(※配列のメソッドではない)
- Set
Vueでpolyfil
Vue CLIでプロジェクトを作成すれば@vue/babel-preset-appが対応している。
しかし散見する記事ではbabel-polyfillを使っているものも見受けられる。
設定方法は同じようだが設定がうまくいかなくて困ることがあればここら辺を参照しようと思う。
Browser Compatibility | Vue CLI
babel-polyfilはreactでもつかえるがreact-app-polyfilを使うのを結果としては同じであろうしstack overflowではreact-app-polyfillが推奨されている。
まぁここら辺は結果同じ1つのモジュールを使うにたどり着いていくのであろうが、深掘るつもりはない。
プロジェクトの作成時はコマンドラインを使うことを硬く心に誓うのみである。
とにかくpolyfil
CDNで機能ごとにpolyfilを入れる方法もある。
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.3.1/es6-promise.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.min.js"></script>
個人的にはCDNを使うべきポイントがわかっていないので存在するということだけ頭の片隅においておく。
最後に
実際にやったことがないから言えるということは100も承知なのだが、ここ数年でIE対応にかかる負荷が格段に少なくなってきたように感じる。(だからこそフロントエンドエンジニアに振り切ることに踏ん切りがついた)
Reactは2013年、Vueは翌年の2014年、さらに翌年の2015年にES6が使われるようになり、2020年の現時点では彼らが公の場に誕生して5年以上経っているわけでいよいよ成熟してきている。
かつてのようにフロントエンドエンジニアは細かいTipsを覚えている職人である必要はなくなってきたのが大変悦しく、デザイン設計の勉強をしてよりユーザーのために考える時間を創出できる、そんな仕事ぶりのフロントエンドエンジニアに私はなりたい。