IE11だとNodeListがforEachで回らない問題

はじめに

IEの配布元であるマイクロソフトを始め、 IEが1日も早く滅んでほしい、なぜIE拡散禁止条約がないのか、早くWTOで世界IE禁止宣言を採択してほしい と世界中のweb系エンジニアは強く祈っていることだとは思いますが、様々な事情をお持ちの顧客のために日夜IE対応に心を砕いていることと存じ上げます。
それでもIEの最終バージョンであるIE11はまだマシな方なんだとは思いますが、あらゆるpolyfillをブチ込んでbabelをまわさないとイマドキ文法で書かれたJSは動きません。今宵もそんなフロントエンドエンジニアたちの天を貫く喜び、悲しみ、怒りを抱え、欲望の果へ向かいbabelが唸りをあげます。

BUCK-TICKの宗教ソング「BABEL」の歌詞が、babel使いの気持ちを余すところなく表現してて最高なので、ぜひご一読ください。
http://j-lyric.net/artist/a0006e7/l0438a2.html

NodeListにforEachメソッドが居ない（ただしIEに限る）

ある時「IEでJSが死んでるぞ」と庭でマンボウが死んでるくらいのテンションで報告を受けました。
しゃーないな、と思ってテスト用のVMを立ち上げて見てみたら見事に死んでいたのですが、どうやら「NodeListにforEachなんてメソッドないで」というやつでした。
マジで？と思ったらマジでした。

https://developer.mozilla.org/ja/docs/Web/API/NodeList/forEach

孔明先生もショックです。

NodeListって何？

document.querySelectorAll() の戻り値として返ってくるDOMノードの集合体です。
https://developer.mozilla.org/ja/docs/Web/API/NodeList

Arrayで返ってきてもいいんじゃないのか？とは多少思いますが、ActionScriptで言うところのArrayListっぽい作りになっています。なので、Arrayに変換自体は可能です。

jQueryでclassで引っ掛けると配列ではなくてjQueryオブジェクトで返ってきて、そいつに each() しないと走査できないのと感覚は同じです。

解決策

まあ、さっきのページにpolyfillが書いてあるので、それをそのまま入れてもいいのですが、なんか癪なのでnpmにpolyfill居るんじゃね？と思って探したらいました。

なのでこいつをnpmで入れてimportすれば万事解決です。

コマンドライン

$ npm install nodelist-foreach-polyfill --save-dev

import 'nodelist-foreach-polyfill'

class Hoge{
    static init() {
        const hogelist = document.querySelectorAll('.hoge');
        hogelist.forEach( e => e.classlist.add('fuga') );
    }
}

Hoge.init();