2015年06月11日

ES5なJavaScriptにES6を求めるのは間違っているだろうか

JavaScript界隈で徐々に話題になっている「ECMAScript6(通称ES6)」。
classやアロー関数やGenerator等々、生産性が劇的に高まる各種機能が追加される予定なんですが、Firefox以外のブラウザでは依然として対応状況が悪いです(15/06/11現在)

それ現行ブラウザでも動くよ!!!!

今回作ったのはこんな感じです。

ES6テスト

どうですか、この圧倒的に簡潔な記述、感動的じゃありませんか!!

というわけで、光のES6記述に辿り着くまでの話を、簡単に紹介しておきます。
※前提知識は、「node.js及びnpmを完全に理解してる」とします。

まず最初に、今回の話の登場人物について軽くまとめておきます。
  1. Babel:ES6⇒ES5へ変換するトランスパイラ。主人公。
  2. Browserify:node.js向けに書かれたソースコードを、ブラウザ上でも動かせるように変換してくれるものです。Babelの友人A。
  3. Gulp:web周りの様々なくっそ面倒くさい一連の処理(minifyやファイル結合等々)を自動化してくれます。聖剣エクスカリバー役です。


というわけで手順に入っていきます。

1.作業用フォルダを作る。その後そのフォルダに移動
好きな場所に適当にどうぞ。

2.BabelとBrowserifyをnpmを使ってインストールする

$ npm i babel
$ npm i browserify
コンソールウィンドウに打ち込むだけですね。node.jsとnpmは予め使えるようにしてください。

3.BrowserifyでBabelを変換するためのモジュールをインストールする

$ npm i babelify
$ npm i babel-runtime
Browserifyには、トランスフォームという機能がついていて、こいつについての詳細は割とどうでもいいんで置いときますが、トランスフォーム機能を使ってBabelとリンクさせるために「Babelify」っていう名前のモジュールをローカルインストールします。

更に、このBabelifyは、「特に明示的な指定がなければGeneratorとAsync/Awaitが使えない闇仕様」があるため、それを使えるようにするためにセットで「babel-runtime」っていうコア部分をインストールしておきます。

4.実際に試してみる
試しに「input.js」という(ES6で書いた)JSを、「output.js」という(ES5で書いた)JSに変換してみましょう。

function *gen(){
yield 1;
yield 1;
yield 4;
yield 5;
yield 1;
yield 4;
}

var output = "";
for(let v of gen()){
output += v;
}
console.log(output); // "114514"

$ babel input.js --optional runtime --out-file tmp.js
$ browserify tmp.js -t babelify --outfile output.js
これを実行しますと、フォルダ内に「tmp.js」と「output.js」が出来上がります。
tmp.jsのほうは数十行程度ですが、output.jsのほうは2000行近くに膨れ上がるかと思います。Generator、恐ろしい子。

因みにこのoutput.jsをブラウザ上で実行すれば、F12を押した時に正常に出力されていることが確認できます。


で、目的が達成出来ました。終わり!!!
・・・なんですが。



一々変換するのに、2コマンド入力しないといけないのは果てしなく面倒ですよね。というわけで自動化しましょう。gulpの出番です。

5.gulpをインストールする

$ npm i gulp
特に悩むところはなし。

6.gulpfile.jsを記述する
gulpを使っている人にはおなじみかと思いますが、gulpで動かすための記述をつらつらと書いていきます。

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require('babelify');

gulp.task("default",["ES6toES5","watch"]);

gulp.task("watch", function() {
gulp.watch(["./input.js"],["ES6toES5"]);
});

gulp.task("ES6toES5",function(){
return browserify("./input.js", { debug: true })
//browserifyのトランスフォーム機能はtransformメソッドでチェーンして使う
.transform(babelify.configure({
optional: ["runtime"] //shellのほうで「$ babel --optional runtime (ry」と書いた部分と対応
})
)
.bundle() //変換する
.pipe(source("output.js")) //標準形式に変換しつつ、ファイル名をoutput.jsに変える
.pipe(gulp.dest("./")); //入力と同じフォルダに出力
});
このgulpfile.js内で新たに「vinyl-source-stream」をrequireしているので、こいつもnpm様します

$ npm i vinyl-source-stream

7.Gulpを使って動かす

$ gulp
たったこれだけ。
これだけ打つだけで、「input.jsをbabel化したあとbrowserifyして、output.jsというファイル名で出力する。」ということを自動化してくれます。
さらに!「input.js」の中身を書き換えたら、その都度監視して自動で変換してくれます。神か。


というわけで、ES6のファイルをES5の書式に変換しつつ、それをgulpで自動化するまでの一連の流れを記述しました。
似たような内容の記事はいくつか見つけましたが、Generatorに対応するためのruntimeの用意などについて日本語で書かれている情報が見当たらなかったので、今回記事を作成しました。皆様のES6ライフが捗ることを祈っております。
posted by がお at 02:08| Comment(0) | Javascript | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。