はじめに（ES2015とは）

今年2015年6月に、これまで長々と仕様の策定が進められてきたECMAScriptの6thエディションがECMAScript2015（ES2015）として正式にリリースされました。これまでのJavaScript（ECMAScript 5）で指摘されていた弱点を補うべく大幅なパワーアップが図られています。追加された機能の詳細などは以下をご参照ください。

• ECMAScript 2015(ES6)の概要と次世代JavaScriptの新たな機能 | HTML5Experts.jp
• Learn ES2015 · Babel
• ES6 – Next Generation Javascript | SlideShare
• lukehoban/es6features – GitHub

とは言うものの、まだ各ブラウザ側の実装が追いついておらず、ES2015の機能のすべてをブラウザで使うことができないのが実情です。そこで「Babel」の登場です。

Babelとは

Babelは、新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換してくれるツールです。もともと「6to5」という名前で、ES6をES5に変換するためのツールでした。それがES6以降の仕様もサポートしていくことになり今年2015年2月に現在の「Babel」という名称となりました。

Babelの使い方

Babelの使用方法は様々です。いろんなツールと組み合わせて使用することもできます。詳細は以下を参照してください。

• Using Babel · Babel

中でも、気軽に行えるbabelコマンドを使用する方法を紹介しておきます。まずは、以下のコマンドでBabel（babel-cli）をインストールします。-gオプションを使うと、システムにBabelがインストールされます。

Babel（babel-cli）をシステムにインストールするとbabelコマンドが使えるようになります。以下のコマンドは、“app.js（返還前のJSファイル）”を、”build.js（変換後のJSファイル）”に変換するコマンドとなります。変換後のファイルを指定する場合は、-oオプションを使います。

babelコマンドの使い方の詳細については、以下をご参照ください。

• CLI · Babel

様々なツールと組み合わせて自動コンパイル機能を実現する

昨今のJavaScriptの開発において、ファイルの変換、結合や圧縮、依存関係の解決などを行うためにさまざまなツールを使用するのが一般的となってきています。Babelは、そうしたツールと組み合わせて使うことも可能です。中でも使用頻度の多いと思われるBrowserify、gulp、Grunt、webpackの4つのツール上でのBabelの使い方と、ファイルの保存を監視し自動的にコンパイルする方法を紹介したいと思います。

念のため、Node.js、npmが使える環境があることと、それぞれのツールが使えることが前提となります。

.babelrcファイルの準備（Babel v6.0.0以降の場合）

Babel v6.0.0になって仕様が変わりました。Babelを実行する際に、pluginまたはpresetを指定することが必要となりました。上記のCLIでBabelを実行する場合もそうですが、これから説明する各方法でも必要になってくる設定です。Bebel v6.0.0、babelify v7.0.0以降を使用する場合は、以下の設定を行ってください。

• babelrc · Babel

babel-preset-es2015のインストール

Bableのes2015用のpreset「babel-preset-es2015」をインストールします。

.babelrcファイルの設定

pluginまたはpresetを指定するための.babelrcファイルをプロジェクトディレクトリ内に作成します。

作成した.babelrcファイルに以下を記載します。

{
  "presets": ["es2015"]
}

基本的な.babelrcの設定は以上です。Browserify、gulp、Grunt、webpackの4つのツール上でのBabelの使い方を説明してきます。

Browserify (watchify) + babelify を使う方法

自分がよく使うのは、このBrowserify (watchify)と組み合わせて使う方法です。設定ファイルもpackage.jsonファイルのみでOKなので手っ取り早く使うことができます。

Browserifyは、ブラウザで使用するJSファイルに対して、requireメソッドを使ったモジュールの読み込みを可能にしてくれるツールです。さらに依存関係を考慮し、複数のJSファイルを1つのファイルにまとめてくれる便利なツールです。

1. watchifyのインストール

watchifyは、Browserifyにファイル監視機能をつけたツールです。wathify自体にBrowserifyが含まれているため、watchifyのインストールでBrowserifyの機能が使えるようになります。以下のコマンドで、watchifyをプロジェクトフォルダ内にインストールします。

• substack/watchify – GitHub

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

ソースマップを出力させるようにするには、exorcistもインストールします。

3. 設定ファイルの記述

使用する設定ファイルは、npm initコマンドを実行した時に生成されるpackage.jsonファイルとなります。package.jsonファイルの”script”の部分に以下を追記します。追記したコマンドは、npm runコマンドで実行できるようになります。

"scripts": {
  "watch": "watchify -t babelify ./src/app.js -o ./dist/build.js"
}

ソースマップを出力させる場合は、以下のように記述します。

"scripts": {
  "watch": "watchify -t babelify ./src/app.js -o 'exorcist ./build.js.map > ./dist/build.js' -d"
}

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript（ES5）に自動コンパイルされるようになります。

自動コンパイル機能を停止する場合は、“control + c”キー（Macの場合）を押します。

gulp + gulp-babel を使う方法

gulpは、今よく使われているタスクランナーですね。gulpと組み合わせて使う機会も多いかと思います。gulpには監視機能がデフォルトで用意されています。

gulpの詳細については、当ブログでも以下の記事で書いています。

• gulpの基本的な使い方（gulp.jsの基礎をしっかり理解する） – maesblog

1. gulpのインストール

まず、npm installコマンドに-gオプションをつけて”gulp”をシステムにインストールします。gulpコマンドが使えるようになります。

次に、プロジェクトフォルダ内にもgulpをインストールします。

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

ソースマップを出力させるようにするには、gulp-sourcemapsもインストールします。

3. 設定ファイルの記述

gulpの設定ファイルは、gulpfile.jsとなります。gulpfile.jsファイルを作成したら、以下を記述します。

var gulp = require('gulp');
var babel = require('gulp-babel');
var plumber = require('gulp-plumber');
var sourcemaps = require("gulp-sourcemaps"); /* ソースマップを出力させる場合 */

gulp.task('babel', function () {
  return gulp.src('./src/app.js')
    .pipe(plumber())
    .pipe(sourcemaps.init()) /* ソースマップを出力させる場合 */
    .pipe(babel())
    .pipe(sourcemaps.write(".")) /* ソースマップを出力させる場合 */
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function () {
  gulp.watch(src, ['babel']);
});

gulp.task('default', ['babel']);

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript（ES5）に自動コンパイルされるようになります。

自動コンパイル機能を停止する場合は、“control + c”キー（Macの場合）を押します。

Grunt + grunt-babel を使う方法

gulpでの使い方も紹介したので、Gruntでの使い方も紹介しておきます。Gruntもタスクランナーです。gulpが登場するまでは定番のタスクランナーでした。

Gruntの詳細については、当ブログでも以下の記事で書いています。

• GruntをMac OS Xに導入する方法 – インストールからタスクを実行するまで – maesblog

1. Gruntのインストール

まず、npm installコマンドに-gオプションをつけて”grunt-cli”をシステムにインストールします。gruntコマンドが使えるようになります。

次に、プロジェクトフォルダ内にgruntをインストールします。

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

3. 設定ファイルの記述

Gruntの設定ファイルは、Gruntfile.jsとなります。Gruntfile.jsファイルを作成したら、以下を記述します。

grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({
  babel: {
    options: {
      /* ソースマップを出力させる場合はtrueにする */
      sourceMap: true
    },
    dist: {
      files: {
        /* 変換後のJSファイル: 変換前のJSファイル */
        "./dist/bundle.js": "./src/app.js"
      }
    }
  },
  watch: {
    js: {
      files: ["src/*.js"],
      tasks: ["babel"]
    }
  }
});

grunt.registerTask("default", ["babel"]);

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript（ES5）に自動コンパイルされるようになります。

自動コンパイル機能を停止する場合は、“control + c”キー（Macの場合）を押します。

webpack + babel-loader を使う方法

webpackは、Browserifyと同様、依存関係を解決してくれるツールです。自分はあまりwebpackは使いませんが、webpack派も最近は増えてきているのでwebpackでの使い方も紹介しておきます。

1. webpackのインストール

まず、npm installコマンドに-gオプションをつけて”webpack”をシステムにインストールします。webpackコマンドが使えるようになります。

次に、プロジェクトフォルダ内にもwebpackをインストールします。

• installation – webpack

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

3. 設定ファイルの記述

webpackの設定ファイルは、webpack.config.jsとなります。webpack.config.jsファイルを作成したら、以下を記述します。

module.exports = {
  entry: "./src/app.js",
  output: {
    path: "./dist",
    filename: "bundle.js"
  },
  /* ソースマップを出力させる場合は以下を追加 */
  devtool: "inline-source-map",
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  }
};

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript（ES5）に自動コンパイルされるようになります。

自動コンパイル機能を停止する場合は、“control + c”キー（Macの場合）を押します。

まとめ

それぞれBrowserify、gulp、Grunt、webpackでのBabelの使い方を紹介してきました。ぜひご自身の用途に併せて参考にしていただければと思います。

ちょうどこの記事を書いている時に、HTML5Experts.jpからも同じような記事が公開されました。こちらの記事も参考になると思いますので紹介しておきます。

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

後はとにかく実戦でどんどんES2015を使っていくのみですね。ちなみにBabelはReactのJSXのコンパイルにも対応しているので、Reactの開発にもすぐにES2015を取り入れることが可能です。

ES2015に関する日本語の書籍はまだそれほど多く出版されていないと思うので、以下の『Web+DB PRESS』の特集は大変貴重な情報源になると思います。最後に紹介しておきます。