eslint-config-airbnbを使ってES6の記法を実現する

airbnbのeslintを導入すると強制的にES6の文法で書かざるを得なくなります。これが非常に便利なのですが、その中で新たに知った記法で目立った点を記載しておきます。

Reactのサンプルコードとか実際に書いてみたものの、どうやってES6の記法に読み替えるんだろう、というケースにお使いください。

プロパティ省略記法

Actionまわりで書くことが多いもの

ES5

export const addItem = createAction(ADD_ITEM, (index, id) => ({ index:index, id:id }));

ES6

export const addItem = createAction(ADD_ITEM, (index, id) => ({ index, id }));

レストパラメータ

…に続けて書いた仮引数は、引数を配列として受け取ることができるようになります。

    const renderCheckbox = ({ input, label, meta: { touched, error }, children, ...custom }) => (
      <Checkbox
        {...input}
        {...custom}
      />
    );

コンピューテッドプロパティ

今までだとオブジェクトを生成したあとで中の要素を作る必要があったが（やろうとするとundefinedになった）、ES6では括弧で囲うことで直接指定できるようになった。

ES5

var obj = {};
obj['hoge'] = 0;

ES6

var obj = {
  ['hoge']: 0,
};

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

導入方法など

http://qiita.com/kjirou/items/65a781318b6506687fd3

参考

https://blog.hello-world.jp.net/javascript/4662/