CoffeeScript、そんなにガンガン使ってるわけではないですが徐々に慣れてきたと思ったら、冷めてきた感が出てきて悲しいので（コーヒーだけに）、ES6構文を試してみました。

ES6とは次期JavaScriptの仕様で、現在策定中だそうですが、Babelを使ってES6の構文をES5の構文に変換して使ってみます。

そのうちポピュラーになっていく書き方だと思うので、やって損はないはず。

準備/方針

Babelだけでもコンパイルできるけども、BrowserifyにJSのコンパイルをやらせて、Gulpでアセットファイルの諸々を処理させることにします。

gulpfileは以下のようにした。JSのとこだけ（詳しいことははしょる）

var gulp = require('gulp'),
  $ = require("gulp-load-plugins")(),
  browserify = require('browserify'),
  babelify = require('babelify'),
  source = require('vinyl-source-stream');

var dir = {
  src: 'src',
  dist: 'dist'
};

gulp.task('browserify', function() {
  browserify(dir.src + '/js/app.js', { debug: true })
    .transform(babelify)
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(dir.dist))
    .pipe(browserSync.reload({
      stream: true
    }));
});

ES6やってみる

ES6で変わったことといえば大きくは以下。

• クラス機能の導入
• 関数にデフォルト引数が設定できる
• アロー関数の定義ができる
• 非同期処理にPromiseが提供されるように (詳しくはこちら参照、後で読みたい)

ざっくりとはこんな感じみたいです。

早速クラスを使ってみると

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    return 'Hello! My name is ' + this.name;
  }
}

var kenta = new Person('Kenta');
console.log(kenta.greet());

といった感じで書ける。普通になった。
(ただ糖衣構文でしかないので (typeof Person === “function”) であることには変わりはない)

以下のように継承もできる。(さっきのPersonクラスから継承してみます)

class KK extends Person {
  sayGreet() {
    return super.greet(this.name)
  }

  sayNickname() {
    return '俺の名前は' + this.name + '、通称かとけんだ';
  }
}

var katoken = new KK('かとうけんた');
console.log(katoken.sayGreet());
console.log(katoken.sayNickname());

すごい適当だけど、こんなふうに書ける。
ちなみにコンストラクタを定義しなくても、親クラスのコンストラクタに全引数をそのまま渡すので、省略できます。

なにかつくってみる

ちょうどCanvasをいじって遊んでたので、花火をES6で書いてみます。 こちら を参考にしました、ありがたいです。

デモ(PC推奨)

コード

特筆すべきことはあんまり無いですが、以下のようにモジュールを定義/参照できた。

hanabi.js

export default class Hanabi {

}

app.js

import Hanabi from './hanabi.js';

今週末の成果はこんな感じです。Promiseをいまいち理解できてないので、来週ゆるゆるとやります。

おわり🐶