コンパイラかく語りき

import { Fun } from 'programming'

ついに!ES6の勉強を始める

どうも!chuckです。

私事ですが、会社の新人研修が終わりました。今日から心機一転、気合をいれていこうと思います。

 

さて、今年はJavaScriptの標準であるECMAScript(ES)の新バージョンであるES6が出ます。それに先立ち、国内でも多くの方々がES6の勉強を始めていることかと思います。

僕もずっと勉強したかったんですが、二の足を踏んでいました。

 

しかし、研修も終わり実践に投入されることもあり、本格的に勉強を始めていきたいと思います。

 

まずリサーチ

参考にしたサイト様のリンクとともに。

yutapon.hatenablog.com

 

どうやらBabel(旧6to5)というトランスパイラがあるらしい。なんか聞いたことあるぞ

 

トランスパイラー

ちょっとググってみたんですが、JavaScriptにまつわる記事ばかりが出てきました。主にJS6をJS5 に変換してくれるという文脈で。そういうことだと理解しておきます。

 

つまりBabelを使えばES6を先取りして勉強できるということですね!

 

 

安定のよしこさん

Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg

こちらのスライドがホントに素敵!やっぱりこの人すごい。イベントに頻繁に顔を出しているようなので、いつか会ってみたいヽ(´Д`;)ノ

 

リサーチ終了。

環境を整えるのはめんどくさいので、まずは実際にコードを書いてみます。新機能ごとに、上記のスライドを写経させていただきます。

 

アロー関数

gist.github.com

  かなりコードが短くなりますね。慣れたら便利そうです!

 

テンプレート文字列

gist.github.com

変数埋め込みがカンタンにできる!いちいちクォーテーションを切って+で連結する必要がないんですね(´;ω;`)PHPっぽくて便利です。

 

デフォルト引数

gist.github.com

これも便利!ただ、デフォルト値のない引数との順番に気をつけなきゃ。

 

可変長引数

gist.github.com

Javaのmain(String args[])みたいな感じかな??(全然違うかも)

 

スプレット演算子

gist.github.com

「もうapplyを使わなくていいんです!やったね!」

うっ、applyが何なのかも知らない…ヽ(´Д`;)ノ 勉強不足…

でも配列が展開できるのは便利!!

 

強化されたオブジェクト型

gist.github.com

動的な値をキーにセットできるとか。でもなぜ[rand]と角括弧で囲むんだろう… 誰かに聞こう

 

 

出勤時間なので今日はここらで!続きはまた明日書きますヽ(=´▽`=)ノ