ES6のチートシート

Shunsuke Sawada

ES6の特徴的な部分。
これだけじゃないだろうけど、とりあえず便利そうなやつを覚え書き。

ジェネレーター

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// --------------------------------------------------------
// Generator
// next()で次のyieldに移動
// next()はステップを進めるだけなので、実際の処理はvalueで実行

const getWorld = function*() {
  yield fetch('./index.html')
  yield (text) => {
    console.log(text)
  }
}

let g = getWorld()

let res = g.next().value.then(function(res) {
  return res.text()
}).then(function(text) {
  g.next().value(text)
})
// => <html>.......</html>

Template String

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// --------------------------------------------------------
// template string

const partOfStrig = 'sample'
let stringDemo = `------
  first line
  ${partOfStrig}
  third line
------`
console.log(stringDemo)
// => 
// ------
//   first line
//   sample
//   third line
// ------

Destructuring assignment

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// --------------------------------------------------------
// Destructuring assignment
// 分割代入

function calc1({ a, b }) {
  return a + b
}
function calc2({ a = 1, b = 2 }) {
  return a + b
}
console.log(calc1({ a: 1, b: 2 }))
// => 3
console.log(calc2({}))
// => 3

Rest params

javascript
1
2
3
4
5
6
7
8
9
// --------------------------------------------------------
// Rest params
// 残りは配列にまとめてくれる

function restTest(a, b, ...restArgs) {
  console.log(restArgs)
}
restTest(1,2,3,4,5,6,7,8,9,10)
// => [3, 4, 5, 6, 7, 8, 9, 10]

Spread

javascript
1
2
3
4
5
6
7
// --------------------------------------------------------
// Spread

const mine  = { a: 1, b: 2, c: 3 }
const yours = { ...mine, d: 4, e: 5 }
console.log(yours)
// => { a: 1, b: 2, c: 3, b: 4, e: 5 }

Object literal

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// --------------------------------------------------------
// Object literal
// 動的にキーを作れるのは便利

const key = 'key'
let obj = {
  ['test' + key]: 10,                    // testkey: 10
  key,                                   // key: 'key'
  myMethod() { console.log('method') },  // myMethod:  function() {  }
  get getter() { console.log('get') },
  set setter(v) { console.log(v) }
}
console.log(obj.testkey)
// => 10
console.log(obj.key)
// => 'key'
console.log(obj.myMethod())
// => 'method'
console.log(obj.getter) 
// => 'getter'
console.log(obj.setter = 'set!')
// => 'set!'

WeakMap

javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// --------------------------------------------------------
// WeakMap
// オブジェクトをキーとすることができる

let wm = new WeakMap()
let objkey = {}

wm.set(objkey, 100000)

console.log(wm.has(objkey))
// => true
console.log(wm.get(objkey))
// => 100000
console.log(wm.get({}))
// => undefined
objkey = {a: 1}
console.log(wm.get(objkey))
// => undefined

  
こんなコースもあるよ。オススメ。
https://es6.io/

Shunsuke Sawada

おすすめの記事

webpackを使ってJSとCSSをコンパイルする(ES6 / Sass)
Webpack Uncaught Error: Cannot find module への対処法
爆速でウェブアプリを公開する方法(無料でSSL独自ドメイン)/ React + Typescript + Cloud Function + Firebase Hosting
2