nds meetup8 lt
TRANSCRIPT
ついついクラシックスタイルで書いてしまう人のための
ES6モダンシンタックス弾丸ツアー
NDS Meetup #8 LTushiboy
WARNING!
フルスピードで飛ばしていきます。
お聞き苦しい点が多々あるかと思いますが、ご容赦ください。
2
ES6 を三行で
● JavaScript の標準言語仕様 ECMAScript の第６版（正式名称： ECMAScript 2015）
● 今年（２０１５年）６月にリリース
● いろいろ機能追加
3
追加された機能
クラス
モジュール
アロー関数
オブジェクトリテラル拡張
ブロックスコープ
デフォルトパラメータ
レストパラメータ
スプレッドオペレータ
分割代入
イテレータ
テンプレートリテラル
Promise
Generator
Map, Set
型付配列
Symbol
Proxy, Reflect
String
RegExp
Array
Object, Math, Number
末尾最適化
4
今日話すところ
クラス
モジュール
アロー関数
オブジェクトリテラル拡張
ブロックスコープ
デフォルトパラメータ
レストパラメータ
スプレッドオペレータ
分割代入
イテレータ
テンプレートリテラル
Promise
Generator
Map, Set
型付配列
Symbol
Proxy, Reflect
String
RegExp
Array
Object, Math, Number
末尾最適化この辺りのだけ
5
では、用途ごとのクラシックスタイルと
モダンスタイルを見ていきます
6
無名関数を使うアロー関数
7
無名関数を使う
// 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
無名関数を使う
// 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
変数名と同じ名前のオブジェクトプロパティを作る
// classicvar name = 'alice';var age = 20;
var obj = { name: name, age: age};console.log(obj); // { name: 'alice', age: 30 }
11
変数名と同じ名前のオブジェクトプロパティを作る
// mordenvar name = 'alice';var age = 20;
var obj = { name, age};console.log(obj); // { name: 'alice', age: 30 }
Point
12
変数の値をオブジェクトプロパティ名に使う
オブジェクトリテラル拡張
13
変数の値をオブジェクトプロパティ名に使う
// classicvar key = 'age';
var obj = { name: 'alice'};obj[key] = 50;
console.log(obj); // { name: 'alice', age: 50 }
14
変数の値をオブジェクトプロパティ名に使う
// mordenvar key = 'age';
var obj = { name: 'alice', [key]: 50};
console.log(obj); // { name: 'alice', age: 50 }
Point
15
オブジェクトにメソッドを定義するオブジェクトリテラル拡
張
16
オブジェクトにメソッドを定義する
// classicvar obj = { name: 'alice', greet: function() { console.log(this.name); }};
obj.greet(); // 'alice'
17
オブジェクトにメソッドを定義する
// mordenvar obj = { name: 'alice', greet() { console.log(this.name); }};obj.greet();
Point
18
関数の引数にデフォルト値を指定するデフォルトパラメータ
19
関数の引数にデフォルト値を指定する
// classicfunction f(x, y) { if (y === undefined) { y = 1; } return x + y;}console.log(f(1)); // 2
20
関数の引数にデフォルト値を指定する
// mordenfunction f(x, y=1) { return x + y;}console.log(f(1)); // 2
Point
21
可変長引数を持つ関数を作るレストパラメータ
22
可変長引数を持つ関数を作る
// classicfunction 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
可変長引数を持つ関数を作る
// mordenfunction e(x, ...y) { return x + y.reduce((a, b) => a + b);}console.log(e('hoge', 1, 2, 3)); // hoge6
Point
24
配列を連結して配列を作るスプレッドオペレータ
25
配列を連結して配列を作る
// classicvar src = [3];var other = [1, 2].concat(src);console.log(other); // [1, 2, 3]
26
配列を連結して配列を作る
// mordenvar src = [3];var other = [1, 2, ...src];console.log(other); // [1, 2, 3]
Point
27
オブジェクトを展開して別のオブジェクトを作る
スプレッドオペレータ
28
オブジェクトを展開して別のオブジェクトを作る
// classicvar obj = { name: 'alice'};var other = { name: obj.name, age: 20};console.log(other); // { name: 'alice', age: 20 }
29
オブジェクトを展開して別のオブジェクトを作る
// mordenvar obj = { name: 'alice'};var other = { ...obj, age: 20};console.log(other); // { name: 'alice', age: 20 }
Point
30
配列を展開して関数の引数に渡すスプレッドオペレータ
31
配列を展開して関数の引数に渡す
function x(a, b, c) { return a + b + c;}var params = [1, 2, 3];
// classicconsole.log(x.apply(null, params)); // 6
32
配列を展開して関数の引数に渡す
function x(a, b, c) { return a + b + c;}var params = [1, 2, 3];
// mordenconsole.log(x(...params)); // 6
Point
33
文字列を 1文字ずつ分割した配列にするスプレッドオペレータ
34
文字列を 1文字ずつ分割した配列にする
var str = 'foo';
// classicvar chars = str.split('');console.log(chars); // ['f', 'o', 'o']
35
文字列を 1文字ずつ分割した配列にする
var str = 'foo';
// mordenvar chars = [...str];console.log(chars); // ['f', 'o', 'o']
Point
36
配列の特定要素を変数に取り出す分割代入
37
配列の特定要素を変数に取り出す
var list = ['alice', false, 20];
// classicvar name = list[0];var age = list[2];
console.log(name, age); // 'alice' 20
38
配列の特定要素を変数に取り出す
var list = ['alice', false, 20];
// mordenvar [ name, , age] = list;
console.log(name, age); // 'alice', 20
Point
39
変数の値を入れ替える分割代入
40
変数の値を入れ替える
var a = 1;var b = 2;
// classicvar tmp = b;b = a;a = tmp;console.log(a, b); // 2 1
41
変数の値を入れ替える
var a = 1;var b = 2;
// morden[b, a] = [a, b];console.log(a, b); // 2 1
Point
42
オブジェクトプロパティを変数に取り出す分割代入
43
オブジェクトプロパティを変数に取り出す
var obj = { name: 'alice', age: 20, enable: false};// classicvar name = obj.name;var age = obj.age;console.log(name, age); // 'alice' 20
44
オブジェクトプロパティを変数に取り出す
var obj = { name: 'alice', age: 20, enable: false};// mordenvar { name, age } = obj;console.log(name, age); // 'alice' 20
Point
45
文字列に変数を埋め込むテンプレートリテラル
46
文字列に変数を埋め込む
// classicvar name = 'alice';console.log('Hello! ' + name + '!'); // Hello! alice!
var items = { apple: 5, orange: 4};console.log('total: ' + (items.apple + items.orange)); // total: 9
47
文字列に変数を埋め込む
// mordenvar 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
複数行の文字列を使う
// classicvar text = [ 'line 1', 'line 2', 'line 3'].join('\n');
console.log(text); // line 1\nline 2\nline 3
50
複数行の文字列を使う
// mordenvar text = `line 1line 2line 3`;
console.log(text); // line 1\nline 2\nline 3
Point
51
もっと知りたい方は
WEB+DB PRESS vol.87とか読むと良いと思います
52
Enjoy ES6!
53