ついついクラシックスタイルで書いてしまう人のためのES6モダンシンタックス弾丸ツアー

1. ついついクラシックスタイルで書いてしまう人のための
ES6モダンシンタックス
弾丸ツアー
NDS Meetup #8 LT
ushiboy

2. WARNING!
フルスピードで飛ばしていきます。
お聞き苦しい点が多々あるかと思いますが、ご容赦ください。
2

3. ES6 を三行で
● JavaScriptの標準言語仕様 ECMAScriptの第６版
（正式名称：ECMAScript 2015）
● 今年（２０１５年）６月にリリース
● いろいろ機能追加
3

4. 追加された機能
クラス
モジュール
アロー関数
オブジェクトリテラル
拡張
ブロックスコープ
デフォルトパラメータ
レストパラメータ
スプレッドオペレータ
分割代入
イテレータ
テンプレートリテラル
Promise
Generator
Map, Set
型付配列
Symbol
Proxy, Reflect
String
RegExp
Array
Object, Math, Number
末尾最適化
4

5. 今日話すところ
クラス
モジュール
アロー関数
オブジェクトリテラル
拡張
ブロックスコープ
デフォルトパラメータ
レストパラメータ
スプレッドオペレータ
分割代入
イテレータ
テンプレートリテラル
Promise
Generator
Map, Set
型付配列
Symbol
Proxy, Reflect
String
RegExp
Array
Object, Math, Number
末尾最適化
この辺りのだけ
5

6. では、用途ごとのクラシックスタイルと
モダンスタイルを見ていきます
6

7. 無名関数を使う
アロー関数
7

8. 無名関数を使う
// classic
[1, 2, 3].forEach(function(x, i) {
return i + x;
});
[1, 2, 3].filter(function(x) {
return x % 2 === 0;
});
setTimeout(function() {
console.log('Hello! function world!');
}, 1000);
8

9. 無名関数を使う
// morden
[1, 2, 3].map((x, i) => {
return i + x;
});
[1, 2, 3].filter(x => x % 2 === 0);
setTimeout(() => {
console.log('Hello! arrow function world!');
}, 1000);
Point
Point
Point
9

10. 変数名と同じ名前の
オブジェクトプロパティを作る
オブジェクトリテラル拡張
10

11. 変数名と同じ名前のオブジェクトプロパティを作る
// classic
var name = 'alice';
var age = 20;
var obj = {
name: name,
age: age
};
console.log(obj); // { name: 'alice', age: 30 }
11

12. 変数名と同じ名前のオブジェクトプロパティを作る
// morden
var name = 'alice';
var age = 20;
var obj = {
name,
age
};
console.log(obj); // { name: 'alice', age: 30 }
Point
12

13. 変数の値をオブジェクトプロパティ名に
使う
オブジェクトリテラル拡張
13

14. 変数の値をオブジェクトプロパティ名に使う
// classic
var key = 'age';
var obj = {
name: 'alice'
};
obj[key] = 50;
console.log(obj); // { name: 'alice', age: 50 }
14

15. 変数の値をオブジェクトプロパティ名に使う
// morden
var key = 'age';
var obj = {
name: 'alice',
[key]: 50
};
console.log(obj); // { name: 'alice', age: 50 }
Point
15

16. オブジェクトにメソッドを定義する
オブジェクトリテラル拡張
16

17. オブジェクトにメソッドを定義する
// classic
var obj = {
name: 'alice',
greet: function() {
console.log(this.name);
}
};
obj.greet(); // 'alice'
17

18. オブジェクトにメソッドを定義する
// morden
var obj = {
name: 'alice',
greet() {
console.log(this.name);
}
};
obj.greet();
Point
18

19. 関数の引数にデフォルト値を指定する
デフォルトパラメータ
19

20. 関数の引数にデフォルト値を指定する
// classic
function f(x, y) {
if (y === undefined) {
y = 1;
}
return x + y;
}
console.log(f(1)); // 2
20

21. 関数の引数にデフォルト値を指定する
// morden
function f(x, y=1) {
return x + y;
}
console.log(f(1)); // 2
Point
21

22. 可変長引数を持つ関数を作る
レストパラメータ
22

23. 可変長引数を持つ関数を作る
// classic
function e(x) {
var y = [].slice.call(arguments, 1);
return x + y.reduce(function(a, b) { return a + b; });
}
console.log(e('hoge', 1, 2, 3)); // hoge6
23

24. 可変長引数を持つ関数を作る
// morden
function e(x, ...y) {
return x + y.reduce((a, b) => a + b);
}
console.log(e('hoge', 1, 2, 3)); // hoge6
Point
24

25. 配列を連結して配列を作る
スプレッドオペレータ
25

26. 配列を連結して配列を作る
// classic
var src = [3];
var other = [1, 2].concat(src);
console.log(other); // [1, 2, 3]
26

27. 配列を連結して配列を作る
// morden
var src = [3];
var other = [1, 2, ...src];
console.log(other); // [1, 2, 3]
Point
27

28. オブジェクトを展開して
別のオブジェクトを作る
スプレッドオペレータ
28

29. オブジェクトを展開して別のオブジェクトを作る
// classic
var obj = {
name: 'alice'
};
var other = {
name: obj.name,
age: 20
};
console.log(other); // { name: 'alice', age: 20 }
29

30. オブジェクトを展開して別のオブジェクトを作る
// morden
var obj = {
name: 'alice'
};
var other = {
...obj,
age: 20
};
console.log(other); // { name: 'alice', age: 20 }
Point
30

31. 配列を展開して関数の引数に渡す
スプレッドオペレータ
31

32. 配列を展開して関数の引数に渡す
function x(a, b, c) {
return a + b + c;
}
var params = [1, 2, 3];
// classic
console.log(x.apply(null, params)); // 6
32

33. 配列を展開して関数の引数に渡す
function x(a, b, c) {
return a + b + c;
}
var params = [1, 2, 3];
// morden
console.log(x(...params)); // 6
Point
33

34. 文字列を1文字ずつ分割した配列にする
スプレッドオペレータ
34

35. 文字列を1文字ずつ分割した配列にする
var str = 'foo';
// classic
var chars = str.split('');
console.log(chars); // ['f', 'o', 'o']
35

36. 文字列を1文字ずつ分割した配列にする
var str = 'foo';
// morden
var chars = [...str];
console.log(chars); // ['f', 'o', 'o']
Point
36

37. 配列の特定要素を変数に取り出す
分割代入
37

38. 配列の特定要素を変数に取り出す
var list = ['alice', false, 20];
// classic
var name = list[0];
var age = list[2];
console.log(name, age); // 'alice' 20
38

39. 配列の特定要素を変数に取り出す
var list = ['alice', false, 20];
// morden
var [ name, , age] = list;
console.log(name, age); // 'alice', 20
Point
39

40. 変数の値を入れ替える
分割代入
40

41. 変数の値を入れ替える
var a = 1;
var b = 2;
// classic
var tmp = b;
b = a;
a = tmp;
console.log(a, b); // 2 1
41

42. 変数の値を入れ替える
var a = 1;
var b = 2;
// morden
[b, a] = [a, b];
console.log(a, b); // 2 1
Point
42

43. オブジェクトプロパティを変数に取り出
す
分割代入
43

44. オブジェクトプロパティを変数に取り出す
var obj = {
name: 'alice',
age: 20,
enable: false
};
// classic
var name = obj.name;
var age = obj.age;
console.log(name, age); // 'alice' 20
44

45. オブジェクトプロパティを変数に取り出す
var obj = {
name: 'alice',
age: 20,
enable: false
};
// morden
var { name, age } = obj;
console.log(name, age); // 'alice' 20
Point
45

46. 文字列に変数を埋め込む
テンプレートリテラル
46

47. 文字列に変数を埋め込む
// classic
var name = 'alice';
console.log('Hello! ' + name + '!'); // Hello! alice!
var items = {
apple: 5,
orange: 4
};
console.log('total: ' + (items.apple + items.orange)); // total: 9
47

48. 文字列に変数を埋め込む
// morden
var name = 'alice';
console.log(`Hello! ${name}!`); // Hello! alice!
var items = {
apple: 5,
orange: 4
};
console.log(`total: ${items.apple + items.orange}`); // total: 9
Point
Point
48

49. 複数行の文字列を使う
テンプレートリテラル
49

50. 複数行の文字列を使う
// classic
var text = [
'line 1',
'line 2',
'line 3'
].join('¥n');
console.log(text); // line 1¥nline 2¥nline 3
50

51. 複数行の文字列を使う
// morden
var text = `line 1
line 2
line 3`;
console.log(text); // line 1¥nline 2¥nline 3
Point
51

52. もっと知りたい方は
WEB+DB PRESS vol.87とか読むと良いと思います
52

53. Enjoy ES6!
53