いまからはじめるECMAScript 6

いまからはじめるECMAScript 6

1. 1. いまからはじめるECMAScript 6 by Shogo Sensui 2015.06.13 HTML5オールスターズ勉強会 https://www.flickr.com/photos/jakeandlindsay/5524669257
2. 2. s Shogo Sensui a.k.a 1000ch
3. 3. Profile Webフロントエンドエンジニア iOSネイティブエンジニア HTML5全般 + Node.js + iOS/Mac #perfmatters
4. 4. s フロントエンド エンジニア 養成読本
5. 5. WEB+DB PRESS Webフロントエンド 最前線
6. 6. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信
7. 7. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • 国内外のフロントエンド情報をキュレーション • 週に一度水曜日に配信 https://frontendweekly.tokyo
8. 8. Agenda JavaScript と ECMAScript ECMAScript 6 の主な新機能 ECMAScript 6 との付き合い方 まとめ
9. 9. JavaScript と ECMAScript
10. 10. 1995年、JavaScript爆誕 Javaが流行ってるから JavaScriptという名前にしよう Brendan Eich氏
11. 11. なんだと？こっちはJScriptだ！ これがJavaScriptだ！ 待て待て、標準化しよう…
12. 12. ECMAScript JavaScript JScript ActionScript 標準化された言語仕様（ECMAScript）と それを実装する各言語（JavaScriptなど） ECMAScriptの立ち位置
13. 13. 色々な意見がJavaScriptに 影響してきた etc…
14. 14. ECMAScript 2015?
15. 15. ECMAScript 6 の主な新機能 https://www.flickr.com/photos/12355559@N03/18012486244
16. 16. let const { var foo = 10; let bar = 100; const baz = 1000; console.log(foo, bar, baz); // => 10, 100, 1000 } console.log(foo, bar, baz); // => 10, undefined, undefined ES6
17. 17. Arrow Functions $('button').on('click', function (e) { console.log(this); // => button }); $('button').on('click', (e) => { console.log(this); // => window }); $('button').on('click', e => console.log(this)); ! ! ES5 ES6 ES6
18. 18. import export // export.js export function foo() { console.log('foo'); } export function bar() { console.log('bar'); } // import.js import { foo, bar } from './export.js'; foo(); // => foo bar(); // => bar ES6
19. 19. Rest Parameters let x = 10, y = 20, z = 30; function max(array) { return Math.max.apply(null, array); } max([x, y, z]); // => 30 function max(...array) { return Math.max.apply(null, array); } max(x, y, z); // => 30 ! ES6 ES6
20. 20. Default Parameters function add(arg1, arg2) { if (arg1 === undefined) { arg1 = 0; } if (arg2 === undefined) { arg2 = 0; } return arg1 + arg2; } function add(arg1 = 0, arg2 = 0) { return arg1 + arg2; } ! ES5 ES6
21. 21. let hundred = 100; let multiple = function (x, y) { return x * y; } console.log(`hundred is ${number}`); // => hundred is 100 console.log(`hundred * 10 is ${multiple(number, 10)}`); // => hundred * 10 is 1000 Template Strings ES6
22. 22. function Human (message) { this.message = message; } Human.prototype.hello = function () { console.log(this.message); } class Human { constructor(message) { this.message = message; } hello() { console.log(this.message); } } Class! ES6 ES5
23. 23. function* toThree() { yield 1; yield 2; return 3; } console.log(toThree()); // => 1 console.log(toThree()); // => 2 console.log(toThree()); // => 3 Generator Functions ES6
24. 24. Proxy var person = { firstName: 'Taro', lastName: 'Tanaka' }; var interceptor = { set: function (target, name, value, receiver) { console.log(name + ' is changed.'); target[name] = value; } get: function (target, name, receiver) { return name + ' is ' target[name]; } }; person = new Proxy(person, interceptor); ES6
25. 25. Symbol var sym1 = Symbol(); var sym2 = Symbol("foo"); var sym3 = Symbol("foo"); Symbol("foo") === Symbol("foo"); // => false ES6
26. 26. Promise new Promise(function (resolve, reject) { resolve(10); }).then(function (value) { return value * 10; }).then(function (value) { console.log(value); // 100 }); ES6
27. 27. Set WeakSet var set1 = new Set([1, 2, 2, 3, 3, 3, 4, 4, 4, 4]); // => [1, 2, 3, 4] var set2 = new Set(set1); var set3 = new Set(set1.entries()); var set4 = new Set(set1.keys()); ES6
28. 28. Map WeakMap var arrayKey = []; var map = new Map(); map.set(1, 'This is a value'); map.set(arrayKey, 'This is also value'); map.get(1); // This is a value map.get(arrayKey); // This is also value ES6
29. 29. ECMAScript 6 との付き合い方 https://www.flickr.com/photos/63771280@N08/18643164795/
30. 30. ※2015年6月13日時点 × ×
31. 31. ECMAScript 6 compatibility table
32. 32. ES6が如何に素晴らしくても サポートが進まないことには 導入できない？×
33. 33. ES6 ES5" トランスパイラを使う ES6のコードをコンパイルして、サポートしていない ブラウザでも実行可能なコードに変換する
34. 34. Traceur Compiler
35. 35. Babel
36. 36. 限定された環境で使う サポートが比較的進んでいるChromeやFirefoxの 拡張機能であれば思う存分使える
37. 37. AltJSで取り入れていく TypeScriptやFlowではES6の構文サポートが進んでいる
38. 38. Node.js 0.12∼ ES6の機能が--harmonyフラグ付きで利用可能 iojsならフラグも不要になっている
39. 39. まとめ
40. 40. ブラウザサポートが十分になる のは、まだまだ先の話・・・ https://www.flickr.com/photos/enebisu/18006622463
41. 41. 理由をつけてやらない間に 次なる仕様(ES7・ES8)が出てくる
42. 42. 使える機能から徐々に取り入れて 今のうちに慣れていく
43. 43. おわり + +ShogoSensui $ % 1000ch 1000ch