しびら

技術ネタのメモとか。

ES2015(ES6)をBabelでtranspileして動かしてみる

   

babel

ES2015(ES6)とは

ECMAScriptはJavaScriptのブラウザと密接に関わる要素を除外してコアとなる仕様を標準化したものです。ECMAScript2015はECMAScriptの6th editionを指しています。新しい文法などが追加されており、JavaScriptの記述がよりシンプルになりそうです。

Babelとは

しかしながら、今の段階ではブラウザがES2015に対応しておらず、簡単に確認することができません。そのためBabelを使ってES2015向けに書いたコードをtranspile(トランスパイル)します。

Babelの導入

npmを使用します。

生成されたpackage.jsonに各種dependenciesが追加されているか確認しましょう。

次にglupfile.jsを作成します。

src/app.jsの記述が変更されるかを監視して、変更されたらtranspileされて、build/app.jsに変換結果が出力されます。

では実際にES2015なコードを書いてみましょう。

変換前(ES2015 ES6のコード)

 

Babelで変換した結果

glupを実行すると自動的にbuild/app.jsに結果が出力されます。

先ほどのコードと何が変わったでしょうか?letはvarになっていますね。console.logの出力も文字列結合になっています。addのfunction記述の簡略が戻っていますね。Function Argumentsもfor文でがんばって生成するようになりました。

swapしてみる

ES6はDestucting assignmentが提案されており、配列やオブジェクトのリテラルの構築を写す構文を使用して、配列かオブジェクトからデータを取り出すことができます。この仕組みを使うと変数の値を入れ替えるコードを1行で書けます。

このswapのコードはどうなるでしょうか

変換後はこちら。

_refというtemporaryな変数を用意して変換してくれていますね。この_refを使っていたらどうなるでしょうか。

結果は以下

_refが使われていることを認識してtemporaryな変数として_refではなく_ref2を使うようになりました。

ではこれではどうでしょうか。

結果は以下

流石に認識せず_refを使ってますね。_refの結果も出力されました。

まあこんな書き方はしないので問題ないですが。

 

その他

ES6を勉強したい方は、以下の動画がわかりやすいです。(英語ですが)

あとは動画中に説明がありますが、とりあえず触ってみたい(開発環境を整えるのが面倒くさい)場合はjsbinでコード書けます。

 - Javascript , , , ,