概要
昨今、JavaScriptコミュニティ界隈で騒がれているES6（ES2015）。クラスの導入など便利な機能が追加されてNode.jsでは既に導入されているというのに、フロントエンド環境（ブラウザ）上で利用できるようになるにはまだまだ先になりそうです。
そこで、フロントエンド環境でもES6を先取って開発する為の環境構築方法を記載します。
webpack + babel環境インストール
ES6からブラウザが利用できるJavaScript(ES5)にコンパイル＝変換を行う為の環境を構築します。
今回はwebpackという依存性を解決するツールとBabelというJavaScriptコンパイラを利用します。
本記事はライブラリ管理ツールであるnpmを用いる為、Node.js環境を既に構築してある前提です。Node.js環境のインストール方法はこちら。
参考：nodebrew を用いた Node.js環境構築
1. webpack + babelをインストールする
npm初期化、package.jsonの生成を行います。
$ npm init
このpackage.jsonにはインストールされたnpmライブラリのリストなどの情報が追加され、自分以外の作業者でも同一環境を構築することを容易にします。
次にwebpackとbabelをインストールします。
$ npm install --save-dev webpack babel-core babel-loader babel-preset-react babel-preset-es2015
今回インストールしたnpmライブラリは下記の通りです。
- webpack
- リソース同士の依存関係を解決して、アセットを生成するビルドツール。Javascriptに限らず、CSSや画像ファイルなども扱うことが可能です。
- babel-loader
- Babel is a compiler for writing next generation JavaScript.This package allows transpiling JavaScript files using Babel and webpack.
- babel-preset-react
- Strip flow types and transform JSX into createElement calls.
- babel-preset-es2015
- All you need to compile ES2015 to ES5
※ babel6系からパッケージの分離が行われた為、bebel5系と異なりbabel-preset-es2015やbabel-preset-reactなど機能 ＝ プリセット単位で別途インストールする必要があります。
2. webpackの設定
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']
}
}
]
}
};
設定の概要は下記となります。
- context
- entryオプションを解決するためのベースとなるディレクトリ
- entry
- エントリーポイントの設定
- output
- ファイル出力の設定
- module
- モジュールのオプション
詳細はこちらを参照してください。
参考：webpack CONFIGURATION(公式)
ここまでの準備で利用する環境が構築できました。
チュートリアル
実験としてES6（ES2015）から追加された機能であるクラスを用いたチュートリアルを行います。
1.ディレクトリ生成
先程の設定ファイルに合わせてディレクトリを生成します。
$ mkdir -p source/es2015 distribution/javascript
2.ファイルを用意
コンポーネントとして用いる親クラスを用意します。
ここではクラスの説明は割愛します。インスタンスを生成する際、引数に文字列でnameを渡すことでメンバ変数nameに代入するクラスを用意しました。
class Person {
constructor(name) {
this.name = name;
}
}
export default Person;
次に実行スクリプトを用意します。
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ファイルを用意します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="javascript/application.js"></script>
</body>
</html>
3.コンパイルを行う
上記で用意したES6のままではブラウザで解釈（処理）できない為、ブラウザで処理可能なES5形式にコンパイル ＝ 変換を行います。
下記コマンドでwebpackの処理を実行します。
`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などを用いて予めパスを通せば省略することも可能です。
参考：ディレクトリごとに環境変数を定義
4.確認
実際にHTMLファイル（distribution/index.html ）をブラウザで読み込んで下記のようなアラートが表示されれば成功です。
