ES6/7(Babel)文法メモ

More than 3 years have passed since last update.


文字列テンプレート


変数展開

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);

...
}