introduce ES6 with Babel.

1. Babelで先取り次世代
javascript
1
Tsuyoshi Maeda

2. 目次
1. Node.jsをインストール
2. Babelとは
1. ES6で使えるようになった代表的な機能。
3. 合わせて使うと便利なツール
1. browserify
2. gulp
4. 実際にES6に触れてみよう
2

3. Node.jsをインストール
• 本家サイトからインストールするなり、nvm・
nodeenvを使うなりお好きな方法でどうぞ。
• 以前Gruntの紹介をしたときにNode.jsのインストール方法を
記述してあるのでこちらも参考になるかと。
• http://www.slideshare.net/tsuyoshimaeda56/
grunt-40575694
3

4. Babelとは
• ES6(次世代)で組み込まれる機能をいち早く使え
るようにするツール。(JavaScript Transpiler)
• 元々の名前は「6to5」という名前だったが
「Babel」という名前に変更された。
http://www.infoq.com/news/2015/02/babel-new-name-for-6to5
4

5. ES6で追加された主な機能
（サンプルで紹介する分のみ）
!
• Arrow Function
• Class
• let, const(変数・定数宣言)
• Template Strings
!
• 他にも追加される機能はたくさんあるので以下のページも参考に。
https://babeljs.io/docs/learn-es6/
http://es6-features.org/#BlockScopedConstants
5

6. Arrow Function
• thisコンテキストがbindされる。
6
document.addEventListener('click', e => {
console.log(this, e);
});
!
↓ 以下と同じ
!
var self = this;
document.addEventListener('click', function (e) {
console.log(self, e);
});

7. Class
• 他の言語のようにclassでコードを書くことが出来る。
(今まではprototypeを利用して実現していた。)
7
function Animal(name) {
this._name = name ¦¦ default name ;
}
Animal.prototype.getName = function () {
return this._name;
};
↓ 以下と同じ
class Animal {
constructor(name = default name ) {
this._name = name;
}
getName() {
return this._name;
}
}

8. let・const(変数・定数宣言)
• let
• 変数の影響範囲がブロックスコープになる。
（var宣言は関数スコープ）
• const
• 一度宣言したら再代入出来ない。
(コンパイルエラー)
8

9. Template Strings
• 文字列内で変数展開ができるようになる。
• バッククォート「``」で変数を囲む。
9
function introduce(firstName, lastName) {
return my name is + lastName + + firstName . ;
}
!
↓ 以下と同じ
!
function introduce(firstName, lastName) {
return `my name is ${lastName} ${firstName}.`;
}

10. 合わせて使うと便利なツール
• ES6でコードを書いて挙動を確認するたびに
babelコマンドを叩くのは非効率。
• babelコマンドは以下のページを参照
https://babeljs.io/docs/usage/cli/
• 機能ごとにclassでファイルを分けて、必要に応
じて外部ファイルをimport(require)して、最終
的には複数に分けたファイルを一つにまとめる
のが今っぽい書き方。
10

11. 合わせて使うと便利なツール
• gulp
• ES6でコードを書いて挙動を確認するたびにbabelコマンドを叩くのは非効率。
• babelコマンドは以下のページを参照
https://babeljs.io/docs/usage/cli/
• browserify(or webpack)
• 機能ごとにclassでファイルを分けて、必要に応じて外部ファイルをimport(require)し
て、最終的には複数に分けたファイルを一つにまとめるのが今っぽい書き方。
11

12. gulp
• タスクランナー
• タスクとは？
• ファイル編集保存をフックにコンパイル
• 本番リリース時に行う一連作業の登録 など
• sass, altJSなどのコンパイル
• ファイル連結
• ファイル圧縮
• http://gulpjs.com/
12

13. browserify
• サーバーサイドJSのモジュール管理機構(CommonJS)
をブラウザ側でも使えるようにするツール。
• 旧来はAMD(RequireJS)でモジュール管理をして、非
同期で依存ファイルをブラウザ上で読み込むやり方が
流行っていたが、現在の主流はブラウザ側も
CommonJSの書き方で対応して、依存ファイルをあら
かじめコンパイルして解決するやり方になっている。
• AMD、CommonJSについて参考になる記事
http://tsuchikazu.net/javascript-module/
• http://browserify.org/
13

14. 実際にES6に触れてみよう
以下のサンプルコードをclone
https://github.com/duyoji/
babel_browserify_in_gulp
14