2016/08/08更新

[フロントエンド] 次世代JavaScriptのコンパイラ、Babelに入門

こんにちは、@yoheiMuneです。
ブラウザ向けアプリケーションでもES6やES7で実装できるBabelについてブログを書きたいと思います。

Babelとは

BabelはJavaScriptのコンパイラで、ES2015などブラウザで完全サポートされていない次世代JavaScriptをES5に変換することができるツールです。例えば、

[1,2,3].map(n => n + 1);

というES2015仕様のアロー関数を、

[1,2,3].map(function(n) {
  return n + 1;
});

という感じでブラウザで実行可能なものに変換してくれます。

Babelを用いることでブラウザで完全実装されていなくて使えないけど便利なJavaScript仕様を取り入れた開発が可能となり、結果として良い開発ができるようになります。
この記事ではBabelのことはじめとして、インストールからサンプルの使い方までを書きたいと思います。

準備①：Babelのインストール

Babelのインストールは以下のように行うことができます。

グローバルにインストールする場合

# インストール
$ [sudo] npm install -g babel-cli

# 動作確認
$ babel --version
6.11.4 (babel-core 6.13.2)

プロジェクトにインストールする場合

# インストール
$ npm install --save-dev babel-cli

# 実行準備
# package.jsonに以下を追記
  "scripts": {
    "babel-version": "babel --version"
  },

# 動作確認
$ npm run babel-version
6.11.4 (babel-core 6.11.4)

と、こんな感じでインストールすることができます。どちらの方法でのインストールが良いかというと、仕事でやるなら「プロジェクトへのインストール」がオススメです。というのも、フロントエンド系のツールはメジャーバージョンアップの際に下位互換を切り捨てることもよくあるので、プロジェクトごとにバージョンを管理できると良いからです。

ただこのブログでは説明に使いやすいという理由で、グローバルインストールしたバベルを利用します。

準備②：ES2015プリセットのインストール

準備①のみでBabelは動くのですが、ブラウザが認識可能なES5形式へ変換するためにはES2015プリセットというものが追加で必要です。それもnpmからインストールします。

$ npm install --save-dev babel-preset-es2015

これもエラーなくインストールできればOKです。以上で準備は完了です。

Babelを使ってコンパイルする（ファイル毎に）

それでは早速Babelを用いてコンパイルして見たいと思います。今回は以下のような値を二乗する関数を用意しました。

# my-file.js
const square = n => n * n;

これをBabelを用いてES5へ変換するには以下のように行います。

# --presetsオプションでES2015向けにコンパイルすることを伝える
# -oオプションで出力先ファイルを指定する
$ babel --presets es2015 -o my-file-compiled.js my-file.js

無事にコンパイルが終わると、以下ような内容のmy-file-compled.jsが出力されます。

"use strict";

var square = function square(n) {
  return n * n;
};

ES6の内容がES5に変換されるのは素敵ですね！

Babelを使ってコンパイルする（ディレクトリ全体で）

babelコマンドを用いたコンパイルでは、ディレクトリを指定することでディレクトリ丸ごとコンパイルすることが可能です。例えば以下のようなディレクトリがある場合には、

$ tree src
src
├── a.js
├── b.js
└── sub
    └── c.js

以下のように指定することで、サブディレクトリも含め全てコンパイルすることができます。

$ babel -d dest src
src/a.js -> dest/a.js
src/b.js -> dest/b.js
src/sub/c.js -> dest/sub/c.js

ちなみにtreeコマンドはMacではデフォルトでは入っていませんが、brew経由でインストールすることができます。詳細は[Mac] ターミナルでファイルをツリー構造で表現できるtreeコマンドをご参照ください。

参考資料

Babelを入門するために以下の記事を参照しました。ありがとうございます。

babel-handbook/user-handbook.md at master · thejameskyle/babel-handbook（日本語）

Babelで始める！モダンJavaScript開発 | HTML5Experts.jp

最後に

ここ半年〜1年くらいフロントエンドから遠ざかっていたら色々と進化してますね！バシバシとキャッチアップしてブログにもドシドシとアウトプットしていけたらと思います。

最後になりますが本ブログでは、フロントエンド・開発関連・Swift・Linux・Python・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！