ES6をIE11でも使えるようにしたい。。。

Question

WordPressを使ってサイトを構築していたのですが、下記記事を参考にスクロールアニメーションを導入しました。
https://liginc.co.jp/357845

しかし、IE11でのみ動作せずどういうことなのかとググっていたらどうやらES6で書かれたJavascriptはIE11では動作しないというところまでわかりました。

そこで、どうやったらES6をIE11でも使えるようにできるのかなと思い、皆様のお知恵を拝借したいと思っております。
下記JSのコードです。
これをIE11でも使えるようにしたいです。

class ScrollFade {
    constructor() {
        this.ANIMATION_CLASS = 'is-animation';

        let $section = document.querySelectorAll('.scroll-fade:not(.is-animation)');
        if($section.length === null) {
            return;
        }
        let controller = new ScrollMagic.Controller();
        for(let i = 0; i < $section.length; i++) {
            let scene = new ScrollMagic.Scene({
                triggerElement: $section[i],
                triggerHook: 'onEnter',
                reverse: false,
                offset: 300
            })
                .addTo(controller);
            scene.on('enter', ()=>{
                $section[i].classList.add(this.ANIMATION_CLASS);
            });
            scene.on('end', ()=>{
                scene.destroy(true);
            });
        }
    }
}

new ScrollFade();

Comments

[miyabi-sun]

ECMAScript6の事ですか？その場合略称は(EcmaScriptから取って)ES6になります。

[koh1990]

そうでした！ご指摘ありがとうございます！

[miyabi-sun]

ｂ

Answer 1

ECMAScriptのブラウザ対応表というものがあってですね。
まぁ見れば分かりますが、ES6はIE11ではほぼ全滅です。
letとconstのみはIE11でもいけるんですけどね。

さぁどうすればよいか？

ES5時代のJSってのもチューリング完全な訳で、その気になればES6と同じ事は出来るはずですよね。
ES5は構文が少ないので余計なおまじないが増えて煩わしいってだけの話で…
JSコンパイラが存在して、機械的に読み取って実行してくれるって事は、ES6をES5に変換するようなツールもあるのでは？
→あります。

Babel

これはES6準拠のコードを読み取ってES5相当にダウングレードしてくれるツールです。
普段のコードは最新のESで書いておいて、デプロイ直前でES5相当に変換するという使い方になります。

クラス構文やlet、constみたいなのを変換するのはBabel純正で可能ですが、
Array.prototype.findみたいにES6で追加されたメソッドなんかはポリフィルというので利用可能になります。

Qiita等のブログでサンプルコードや使い方はわかると思いますので、
まずは調べてあれこれ変換してみてください。

Comments

[koh1990]

ありがとうございますー！
ばっちり解決されましたー！