2022年6月16日にIE11の死後に利用可能なJavaScript

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だけこれのせいでエラーになるという悲劇を回避できる。

includes() | MDN

アロー関数式

おそらくIE11でも使用できると勘違して使われている関数式第1位

補足すると以下のように => が入っているのがアロー関数式。

const add = (a, b) => a + b
console.log(add(1, 2))

アロー関数式 | MDN

スプレッド構文

現在は当たり前のように使用されているスプレッド構文もIE11では使えない。

スプレッド構文 | MDN

Set

スプレッド構文が使えないならSetも使えないだろう。

そんなふうに考えて時期が俺にもありました。

しかしSetは一部の機能以外は使える。

ただしnew Set, add, entries, valuesなどは使えないので事故に遭遇しやすい。

Set | MDN

テンプレートリテラル

組み込み式を扱うことができる文字列リテラル。

例えば変数fooを以下のように文字列と組み合わて扱うことができる。

const foo = 'Hello'
console.log(`${foo} world!`)
// => Hello world!

テンプレートリテラル | MDN

trimStart()とtrimEnd()

IE11はtrim()は使用できるのにtrimStart()trimEnd()は使用できない。

知らないとtrim()がIE11で使えるならtrimStart()も使えると勘違いしてしまうだろう。

replaceAll()

.replace(/foo/g, 'bar')ではなくreplaceAll('foo', 'bar')ですべて置換できるようになる。

replaceAll() | MDN

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を使用して動作させていることが多い。

https://www.promisejs.org/

fetch

fetchもIE11は使用できない。

fetchもPolyFillがあるがaxiosが使用されているケースも多い。