Save 37% off PRO during our Black Friday Sale! »

いまからはじめるECMAScript 6 / Begin ECMAScript6

いまからはじめるECMAScript 6 / Begin ECMAScript6

2015年6月13日に行われたHTML5オールスターズ勉強会の「いまからはじめるECMAScript 6」のセッションの資料です。

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

June 13, 2015
Tweet

Transcript

  1. ͍·͔Β͸͡ΊΔECMAScript 6 by Shogo Sensui 2015.06.13 HTML5Φʔϧελʔζษڧձ https://www.flickr.com/photos/jakeandlindsay/5524669257

  2. s Shogo Sensui a.k.a 1000ch

  3. Profile WebϑϩϯτΤϯυΤϯδχΞ iOSωΠςΟϒΤϯδχΞ HTML5શൠ + Node.js + iOS/Mac #perfmatters

  4. None
  5. s ϑϩϯτΤϯυ ΤϯδχΞ ཆ੒ಡຊ

  6. WEB+DB PRESS WebϑϩϯτΤϯυ ࠷લઢ

  7. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ •

    िʹҰ౓ਫ༵೔ʹ഑৴
  8. @cssradar @hiloki @t32k @1000ch @ahomu Frontend Weekly • ࠃ಺֎ͷϑϩϯτΤϯυ৘ใΛΩϡϨʔγϣϯ •

    िʹҰ౓ਫ༵೔ʹ഑৴ https://frontendweekly.tokyo
  9. Agenda JavaScript ͱ ECMAScript ECMAScript 6 ͷओͳ৽ػೳ ECMAScript 6 ͱͷ෇͖߹͍ํ

    ·ͱΊ
  10. JavaScript ͱ ECMAScript

  11. 1995೥ɺJavaScriptര஀ Java͕ྲྀߦͬͯΔ͔Β JavaScriptͱ͍͏໊લʹ͠Α͏ Brendan Eichࢯ

  12. ͳΜͩͱʁͬͪ͜͸JScriptͩʂ ͜Ε͕JavaScriptͩʂ ଴ͯ଴ͯɺඪ४Խ͠Α͏…

  13. ECMAScript JavaScript JScript ActionScript ඪ४Խ͞Εͨݴޠ࢓༷ʢECMAScriptʣͱ ͦΕΛ࣮૷͢Δ֤ݴޠʢJavaScriptͳͲʣ ECMAScriptͷཱͪҐஔ

  14. ৭ʑͳҙݟ͕JavaScriptʹ Өڹ͖ͯͨ͠ etc…

  15. ECMAScript 2015?

  16. ECMAScript 6 ͷओͳ৽ػೳ https://www.flickr.com/photos/12355559@N03/18012486244

  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. function* toThree() { yield 1; yield 2; return 3; }

    console.log(toThree()); // => 1 console.log(toThree()); // => 2 console.log(toThree()); // => 3 Generator Functions ES6
  25. 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
  26. Symbol var sym1 = Symbol(); var sym2 = Symbol("foo"); var

    sym3 = Symbol("foo"); Symbol("foo") === Symbol("foo"); // => false ES6
  27. Promise new Promise(function (resolve, reject) { resolve(10); }).then(function (value) {

    return value * 10; }).then(function (value) { console.log(value); // 100 }); ES6
  28. 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
  29. 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
  30. ECMAScript 6 ͱͷ෇͖߹͍ํ https://www.flickr.com/photos/63771280@N08/18643164795/

  31. ※2015೥6݄13೔࣌఺ × ×

  32. ECMAScript 6 compatibility table

  33. ES6͕೗Կʹૉ੖Βͯ͘͠΋ αϙʔτ͕ਐ·ͳ͍͜ͱʹ͸ ಋೖͰ͖ͳ͍ʁ ×

  34. ES6 ES5 τϥϯεύΠϥΛ࢖͏ ES6ͷίʔυΛίϯύΠϧͯ͠ɺαϙʔτ͍ͯ͠ͳ͍ ϒϥ΢βͰ΋࣮ߦՄೳͳίʔυʹม׵͢Δ

  35. Traceur Compiler

  36. Babel

  37. ݶఆ͞Εͨ؀ڥͰ࢖͏ αϙʔτ͕ൺֱతਐΜͰ͍ΔChrome΍Firefoxͷ ֦ுػೳͰ͋Ε͹ࢥ͏ଘ෼࢖͑Δ

  38. AltJSͰऔΓೖΕ͍ͯ͘ TypeScript΍FlowͰ͸ES6ͷߏจαϙʔτ͕ਐΜͰ͍Δ

  39. Node.js 0.12ʙ ES6ͷػೳ͕--harmonyϑϥά෇͖Ͱར༻Մೳ iojsͳΒϑϥά΋ෆཁʹͳ͍ͬͯΔ

  40. ·ͱΊ

  41. ϒϥ΢βαϙʔτ͕ े෼ʹͳΔͷ͸·ͩ·ͩઌͷ࿩…

  42. ཧ༝Λ͚ͭͯ΍Βͳ͍ؒʹ ࣍ͳΔ࢓༷(ES7ɾES8)͕ग़ͯ͘Δ

  43. ࢖͑Δػೳ͔ΒঃʑʹऔΓೖΕͯ ࠓͷ͏ͪʹ׳Ε͍ͯ͘

  44. ͓ΘΓ +ShogoSensui 1000ch 1000ch