【Babel】を使ってES6をIE11に対応させる方法

Babelとは

BabelはJavascriptの新しいバージョン(ES6等)で書いたコードを、旧ブラウザ(IE11等)でも実行できる旧バージョンのJavascriptに変換することができます。

Babelを使うことで、新しいバージョンのJavascriptでコードを書いても、IE11に対応させることができます。今回はそんなBabelについてまとめました。

Babel公式サイト

Babelのサイトで実際にJavascriptの変換を試してみることができます。
以下からBabelのサイトにアクセスします。

Babel · The compiler for next generation JavaScript

Babelを試す

「Try it out」ページにいきます。
実際にコードを入力して変換することができます。

左メニューのPRESETS項目の、es2015にチェックが入っていることを確認しましょう。

試しにES2015から追加された「アロー関数」を使用したコードを入力してみます。

let testFunc = () => {
  alert("Hello World");
}

testFunc();

右側の窓を見てみると、以下のコードに自動的に変換されました。

"use strict";

var testFunc = function testFunc() {
  alert("Hello World");
};

testFunc();

コードを実行したい時は、Evaluateにチェックを入れましょう。

「アロー関数」はIE11ではエラーになりますが、Babelを使うことでIE11に対応したコードに変換できました。

ただ、毎回コードを変換する時にサイト上で変換するのは手間ですよね。
引き続きBabelの導入方法についてみていきます。

Babelの導入方法

今回は、ソースコードエディタ「Visual Studio Code」を使用してコーディング環境にBabelを導入してみたいと思います。

※ Babelを導入するには、Node.jsが必要になります。
Node.jsについてはまた別記事でまとめるようにします。

ベースファイルを作成する

babel_testというフォルダにindex.html,js/index.jsを作成しました。

package.jsonを作成する

Node.jsの準備ができたら、ターミナル画面を開き(command+2で開きます)以下のコマンドを実行します。

$ npm init

NAMEなど色々質問が出てきますが、一旦全てenterを押します。

これでbabelをインストールするためのpackage.jsonファイルができました。

Babelをインストールする

次に以下のコマンドを入力してBabelをインストールしていきます。

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env

package.jsonに以下が追加されました。

さらにbabel_testフォルダ内を見てみると、node_moduleとpackage-lock.jsonが追加されました。

Babelの設定ファイルを作成する

次に、babelの設定ファイルを作成します。
babelの設定は【babel.config.json】というファイルを作成して記述していきます。

今回はIE11用にbabelを使用するので以下のように記述しました。

{
    "presets": [
        [
            "@babel/env",
            {
                "targets": {
                    "ie": "11"
                }
            }
        ]
    ]
}

これでBabelの導入ができました。次に実際に使用してみます。

Babelを使ってみる

それでは、実際にJavascriptのコードをBabelを使用して変換(トランスパイル)してみます。

JSファイル変換は以下の状態を想定します。

src/index.jsにトランスパイル前のJSファイルを用意します。
js/index.jsがトランスパイル後のJSファイルになる予定です。

変換するファイルを用意する

src/index.jsに先ほどのアロー関数を使用したコードを記述します。

Babelで変換する

このファイルをBabelで変換するには、次のコマンドを実行します。

$ ./node_modules/.bin/babel src --out-dir js

ポイントは
「src」は変換前のJSが入ったフォルダ名
「js」は変換後のJSが入るフォルダ名
ということです。ここを変更すれば好きなフォルダ名にしていただけます。

コマンドが実行できたらjsフォルダに生成されたindex.jsを確認します。

しっかり変換できていますね！これでBabelが使用できることが確認できました。

npm scriptsを利用する

毎回「./node_modules/.bin/babel src –out-dir js」を入力するのは手間ですし、覚えるのも大変です。そこでnpm scriptを利用します。

package.jsonのscriptsに以下を追加します。

$ "babel": "./node_modules/.bin/babel src --out-dir js"

これで次からBabelを使用して変換する際は、以下の記述だけで変換できるようになります。

$ npm run babel

最後に

今回は、Javascriptの新しいバージョン(ES6等)で書いたコードを、旧ブラウザ(IE11等)でも実行できる旧バージョンのJavascriptに変換することができるBabelについてご紹介いたしました。

Babelを使うことで、新しいバージョンのJavascriptでコードを書いても、IE11に対応させることができるのでありがたいですね。

今回はBabelのみのご紹介となりましたが、webpackやタスクランナー(gulp等)と組み合わせることで、さらに使いやすい環境を構築することも可能です。またの機会に記事にまとめていきたいと思います。