ReactjsのES6/ES7ってなんぞ！

React.jsを触ってみようと思い、一人React.js Advent Calendar 2014を読んでいます。

その中でES6/7について触れている箇所があったのですが、ES6/7について無知な僕は名前をあげられてもそれが何なのか分かりません… と言うことで、それぞれの機能がどういったモノなのか調べました。

React.js で使える ES6/7の機能

React.jsのJSXで使用できる機能について、まんま引用すると…

この辺りのfeatureを使用することが出来るようです。
es6-arrow-functions
es6-object-concise-method
es6-object-short-notation
es6-classes
es6-rest-params
es6-templates
es6-destructuring
es7-spread-property
https://github.com/facebook/react/blob/master/vendor/fbtransform/visitors.js#L30-L37

といった感じらしい。

Arrow Functions

参考

これはCoffeeScriptを使っていればお馴染み。 =>を使って関数の定義ができ、コンテキスト(this)が固定される

([param] [, param]) => {
   statements
}

param => expression

Object Concise Method

参考

Objectリテラルでのメソッド定義を簡潔に記述できるみたいです。

Before

{
    fn: function fn() {
        statement...
    }
}

After

{
    fn() {
        statement...
    }
}

Object Short Notation

参考

こちらもObjectリテラルを簡潔に記述できるようになるようです。

Before

var name = 'Roto, level = 99;
{name: name, level: level}

After

var name = 'Roto, level = 99;
{name, level}

他にも継承など、基本的な機能があるようです。

Classes

参考で紹介されていました。

コンストラクタ関数と、その関数のPrototypeオブジェクトへプロパティ/メソッドを定義できる。

Before

function Monster (name){
    this.name = name;
}
Monster.prototype.attack = function(){
    console.log(this.name + 'の攻撃!!');
}

After

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

    attack(){
        console.log(this.name + 'の攻撃ぃいいい!!');
    }
}

これもArrow Functions同様、CoffeeScriptのお陰で違和感がない。

Rest Params

参考

関数の引数として、可変長の引数を定義できるようになるようです。

store.add = function(category, ...items) {
  items.forEach(function (item) {
    store.aisle[category].push(item);
  });
};

Templates

参考

${ }を使って文字列の中に式を展開するような事ができるようです。

var x = 1, y = 2;
`${ x } + ${ y } = ${ x + y }` // "1 + 2 = 3"

Destructuring

参考

配列、オブジェクトを多重代入の様に展開できるようです。

配列の場合…

var [m, d, y] = [3, 14, 1977];
//  m = 3, d = 14, y = 1977;

オブジェクトの場合…

function today() { return { d: 6, m: 2, y: 2013 }; }
var { m: month, y: year } = today(); // month = 2, year = 2013

これを利用して、関数の引数で受け取るオブジェクトを個々のローカル変数として展開できる。

books.forEach(function ({ title: title, author: author }) { console.log(title, author) }; )

Spread Property

参考

ES6の時点では、配列、関数呼び出しなどでSpread operatorなるものが使えており、これがObjectに対応したようです。

そもそも、Spred Operatorとはなんぞや…と。どうやら_.extend的な動きをする？ように見える。(使う時ちゃんと調べよう)

終わりに

ちゃんと追えていないモノが多すぎて、なかなか最初の一歩が軽快にすすまぬ…。