webpack+babel環境でフロントエンドもES6開発

## 概要

昨今、JavaScriptコミュニティ界隈で騒がれているES6（ES2015）。クラスの導入など便利な機能が追加されてNode.jsでは既に導入されているというのに、フロントエンド環境（ブラウザ）上で利用できるようになるにはまだまだ先になりそうです。

そこで、フロントエンド環境でもES6を先取って開発する為の環境構築方法を記載します。

## webpack + babel環境インストール

ES6からブラウザが利用できるJavaScript(ES5)にコンパイル＝変換を行う為の環境を構築します。
今回は**webpack**という**依存性を解決するツール**と**Babel**という**JavaScriptコンパイラ**を利用します。

本記事はライブラリ管理ツールであるnpmを用いる為、Node.js環境を既に構築してある前提です。Node.js環境のインストール方法は[こちら](http://qiita.com/HayneRyo/items/326de7231d907447834d)。
参考：[nodebrew を用いた Node.js環境構築](http://qiita.com/HayneRyo/items/326de7231d907447834d)

### 1. webpack + babelをインストールする
npm初期化、package.jsonの生成を行います。

```bash:ターミナル
$ npm init
```

このpackage.jsonには**インストールされたnpmライブラリのリストなどの情報**が追加され、自分以外の作業者でも同一環境を構築することを容易にします。

次に**webpack**と**babel**をインストールします。

```bash:ターミナル
$ npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015
```

今回インストールしたnpmライブラリは下記の通りです。

<dl>
<dt>webpack</dt>
<dd>リソース同士の依存関係を解決して、アセットを生成するビルドツール。Javascriptに限らず、CSSや画像ファイルなども扱うことが可能です。</dd>
<dt>babel-loader</dt>
<dd>Babel is a compiler for writing next generation JavaScript.This package allows transpiling JavaScript files using Babel and webpack.</dd>
<dt>babel-preset-react</dt>
<dd>Strip flow types and transform JSX into createElement calls.</dd>
<dt>babel-preset-es2015</dt>
<dd>All you need to compile ES2015 to ES5</dd>
</dl>

※ babel6系からパッケージの分離が行われた為、bebel5系と異なりbabel-preset-es2015やbabel-preset-reactなど機能 ＝ プリセット単位で別途インストールする必要があります。

### 2. webpackの設定

```javascript:webpack.config.js
module.exports = {
  context: __dirname + '/source',
  entry: {
    'application': './es2015/application',
  },
  output: {
    path: __dirname + '/distribution/javascript',
    filename: '[name].js'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: "babel", 
        query:{
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};
```

設定の概要は下記となります。

<dl>
<dt>context</dt>
<dd>entryオプションを解決するためのベースとなるディレクトリ</dd>
<dt>entry</dt>
<dd>エントリーポイントの設定</dd>
<dt>output</dt>
<dd>ファイル出力の設定</dd>
<dt>module</dt>
<dd>モジュールのオプション</dd>
</dl>

詳細は[こちら](https://webpack.github.io/docs/configuration.html)を参照してください。
参考：[webpack CONFIGURATION(公式)](https://webpack.github.io/docs/configuration.html)


ここまでの準備で利用する環境が構築できました。

## チュートリアル

実験としてES6（ES2015）から追加された機能であるクラスを用いたチュートリアルを行います。

### 1.ディレクトリ生成
先程の設定ファイルに合わせてディレクトリを生成します。

```lang:ターミナル
$ mkdir -p source/es2015 distribution/javascript
```

### 2.ファイルを用意

コンポーネントとして用いる親クラスを用意します。
ここではクラスの説明は割愛します。インスタンスを生成する際、引数に文字列で`name`を渡すことでメンバ変数`name`に代入するクラスを用意しました。

```file:source/es2015/person.js
class Person {
    constructor(name) {
        this.name = name;
    }
}
export default Person;
```

次に実行スクリプトを用意します。

```file:source/es2015/application.js
import Person from './person';

class Friend extends Person{
    constructor(name) {
      super(name);
    }
    callName() {
      alert(this.name);
    }
}

var friend = new Friend('Ryo');

friend.callName();
```

`import Person from './person'`で先ほど用意した外部ファイルであるPersonクラス（`source/es2015/person.js`）をインポートしています。
また`class Friend extends Person`で先ほどのクラスを継承、拡張しています。今回は実行するとメンバ変数`name`をアラートで表示するメソッドを追記しています。

最後にJavascriptを実行する為のHTMLファイルを用意します。

```file:distribution/index.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <script src="javascript/application.js"></script>
</body>
</html>
```

### 3.コンパイルを行う

上記で用意したES6のままではブラウザで解釈（処理）できない為、ブラウザで処理可能なES5形式にコンパイル ＝ 変換を行います。

下記コマンドでwebpackの処理を実行します。

```lang:ターミナル
`npm bin`/webpack 

Hash: 2fa1903137649928f74e
Version: webpack 1.12.9
Time: 2319ms
         Asset     Size  Chunks             Chunk Names
application.js  3.95 kB       0  [emitted]  application
    + 2 hidden modules
```

※`｀npm bin｀`はnpmでインストール実行ファイルの場所を出力するコマンドです。[direnv](http://qiita.com/HayneRyo/items/5a9fa23a5215f7f75bd8)などを用いて予めパスを通せば省略することも可能です。
参考：[ディレクトリごとに環境変数を定義](http://qiita.com/HayneRyo/items/5a9fa23a5215f7f75bd8)

### 4.確認

実際にHTMLファイル（`distribution/index.html
`）をブラウザで読み込んで下記のようなアラートが表示されれば成功です。

![スクリーンショット 2016-01-04 18.00.18.png](https://qiita-image-store.s3.amazonaws.com/0/72553/97e70582-f2f0-00e3-d530-1409d379abb2.png)