Babelを使って次期JavaScript、ES6を体験しよう
2015年6月17日に標準仕様として発行された ECMAScript6 通称“ ES6 ”ですが、脚光を浴びているものの実際のブラウザが対応するには時間がかかると思います。そのような状況の中、トランスパイラの一つである Babel で一足先にES6（ECMAScript6）を体感したいと思います。
ES6からES5へトランスパイラするBabel
トランスパイラとはコード変換ツールの意味として利用されています。Babelは現行のES5へ、ES6のコードを変換する（トランスパイルする）ツールです。Babelはランタイムライブラリとちがって、実行時のオーバーヘッドがありません。また、トランスパイル後の変換コードが比較的読みやすいという評判です。 では見ていきましょう！
※ 本記事では、Babelの利用だけに留め、ES6とES5の構文の違いや、ライブラリの説明は行いません。
Babelのセットアップ
Babelのインストール
BabelはNode.jsで動作します。Babelを使うためにはNode.jsとnpmがインストールされている事が前提となりますので、予め用意しておいて下さい。インストールはglobalオプションを付けて、コマンドラインより実行します。
$ npm install -g babel
Babelはコマンドプロンプトなどで次のように実行します。
$ babel script.js
EC6のコード整形
eslintとbabel-eslintを利用すると、コード整形が可能です。一緒にインストールしておきましょう。
$ npm install -g eslint babel-eslint
こちらもコマンドラインで次のように実行します。
$ eslint script.js
eslintには、ルールを予めセットアップできます。ユーザのルート直下に次のファイルを設置して下さい
.eslintrc
{
"parser": "babel-eslint",
"rules": {
"strict": 0
}
}
上記は最低限のルールですのでList of available rules - ESLint - Pluggable JavaScript linterを参照しながらルールをブラッシュアップしていくと良いでしょう。
Babelの実行の様子
実際に簡単なソースコードで変換される様子を見てみましょう。
ES6のコード: sample.js
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
BabelによりES5にトランスパイルされたコード
$ babel sample.js
// Expression bodies
"use strict";
var odds = evens.map(function (v) {
return v + 1;
});
var nums = evens.map(function (v, i) {
return v + i;
});
BabelのサイトでES6を体験
BabelではTry it outとして、実際に変換される様子をリアルタイムに確認できるサイトが用意されています。どのようなにES5に変換されるのかを検証することが可能ですので、その後のコード作成に役立つことでしょう。
BuildツールでBabelを利用する
実際の開発プロジェクトにおいては、ビルドツールを利用するのが一般的と思います。ここではGulpで変換してみます。まずは、Gulp本体とGulp用のBabelモジュールをインストールします。
$ npm install --save-dev gulp
$ npm install --save-dev gulp-babel
次のコードは、src/jsディレクトリにある全てのjsファイルを、dist/jsディレクトリに配備するサンプルです。
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/js/*.js")
.pipe(babel())
.pipe(gulp.dest("dist/js"));
});
Babel Gulp設定に他のビルドツールの利用方法がありますので、参考にして下さい。
ブラウザでの利用
ブラウザで、Babelで変換したコードを利用する場合、ポリフィルが必要になります。ポリフィルとはES6の新しい機能などを利用するためのES5向けのライブラリです。変換だけでは、ポリフィルは含まれないので、babel-coreパッケージをプロジェクトにインストールする必要があります。
$ npm install --save-dev babel-core
インストール後は、 パッケージにあるbrowser-polyfill.jsを、変換されたES5のスクリプトより前に設定します。
HTMLへのポリフィル設定サンプル
<body>
... HTMLコード ...
<script src="node_modules/babel-core/browser-polyfill.min.js"></script>
<script src="dist/js/main.js"></script>
</body>
ES6対応のIDEなど
2015/08/25の現時点で確認出来たES6対応のIDEやエディタをご紹介します。
IntelliJ IDEA 14
IntelliJ IDEA14をお使いであれば、構文レベルでES6サポートしています。
Preferences＞Languages&Frameworks＞JavaScript の画面で、
Scriptバージョンを設定することで、コードフォーマットなどに対応できるようになります。姉妹製品のWebStormなども同様な対応となっています。
また、プラグインのintellij-es67 を入れることも検討して下さい。plugin の browse repositoriesから、「javascript.next support plugin」で検索出来ます。
Atom
Atomエディタでは、language-babelプラグインで、ES6やJSXコードのシンタックスのハイライトを行います。
Sublime Text
Atomとよく比較される定番のエディタです。 Sublime Textでは、シンタックスをサポートするプラグインがあります。
Package ControlからBabel - Packages - Package Controlをインストールします。
Visual Studio Code
Microsoftからリリースされた、マルチプラットフォームで動くエディタです。ES6がサポートされていますので、シンタックスなども可能です。
まとめ
現在Babelに限らず、ES6界隈でこのようなトランスパイラが発達するのは、やはり開発側において早くES6への対応を希望しているからと言えます。Babelのトランスパイルは現行のES5として変換されますので、多くの機能はすでにES6で開発できると思ってよいでしょう。ただし既存ライブラリや、テスト方法に支障が出る可能性も考慮する必要があります。
今後、ブラウザがES6に全て対応したとしても、各ブラウザの挙動が微妙に違う可能性も出てくるでしょう。数年前までIE対応やマルチブラウザ対応で悩まされたのと同じような状況にならないことを切に願いたいところです。
そのため、Babelなどの変換ツールに頼らざるを得ない状況は続くと思われます。
全てのブラウザがES6に対応してから始めるより、ぜひ今からES6を使い始めましょう！
