Babel にリベンジ！ES2015 ってやつを勉強する環境を作るぜ！

ここんとこ職場では Windows バッチと VBScript をいじる生活で npm とか gulp とか言わせたいんじゃ～というフラストレーションが溜まっていたので、npm とか gulp とかする。

前にいじりかけていたけど放置していた Babel に手を出して、ES2015 とやらを試してみたい。

ES2015 って何・ES6 とは違うの？

Ecma International という団体が標準化を進める JavaScript の標準仕様が ECMAScript と呼ばれている。

その中のバージョンとして、ECMAScript 2015 (ES2015) という名称が使われている。ES2015 と ES6 は同じものを指す。最近は毎年策定する仕様が変わるから、ES2015 とか ES2016 とか、西暦の方で呼ぶのが正式名称っぽい。

ES2016 (ES7 という呼称は使わないみたい) は、2016-06-17 にリリースされたばかり。今のところはまだ ES2015 (ES6) をベースに勉強していけばいいんじゃないかと思ってる。

結局のところ、ぼくも ES2015 のこと自体がそもそも分かってないし、必要性とか感じる以前の段階なので、新たな構文を覚えることよりも、何を作るかをもう少し考えてみようと思う。

• 参考 : ES6 or ES2015 ? 〜WEB+DB PRESS Vol.87 ES6特集に寄せて〜 - Cybozu Inside Out | サイボウズエンジニアのブログ
• 参考 : ES6 だとか ES7 だとか ES2015 だとか ES2016 ってつまり何という自分用記事まとめ - BattleProgrammerShibata

Babel って何

ES2015 だの ES2016 だのといっているが、ブラウザがまだまだ対応していないので、そんな構文使っても意味ないんですよねぇ、というのが現状。

それを打開するのが Babel という npm パッケージ。ES2015 とかの新しい構文で書かれたスクリプトを、現在広く使われている ES5 の構文にトランスパイルしてくれるツール。トランスパイルしたファイルを使えば、バリッバリに最新版のブラウザじゃなくても解釈してもらえるよねーという。

なにやら、最近アップデートされた Babel 6 系は、使いたい機能がパッケージに分割されていて、これまでの環境構築の方法が通用しなくなっていたりするみたいなので、色々な記事を調べてうまくいった方法をまとめる。

• 参考 : Babelを6系にアップデートしたらgulpでこける - Qiita

Babelの5系では、babelをインストールするとすべての機能が揃った状態（stage-0とかを利用する場合はオプションで別途指定します）でしたが、Babelの6系ではBabelをインストールしても本体のみで、使いたい機能を別途Presets( ES2015、stage-3とかReact )という単位でインストールするかPlugin( 機能単位 )でインストールし、.babelrcで指定する必要があります。

Babelの6系からPresetsという単位で管理するようになり、より便利になった？みたいです。
まあ、Reactとか使わない人には必要ないし、必要なものだけインストールするというのはいいかも。
それにしても、最近JavaScriptとかNodeJSまわりの動きが早すぎてそろそろ年寄りにはついていけなそうです。。(´・ω・｀)

ワシももうジジイなので必死です。

今回のゴール

Babel でトランスパイルする Gulp タスクを定義し、ES2015 の構文で記述した js ファイルを ES5 の構文にトランスパイルさせる環境を作る。

Gulp も 3.9.0 からは、ES2015 の構文を使用した gulpfile.js (gulpfile.babel.js というファイル名になる) が作れるらしいので、これも試してみようと思う。

環境は Windows10、コンソールは GitBash を使って作業、テキストエディタは別に特殊なモノではなく、Notepad++ を使用。軽量で使いやすいのでオヌヌメ。

では早速スタート。

モロに以下の記事そのままです。大変参考になりました。

• 参考 : Gulp + Babel で ES6 を書く環境を作る - Septeni Engineer's Blog

その他参考になりそうな記事。

• 参考 : babel 6 やってみる - Qiita

プロジェクトフォルダを作る

自分は GitHub リポジトリ「BabelES2015Test」を作ったので、これを git clone して始めた。GitHub リポジトリとか使わない場合は適当に mkdir して始める。

npm の初期設定・必要なパッケージのインストール

# 初期設定
$ npm init

# Gulp と Babel 系のパッケージのインストール
$ npm i -D gulp gulp-load-plugins babel babel-core babel-preset-es2015 gulp-babel

この辺はもう元記事の受け売り。それぞれのパッケージがどうして要るのかとかよく分からない。Gulp も Babel も、どこでみんな勉強してるの？多分以下のような解釈で大きくはズレていないかと。

• gulp : Gulp 本体。
• gulp-load-plugins : Gulp プラグインを一括ロードできるらしい。
• babel : Babel 本体。
• babel-core : ポリフィル (古い構文に直す) 機能を提供するパッケージらしい。
• babel-preset-es2015 : ES2015 をトランスパイルするために使うプリセット。
• gulp-babel : Gulp で Babel を使うために要るっぽい。

.babelrc ファイルを作成する

.babelrc というのは、プラグインもしくはプリセットを指定するためのファイル。要は ES2015 で書いたものをコンパイルしてもらうよー、という宣言みたいなモノ。

$ touch .babelrc

.babelrc の中身は以下のようにする。これはもうそういうもんだと思ってコピペ。.babelrc ファイルは JSON 形式なのですなー。

{
  "presets": ["es2015"]
}

Gulp タスクを ES2015 形式で書く

普通は gulpfile.js を作るところ、ES2015 の構文を利用するので、gulpfile.babel.js というファイルを作ることになる。

$ touch gulpfile.babel.js

中身は以下のように。コンソールから gulp build と叩くと Babel を使ってトランスパイルさせるタスクを書いておく。import とか const とか () => とか、とりあえず今っぽいっすね！

import gulp from "gulp"
import gulpLoadPlugins from "gulp-load-plugins"

const $ = gulpLoadPlugins();

// src/scripts/ 配下の js ファイルをトランスパイルし dist/scripts/ に格納するタスク
gulp.task("build", () =>
  gulp.src("src/scripts/**/*.js")
  .pipe($.babel())
  .pipe(gulp.dest("dist/scripts"))
);

ES2015 形式で書く js ファイルを適当に用意する

これも元記事そのままのファイルを作ってみる。

# src/scripts/ フォルダを作る。
# 「mkdir -p」オプションでフォルダが既に存在していてもエラーにしない。
# 「;」でコマンドを複数繋げて書ける。
# 「$_」と書くと1つ前の引数を受け取れるので、フォルダを作って移動、を1行でできる。
$ mkdir -p src; cd $_
$ mkdir -p scripts; cd $_

# 適当に sample.js を作る
$ touch sample.js

sample.js の中身は以下のように。

// ES2015 の記法を用いたサンプル
const add1 = i => i + 1
const multi = (n, m) => i * j

宣言しておいた Gulp タスクを実行する

コンソールで gulp build を実行すると、src/scripts/ 配下にある全ての js ファイルが Babel によってトランスパイルされ、ES2015 の記法は ES5 の構文に直される。トランスパイルされたファイルは dist/scripts/ 配下に出力されている。

$ gulp build

[23:12:48] Requiring external module babel-register
[23:12:49] Using gulpfile P:\BabelES2015Test\gulpfile.babel.js
[23:12:49] Starting 'build'...
[23:12:50] Finished 'build' after 103 ms

コンソールには「babel-register が要るよ～」みたいなメッセージが出てるけどなんか無視できてる。よく分からんち。

dist/scripts/sample.js ができているので中身を見てみる。すると以下のようになっている。

"use strict";

// ES2015 の記法を用いたサンプル
var add1 = function add1(i) {
  return i + 1;
};
var multi = function multi(n, m) {
  return i * j;
};

"use strict"; は見たことあるね。見慣れた function() になっていたりして、インデントも付いていて読みやすい。

今日はココマデ！

以降は sample.js と同様に、src/scripts/ 内に ES2015 記法を用いた js ファイルを作り、gulp build タスクを呼んで dist/scripts/ に向けてトランスパイルさせてやれば良い。

都度都度 gulp タスクを呼ぶのが面倒だなぁ～という話は次回に。

• Babel を試す環境に Gulp-Plumber を入れて自動ビルドに備える

GitHub リポジトリ作りました

ここまでの内容を First Commit. とした GitHub リポジトリを用意した。今後さらに便利な環境になるよう更新していく可能性があるが、その場合もコミットログを遡って見てもらえれば大丈夫かと。

以下のリポジトリを git clone して npm install してあげれば環境をパクれると思う。あとはご自由に。

• GitHub - Neos21/BabelES2015Test: Gulp と Babel を使って ES2015 (ES6) を書く環境を作りました