ES2015の現在とESNextの未来

 ES2015の現在とESNextの未来

HTML Party in 鹿児島
で発表した ES2015 の話です。

D76231a2114896dfcc7b79ac69558b79?s=128

Yosuke Furukawa

June 11, 2016
Tweet

Transcript

  1. 3.
  2. 4.
  3. 8.
  4. 9.
  5. 10.
  6. 13.

    JavaScript Traps 1 var test = 'global'; function foo() {

    console.log(test); // global?? local?? if (true) { var test = 'local'; console.log(test); // global?? local?? } } foo();
  7. 14.

    JavaScript Traps 1 var test = 'global'; function foo() {

    console.log(test); // undefined if (true) { var test = 'local'; console.log(test); // local } } foo();
  8. 15.

    JavaScript Traps 1 var test = 'global'; function foo() {

    var test; console.log(test); // undefined if (true) { test = 'local'; console.log(test); // local } } foo(); ࣮ࡍͷ&OHJOFͷ ղऍ͸͜͏ͳΔ
  9. 16.

    JavaScript Traps 1 var test = 'global'; function foo() {

    console.log(test); // global?? local?? if (true) { var test = 'local'; console.log(test); // global?? local?? } } foo(); ר্͖͛ࣄނ
  10. 17.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameInteval = function() { console.log(this.name); // Alice? setInterval(function() { console.log(this.name); // Alice??? }, 1000); }; var alice = new Alice(); alice.printNameInteval();
  11. 18.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameInteval = function() { console.log(this.name); // Alice setInterval(function() { console.log(this.name); // undefined }, 1000); }; var alice = new Alice(); alice.printNameTick();
  12. 19.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameTick = function() { console.log(this.name); // this => Alice setInterval(function() { console.log(this.name); // this => ????? (browser͸window, node ͸ Timer }, 1000); }; var alice = new Alice(); alice.printNameTick(); UIJT͕ࢦ͍ͯ͠Δ΋ͷ͕ มΘΔ
  13. 20.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameTick = function() { console.log(this.name); // Alice setInterval(function() { console.log(this.name); // undefined }, 1000); }; var alice = new Alice(); alice.printNameTick(); ϰΝχογϡUIJT
  14. 21.

    JavaScript Traps 3 var fs = require('fs'); var getLastModified =

    function(dir, done) { fs.readdir(function(err, files) { var timestamps = []; files.forEach(function(file) { fs.stat(file, function(err, stat) { timestamps.push(stat.mtime); if (timestamps.length === files.length) { done(null, timestamps); } }); }); }); }; getLastModified('.', function(err, results) { console.log(results); });
  15. 22.

    JavaScript Traps 3 var fs = require('fs'); var getLastModified =

    function(dir, done) { fs.readdir(function(err, files) { var timestamps = []; files.forEach(function(file) { fs.stat(file, function(err, stat) { timestamps.push(stat.mtime); if (timestamps.length === files.length) { done(null, timestamps); } }); }); }); }; getLastModified('trap3.js', function(err, results) { console.log(results); }); DBMMCBDLIFMM
  16. 23.
  17. 24.
  18. 25.

    ES2015ʁ • JavaScript ͷ৽͍͠ *ن֨* • ਖ਼໊ࣜশ͸ ECMA-262 • ௨শ

    ECMAScript • ECMA International ஂମ͕ఆٛ • ͋͘·Ͱن֨Ͱ࣮͋ͬͯ૷Ͱ͸ͳ͍
  19. 26.

    ES6? ES7? • ECMA-262(௨শ ECMAScript) 6th Edition ͳ ͷͰ ES6

    • ࠓ೥͸ ES7 • ͨͩ΋͏͜ͷݺশ͸ͦΜͳසൟʹ࢖Θͳ͍ • ৄ͘͠͸ޙͰઆ໌͢Δ
  20. 29.

    JavaScript Traps 1 var test = 'global'; function foo() {

    console.log(test); // global?? local?? if (true) { var test = 'local'; console.log(test); // global?? local?? } } foo(); ר্͖͛ࣄނ
  21. 31.

    JavaScript Traps 1 const test = 'global'; function foo() {

    console.log(test); // global if (true) { const test = 'local'; console.log(test); // local } } foo();
  22. 32.

    JavaScript Traps 1 const test = 'global'; function foo() {

    console.log(test); // global if (true) { const test = 'local'; console.log(test); // local } } foo(); LGTM
  23. 33.

    let ͱ const • block scope ͱݴͬͯม਺είʔϓ͕ϒϨʔε{}ͷதʹ ด͡Δ • let

    ͸࠶୅ೖՄೳͳม਺ • const ͸࠶୅ೖෆՄೳͳม਺ • جຊతʹ͸ const Λ࢖ͬͯ let ͸୅ೖՄೳͳ΋ͷʹͷ Έ࢖͏ͷ͕ίʔυϚφʔʹͳΓͭͭ͋Δ
  24. 34.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameTick = function() { console.log(this.name); // Alice setInterval(function() { console.log(this.name); // undefined }, 1000); }; var alice = new Alice(); alice.printNameTick(); ϰΝχογϡUIJT
  25. 36.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameTick = function() { console.log(this.name); // Alice setInterval(() => { console.log(this.name); // Alice }, 1000); }; var alice = new Alice(); alice.printNameTick();
  26. 37.

    JavaScript Traps 2 var Alice = function() { this.name =

    'Alice'; }; Alice.prototype.printNameTick = function() { console.log(this.name); // Alice setInterval(() => { console.log(this.name); // Alice }, 1000); }; var alice = new Alice(); alice.printNameTick(); LGTM
  27. 38.

    arrow function • Ξϩʔؔ਺ͱݴͬͯ this ͕Ξϩʔؔ਺಺ʹଋ റ͞ΕΔ • ؔ਺ͷதͰthisΛ࢖͏࣌ʹ͍͍ͪͪbind͢Δඞ ཁ͕ͳ͍ɻ

    // ͜͏͍͏࣌ʹ΋࢖͏ɻ [1,2,3,4,5,6,7,8,9].filter(n => n % 2 === 0).reduce(prev, curr => prev + curr);
  28. 40.

    class class Alice { constructor() { this.name = 'Alice'; }

    printNameTick() { console.log(this.name); // Alice setInterval(() => { console.log(this.name); // Alice }, 1000); } } var alice = new Alice(); alice.printNameTick(); LVGTM
  29. 41.
  30. 42.

    JavaScript Traps 3 var fs = require('fs'); var getLastModified =

    function(dir, done) { fs.readdir(function(err, files) { var timestamps = []; files.forEach(function(file) { fs.stat(file, function(err, stat) { timestamps.push(stat.mtime); if (timestamps.length === files.length) { done(null, timestamps); } }); }); }); }; getLastModified('trap3.js', function(err, results) { console.log(results); }); DBMMCBDLIFMM
  31. 44.

    JavaScript Traps 3 const fs = require('fs'); const promisify =

    require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => { return readdir(dir).then((files) => { const results = files.map((file) => stat(file)); return Promise.all(results); }).then((stats) => stats.map(stat => stat.mtime)); }; getLastModified('.').then(results => { console.log(results); });
  32. 45.

    JavaScript Traps 3 const fs = require('fs'); const promisify =

    require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => { return readdir(dir).then((files) => { const results = files.map((file) => stat(file)); return Promise.all(results); }).then((stats) => stats.map(stat => stat.mtime)); }; getLastModified('.').then(results => { console.log(results); }); LGTM
  33. 46.

    Promise • ඇಉظॲཧͷݺͼग़͠Λந৅Խͨ͠΋ͷ • then Ͱ੒ޭ࣌ͷݺͼग़͠ɺ catch Ͱࣦഊ࣌ͷྫ֎͕औ ಘͰ͖Δ •

    then Ͱܨ͙͜ͱͰ callback hell Λճආ͢Δ • ※NodeͷAPI͸·ͩPromiseʹͳͬͯͳ͍ͷͰผ్ PromiseԽ͢Δॲཧ(Promisify) ͕ඞཁ
  34. 48.

    JavaScript Traps 3 const co = require('co'); const fs =

    require('fs'); const promisify = require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => co(function* () { const files = yield readdir(dir); const stats = yield files.map((file) => stat(file)); const mtimes = yield stats.map((stat) => stat.mtime); return mtimes; }); getLastModified('.').then(results => { console.log(results); }); LGTM
  35. 55.

    Ͱ΋ɾɾɾ • ϒϥ΢β͝ͱʹ࢖͑Δػೳ͕όϥόϥ • Node.js ΋όʔδϣϯʹΑͬͯ͸࢖͑ͳ͔ͬͨ Γ΋͢Δ • ಛʹ ES

    Modules ͸EdgeҎ֎ͩͱ࢖͑ͳ͍ • transpiler Λ࢖͏ͱIEͱ͔Ͱ΋ಈ͘Α͏ʹͳΔ
  36. 60.
  37. 62.

    ES2016 ͰೖΔ͜ͱ͕ܾ·ͬͯ Δ΋ͷ • ES2016 • ΂͖৐ԋࢉࢠ 2 ** 3

    • Array.prototype.include ͑ͬͦΕ͚ͩʁʁʁ
  38. 67.

    JavaScript Traps 3 const co = require('co'); const fs =

    require('fs'); const promisify = require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => co(function* () { const files = yield readdir(dir); const stats = yield files.map((file) => stat(file)); const mtimes = yield stats.map((stat) => stat.mtime); return mtimes; }); getLastModified('.').then(results => { console.log(results); });
  39. 68.

    JavaScript Traps 3 const co = require('co'); const fs =

    require('fs'); const promisify = require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => co(function* () { const files = yield readdir(dir); const stats = yield files.map((file) => stat(file)); const mtimes = yield stats.map((stat) => stat.mtime); return mtimes; }); getLastModified('.').then(results => { console.log(results); }); ·ͩͪΐͬͱඍົ ओʹ͜ͷล
  40. 69.

    JavaScript Traps 3 const fs = require('fs'); const promisify =

    require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => async function () { const files = await readdir(dir); const stats = await files.map((file) => stat(file)); const mtimes = await stats.map((stat) => stat.mtime); return mtimes; }); getLastModified('.').then(results => { console.log(results); });
  41. 70.

    JavaScript Traps 3 const fs = require('fs'); const promisify =

    require('./promisify'); const readdir = promisify(fs.readdir); const stat = promisify(fs.stat); const getLastModified = (dir) => async function () { const files = await readdir(dir); const stats = await files.map((file) => stat(file)); const mtimes = await stats.map((stat) => stat.mtime); return mtimes; }); getLastModified('.').then(results => { console.log(results); }); LVGTM
  42. 72.
  43. 73.

    SIMD const a = [1.0, 2.0, 3.0, 4.0]; const b

    = [5.0, 6.0, 7.0, 8.0]; const c = []; for(var i=0; i<a.length; i++) { c[i] = a[i] + b[i]; } console.log(c); // 6, 8, 10, 12 •
  44. 74.

    SIMD var a = SIMD.float32x4(1.0, 2.0, 3.0, 4.0); var b

    = SIMD.float32x4(5.0, 6.0, 7.0, 8.0); var c = SIMD.float32x4.add(a,b); console.log(c); // 6, 8, 10, 12 • Faster!
  45. 77.

    ES2015 class ͷදݱྗ͸௿͍ class Alice { constructor() { this.name =

    'Alice' } printNameTick() { console.log(this.name); // Alice setInterval(() => { console.log(this.name); // Alice }, 1000); } } var alice = new Alice(); alice.printNameTick(); member field ͸ constructor ʹهड़ ͠ͳ͍ͱ͍͚ͳ͍
  46. 78.

    class props declarations class Alice { name = 'Alice'; //

    member field static foo = 'foo'; // static ͳfield΋ఆٛͰ͖Δ printNameTick() { console.log(this.name); // Alice setInterval(() => { console.log(this.name); // Alice }, 1000); } } var alice = new Alice(); alice.printNameTick();
  47. 79.

    class props declarations class Alice { name = 'Alice'; //

    member field static foo = 'foo'; // static ͳfield΋ఆٛͰ͖Δ printNameTick() { console.log(this.name); // Alice setInterval(() => { console.log(this.name); // Alice }, 1000); } } var alice = new Alice(); alice.printNameTick(); LVGTM
  48. 80.

    class props declarations • class Ͱ௚઀member/static member Λॻ͚Δ Α͏ʹ͠Α͏ͱ͍͏΋ͷɻ •

    ಛʹ static member ͸ React ͱ͔Ͱ΋Α͘ར ༻͢ΔͷͰॻ͚Δͱخ͍͠ɻ • ͍ͭೖΔ͔͸ෆ໌ɺೖΒͳ͍Մೳੑ΋͋Δɻ
  49. 82.

    private member field class Alice { #name = 'Alice'; //

    private member field printNameTick() { console.log(this.#name); // Alice setInterval(() => { console.log(this.#name); // Alice }, 1000); } } var alice = new Alice(); alice.printNameTick(); ‧‪‬‭⛺è('ω')è⛺䡡‬‪‧
  50. 85.

    Decorator class Alice { #firstname = 'Alice'; // private member

    field #lastname = 'Bob'; // private member field @readonly // decorator fullname() { return `${this.#firstname} ${this.#lastname}` } } var alice = new Alice(); console.log(alice.fullname()); alice.fullname = function someMock(){}; // error
  51. 88.