babelのie11変換について

Question

お世話になります。

本日職場のイーサネットのホームページで「タブメニュー」を作る必要があったのでHP作成のサイトを参考に作ったのですが、職場のブラウザはedgeとIE11の両方を使用しておりどちらにも対応させる必要がありました。

参考にしたサイトのJavaScriptのコードがこちらになります。

'use strict';

{
  const menuItems = document.querySelectorAll('.menu li a');
  const contents = document.querySelectorAll('.content');

  menuItems.forEach(clickedItem => {
    clickedItem.addEventListener('click', e => {
      e.preventDefault();

      menuItems.forEach(item => {
        item.classList.remove('active');
      });
      clickedItem.classList.add('active');

      contents.forEach(content => {
        content.classList.remove('active');
      });
      document.getElementById(clickedItem.dataset.id).classList.add('active');
    });
  });
}

edgeでは問題なく動きます。
しかしながらIE11のブラウザでは全く動かないため、よくよく詳しく調べるとIE11がforEachをサポートしていないことが分かりました。
「Can I use」でもしらべました。

じゃあbabelとやらにie11で使用できるコードに変換してもらおうと、初babelしてみました。
ところが、変換された結果が以下のようなコードになりました。
ie11対応のコードでもforEach使ってます。

'use strict';

{
  var menuItems = document.querySelectorAll('.menu li a');
  var contents = document.querySelectorAll('.content');
  menuItems.forEach(function (clickedItem) {
    clickedItem.addEventListener('click', function (e) {
      e.preventDefault();
      menuItems.forEach(function (item) {
        item.classList.remove('active');
      });
      clickedItem.classList.add('active');
      contents.forEach(function (content) {
        content.classList.remove('active');
      });
      document.getElementById(clickedItem.dataset.id).classList.add('active');
    });
  });
}

明日、職場でこのコードを試してみますが、動く気が全くしません。
babelもIE11がforEachが使用できないことが分かっているだろうになぜこのようなコードを出してきたのでしょうか。
理由があれば教えていただきたいのと、もしかしたら私のbabelの使用方法が間違っているのかも思い質問させていただきました。
どなたか分かる方ご教授いただけませんでしょうか。

私がbabelを使用したときの画面はこちらです。

よろしくお願いします。

Answer 1

forEachの互換はbabelではなくpolyfill(core-js)の範疇だからです。

Comments

[susumu-99]

回答ありがとうございます。

babelが下位互換だとすると、polyfillは上位互換というイメージでいいのでしょうか。
forEachの入ったコードを、forEachを使用せず書くこともできるのにbabelでは変換してくれないのですか？

質問を重ねてすいません。

[RiaFeed]

babelとpolyfillは役割が違います。
babelは新しい構文を古い構文で同等の動作をするように変換するもので、
polyfillは新しくなったライブラリやメソッドや関数等を古い環境でも動くように再定義して使えるようにするものです。
今回の質問のケースの場合、forEachはNodeListクラスのメソッドであり役割としてはpolyfillが対応するべきなのでbabelはノータッチなんです。というか結局はpolyfillで再定義した結果forEachが使えるようになるので変換する必要がないとも言えます。
とはいえこれは自分なりの解釈なので厳密な話はググったほうが確実です。

[susumu-99]

ありがとうございます。
インターネット環境でないとpolyfillが使用できないのが不便なところですね。
イーサーネットの環境で使用したかったので。

babelで元のコードからたとえばアロー関数を普通の関数に戻したり、constをvarに変えてたりするので、一般的にbabel＋polyfillが必要になるのかなと思いますが、その考えであっていますでしょうか。

[RiaFeed]

インターネット環境でないとpolyfillが使用できないってことはないんですが、
たいていwebpack使用前提なので煩雑かもしれませんね。

[susumu-99]

丁寧な回答ありがとうございました。
おかげで本日IE11でタブメニューを作成することができました。
RiaFeedさんとmaisumakunさんのおかげです。

両方ともベストアンサーにしたいのですが、システム上できないのでより早く回答をいただいたRiaFeedさんをベストアンサーにさせていただきました。
またよろしくお願いします。

Answer 2

Babelはあくまで、文法レベルの変換を行うツールです。ライブラリ関数の不足には関与しません。

Comments

[maisumakun]

> babelもIE11がforEachが使用できないことが分かっているだろうに

そのような、「どのメソッドが使えるか」にまつわる判断は行いません。

[susumu-99]

回答ありがとうございます。
そうなんですか
ではbabelで変換しても必ずしも使えるコードに変換できるわけではないんですね。
ではES6をIE11に対応させるには、さきの人が回答していてくれていたようにbabelで変換したコードにpolyfillのCDNを使用するということが必要になることがあるというとうことでしょうか？

[maisumakun]

それか、コードを書く時点でIE11に配慮して書くか、です（ものによっては、「機能性を実現することが不可能」ということもありえます）。

[RiaFeed]

もう正直forEachだけの問題ならArrayのforEachならIEでも使えるから
NodeList.prototype.forEachにArray.prototype.forEachを代入したら

[susumu-99]

そういうものなんですね。
概略分かったように思います。
考えたらものすごく回りくどいことをする必要があるんですね。
（いったんES6をES5に落として、ES５にないものをpolyfillから補うという）
早くIEがなくなったらいいのに、と思ってしまいます。

ありがとうございました。

[maisumakun]

厳密にいえば、NodeList#forEachはDOMに属するメソッドで、ES5やES6と言った区分とは全く無関係です。

[susumu-99]

いつも分かりやすい回答ありがとうございます。

今回はRiaFeedさんの回答をベストアンサーにさせていただきました。
またよろしくお願いします。