ES6/7(Babel)文法メモ

文字列テンプレート

変数展開

const str = 'hello';
`value: ${str}`

# => 'value: hello'

改行

const message = `hello!
world!`;

モジュール

モジュールをエクスポート

export const Hoge = {
  doSomething() {
    ...
  }
};

デフォルトモジュールをエクスポート

const Hoge = {
  doSomething() {
    ...
  }
};

export default Hoge;

モジュールをインポート

import {A, B} from './Hoge';

モジュールを名前を変えてインポート

import {A as MyA} from './Hoge';

デフォルトモジュールをインポート

import X from './Hoge';

デフォルトモジュールとそれ以外のモジュールを同時にインポート

import X, {A, B} from './Hoge';

変数

レキシカルスコープ変数

constは再代入不可。letは再代入可。

const a = 1;

let b = 2;
b += 1;

Destructuring

const props = {
  a: 1, b: 2, c: 3
};
const {a, b, c} = props;

[a, b, c]

# => [1, 2, 3]

オブジェクトリテラル

変数経由のプロパティ名にアクセス

const key = 'name';
{[key]: 'hoge'}

# => { name: 'hoge'}

プロパティ名の省略

const code = 101;
const message = 'hello';

{code, message}

#=> {code: 101, message: 'hello'}

関数

デフォルト引数

function hoge(a, b, c = 0) {
  ...
}

hoge(1, 2);
hoge(1, 2, 3);

function fuga({a, b, c = 0}) {
  ...
}

fuga({a:1, b:2});
fuga({a:1, b:2, c:3});

アロー

_.map([1, 2, 3], (x) => { return x * x; });
_.map([1, 2, 3], x => x * x);

# => [1, 4, 9]

クラスフィールド/クラスメソッド

クラスフィールド

class Hoge {
  static name = 'hoge';
}

Hoge.name;
# => 'hoge'

クラスメソッド

class Hoge {
  static x2(value) {
    return value * 2;
  }
}

Hoge.x2(5);

# => 10

クラス内からクラスメソッドへのアクセス

class Hoge {
  static x2(value) {
    return value * 2;
  }

  static x4(value) {
    return this.constructor.x2(value) * 2;
  }
}

Hoge.x4(5);

# => 20

継承

クラス継承

class Concrete extends Abstract {
  ...
}

親クラスのメソッド呼び出し

constructor(props) {
  super(props);

  ...
}