文字列テンプレート
変数展開
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);
...
}