目次
2022年6月16日にIE11死亡 ⚰️
2022年6月16日(日本時間)にIE11が死亡する。
Microsoft社 Internet Explorerのサポート終了について (IPA)
IE11がWebサイトの対象ブラウザからはずれるとCSSとJavaScriptでコンパイルなしでそのまま利用できるものが多くなる。
CSSだと最近はSCSSとautoprefixerを使用するのが当たり前になっているが、JavaScriptに関してはCSSと比べると、いまだにコンパイルなしでそのままjsファイルに記述しているWebサイトが多いのでより注意が必要です。
IE11死亡後に使用できるようになるJavaScriptの主なメソッドなどは以下の通り。
includes()
おそらくIE11でも使用できると勘違して使われているメソッド第1位。
IE11が死ねばIE11だけこれのせいでエラーになるという悲劇を回避できる。
アロー関数式
おそらくIE11でも使用できると勘違して使われている関数式第1位。
補足すると以下のように => が入っているのがアロー関数式。
const add = (a, b) => a + b
console.log(add(1, 2))
スプレッド構文
現在は当たり前のように使用されているスプレッド構文もIE11では使えない。
Set
スプレッド構文が使えないならSetも使えないだろう。
そんなふうに考えて時期が俺にもありました。
しかしSetは一部の機能以外は使える。
ただしnew Set, add, entries, valuesなどは使えないので事故に遭遇しやすい。
テンプレートリテラル
組み込み式を扱うことができる文字列リテラル。
例えば変数fooを以下のように文字列と組み合わて扱うことができる。
const foo = 'Hello'
console.log(`${foo} world!`)
// => Hello world!
trimStart()とtrimEnd()
IE11はtrim()は使用できるのにtrimStart()とtrimEnd()は使用できない。
知らないとtrim()がIE11で使えるならtrimStart()も使えると勘違いしてしまうだろう。
replaceAll()
.replace(/foo/g, 'bar')ではなくreplaceAll('foo', 'bar')ですべて置換できるようになる。
before()とafter()
機能は違うがbefore()とafter()はjQueryにもあるので注意が必要。
jQueryを読み込んでいるWebページから読み込んでいないWebページでbefore()とafter()を使用するとIE11ではエラーになってしまう。
document.body.before('foo')
document.body.after('bar')
Class
クラス宣言は使用不可。
querySelectorAll + forEach
あまり知られていないがIE11はquerySelectorAllで取得した要素をforEachで順次処理できない。
const nodeList = document.querySelectorAll('h2')
nodeList.forEach(v => console.log(v.textContent))
for...of
for...in はIE11で使用できるが、for...ofはIE11で使用不可。
IntersectionObserver
特定の要素がスクロールした際に表示領域に現れたときに何かしらの処理をする際によく使用できるがiE11では使用不可。
これが使用できないと不便なのでIE11ではPolyFillを使用して動作させていることが多い。
超処理が軽いJavaScriptスクロール判定のCSSアニメーション作成方法
Promise
こちらもIE11は使用できないためPolyFillを使用して動作させていることが多い。
fetch
fetchもIE11は使用できない。
fetchもPolyFillがあるがaxiosが使用されているケースも多い。