ECMAScript2015(ES6)ことはじめ

gulpに自動化タスクを追加してみた↓

kuriya0909.hatenablog.com

アロー演算子使いたくて、CoffeeScript使ってたんだけど、
ECMAScript2015(以下ES6)でも使えるらしいので環境構築しました。
もう環境構築だけじゃなくてアプリ作り始めますよ()

作成した環境は、
React.js + Gulp + Babel となります。

github.com

また、gulpfileもES6で記述出来るようなので、
いい機会と言う事で書いてみました。

ファイル名はgulp.babel.jsであれば
自動的に変換かけてくれるみたいです。ラクチン！

当記事インデックス

• 使用した環境
• (主な)使用したパッケージ
• 必要条件
• 手順
• 使ってみて

使用した環境

• Mac -> Yosemite
• Node.js -> v0.12.7
• npm -> v2.11.3

(主な)使用したパッケージ

• gulp -> v3.9.0
• browserify
• babel

必要条件

• Node.jsをインストールしている
• gulpのバージョンが3.9.0以上である
• Babelをグローバルにインストールしている

---

Node.jsの理由は割愛します。
gulpのバージョンについてですが、gulp.babel.jsを使うためです。 対応したのが3.9.0からということです。
内部で変換を掛けるため、グローバルにBabelが必要になってきます。
(ただし、browserifyでES5へ変換するのはbaberifyです)

手順

1. まずはグローバルに必要なものをインストールしていきます。

        $ npm install -g gulp
        $ npm install -g babel

1. 次にプロジェクトを作成と初期化や
   必要なパッケージをローカルにインストールをします。

        $ mkdir proj
        $ cd proj
        $ npm init

        $ npm install -D gulp
        $ npm install -D baberify
        $ npm install -D browserify
        $ npm install -D react
        $ npm install -D vinly-source-stream

        # gulpfile.babel.jsを使うため
        # babel-coreも入れないと
        # エラーが発生してしまうため注意
        $ npm install -D babel babel-core

最終的にpackage.jsonは下記の様になりました。

1. パッケージのインストールまで完了しました。
   次にgulpで実行するタスクを書いていきます。

        $ vim gulpfile.babel.js

1. タスクの動作検証のためにapp.jsxを記述していきます。

        $ vim ./src/app.jsx
        $ gulp build

1. タスクが実行され、bundle.jsが作成されていることを確認します。

        $ less ./built/bundle.js

* 最後に今回作成したgulp.babel.jsとなります。

使ってみて

昨今のフロントエンドは本当に激流で初心者からすれば
どれがベストプラクティスがわからない感じです...

今回はBabelを使って仕様段階のES6を使ってみました。

使用感としては、短いスクリプトかくなら今はまだCoffeeScriptの方がいいかも
って感じです。

ですが、ゆくゆくはES6が標準化されていくことを考え、使い慣れていきたいですね。
結局は書きやすいもので書くのが一番だし、適材適所ですね。(笑)

P.S.
本も買ったしやるしかないな。

速習ECMAScript6: 次世代の標準JavaScriptを今すぐマスター！