gulpとBabelで次世代JavaScript(ECMAScript2015)をコンパイルする

/

Babel

Babelは次世代仕様のJavaScript(ECMAScript)を現行のブラウザでも使えるようにしてくれるライブラリです。具体的には新しい仕様で書いたJavaScriptのソースコードを、現在のブラウザで対応している従来のJavaScriptの形式のソースコードへのコンパイルを実行してくれます。
ECMAScriptはTypeScriptなどとは違いJavaScriptの拡張言語ではありませんが、現在の環境では広い範囲のブラウザに対応させるためにはBabelによるコンパイルが必要なためgulpなどのタスクランナーを使うと余計な手間を減らして利用することが出来ます。

babeljs.io

名前の由来

Babelの名前の由来はおそらく旧約聖書のバベルの塔から来ているのだと思います。
ただバベルの塔の話は天にも届く高い塔を作ったせいで神の怒りを買ってしまい、その罰によって人々の話す言語がバラバラになってしまったというストーリーなのでライブラリの機能とは意味が逆になってしまう気がするんですが…。
「俺達がもう一度統一してやるぜ」ってことなんでしょうか。

インストール

Babelをインストールするのにnpmを利用するのでNode.jsが必要になります。またコンパイルの作業をgulpによって行うのでgulp用のライブラリも同時にインストールしています。

Node.jsの導入とnを使っての最新版へのアップデート/Koltatt
gulpを使ったフロントエンド開発 導入編

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

gulpfile

var gulp        = require('gulp');
var babel       = require('gulp-babel');

gulp.task('babel', () => {
    return gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});
<script src="dist/app.js"></script>

babel-preset-es2015

BabelでECMAScriptをコンパイルする際には対象となるECMAScriptのPresetをあらかじめ用意し、コンパイルの際に利用するECMAScriptのバージョンを指定する必要があります。
今回のケースではnpmから「babel-preset-es2015」をインストールし、gulpタスクの中でgulp-babelのオプションで「presets: [‘es2015’]」を指定しています。

Presetの指定はgulpの中でBabelを実行する際にオプションとして指定するほかに、gulpfile.jsと同じ階層のディレクトリに.babelrcファイルを作成しその中で指定するという方法があります。

{
  "presets": ["es2015"]
}

またECMAScriptのバージョン表記ですが、ECMAScript6以前は仕様が更新される毎に数字を足していく方法が取られていましたが、ECMAScript6の策定の途中からECMAScript2015のように仕様が定められた年で表す方法に変更されました。
ECMAScript6は仕様の策定の途中で呼び方を変えたせいか表記が混在していますが、ECMAScript6 = ECMAScript2015と考えてよいようです。ECMAScript2015以後はECMAScript2016,ECMAScript2017という名前で仕様が公開されています。

ES2015 preset/babel.io

Babelの実行

gulpを実行する準備が出来たのたでBabelの動作を確認するためECMAScript2015で追加されたアロー関数を使ったコードをコンパイルしてみます。

var num1 = 10;
var num2 = 20;

var calc = ((i, t) => i * t );

console.log(calc(num1,num2));
#Babelでのコンパイルの実行
$ gulp babel
"use strict";

var num1 = 10;
var num2 = 20;

var calc = function calc(i, t) {
  return i * t;
};

console.log(calc(num1, num2));

gulpのタスクを実行するとBabelによってECMAScript2015の形式で書いたソースコードが、従来のJavaScriptの形式に変換されているのが解ります。
HTMLはコンパイル後のJavaScriptファイルを読み込んでいるため、アロー関数に対応していないブラウザでもコンソールを確認すれば計算結果が出力されているはずです。

アロー関数はECMAScript2015以後に追加された機能の代表的なものの一つですがECMAScript2015にはそのほかにもクラスなど、それ以前のJavaScriptと比較して大幅に機能が追加されています。変更・追加された仕様の詳しい内容はBabelのサイトなどで確認することが出来ます。

あとがき

ECMAScript2015を現段階で利用するためにはTypeScriptなどの拡張言語と同様にBabelなどのコンパイラが必要になります。そのため目下のJavaScriptのコードを効率的に書くという事を考えた場合には他の拡張言語を使った方が作業が捗るというケースもあると思いますが、ECMAScript2015には次世代のJavaScriptであるというアドバンテージがあります。
将来的にJavaScriptの標準の仕様そのものとなるわけなので各ブラウザの対応が進めばコンパイルせずに直接JavaScriptとして書くことが出来ますし、拡張言語の独自仕様のように覚えた文法が無駄になる事もないのでいわゆる学習コストの点から考えてもメリットがあります。

実際に今回使ったアロー関数はChormeでいえばVer45から対応しているようなので、デスクトップ環境ではBableでのコンパイルを実行しなくても利用出来る環境も少なくないと思います。

ただ以下のサイトでECMAScript2015機能全体での各ブラウザの対応状況をみると特にモバイル環境での対応がまだまだなので(2016/10/20現在)、今の段階で実際のプロジェクトにECMAScript2015を直接投入するのは現実的ではないようです。
http://kangax.github.io/compat-table/es6/

そのため個人的には今の所は先々を見越して次世代のJavaScriptになれつつ、Babelを使ってブラウザには従来のJavaScriptを読み込ませるとい方法で切り替えのタイミングを伺いながらぼちぼちやっていこう思います。