Javascript 2016 with ES6

社内向け勉強会資料

Transcript

1. JavaScript 2016 with ES6
2. ECAMScriptͱ͸ʁ
3. ECMAScript •ECMA InternationalʹΑͬͯඪ४Խ͞Εͨ JavaScriptن֨ •1997೥ॳ൛ •2009೥12݄ʹୈ̑൛ ௨শ ES5 (ES2009) •2015೥6݄ʹୈ̒൛ ௨শ ES6 (ES2015)
4. ECMAScript •ECMA InternationalʹΑͬͯඪ४Խ͞Εͨ JavaScriptن֨ •1997೥ॳ൛ •2009೥12݄ʹୈ̑൛ ௨শ ES5 (ES2009) •2015೥6݄ʹୈ̒൛ ௨শ ES6 (ES2015) Today’s Topic
5. ES5(ECMAScript2009) •strictϞʔυͷಋೖ •JSONϥΠϒϥϦͷαϙʔτ
 ͳͲ…
6. ES5(ECMAScript2009) •strictϞʔυͷಋೖ •JSONϥΠϒϥϦͷαϙʔτ
 ͳͲ… ϝδϟʔϒϥ΢β͸΄΅100%ରԠࡁΈ
7. ES6͸ɺͳʹ͕৽͍͠ʁ
8. ES6ͷ৽ͨͳ࢓༷ 1.class໋ྩͷಋೖͰɺJava/C#ϥΠΫͳΫϥεఆ͕ٛՄೳʹ 2.import / export໋ྩʹΑΔίʔυͷϞδϡʔϧԽ 3.ؔ਺ߏจͷվળ(Ξϩʔؔ਺ɺҾ਺σϑΥϧτ஋ɺՄม௕ Ҿ਺) 4.let / const໋ྩʹΑΔϒϩοΫείʔϓͷಋೖ 5.Map / Set 6.for … of(ΠςϨʔλʔ) 7.δΣωϨʔλʔ 8.Promise
 ͳͲͳͲ…
9. ʲࢀߟʳES6ϒϥ΢βຖͷରԠঢ়گ σεΫτοϓϒϥ΢β ϞόΠϧϒϥ΢β https://kangax.github.io/compat-table/es6/
10. ʲࢀߟʳES6ϒϥ΢βຖͷରԠঢ়گ σεΫτοϓϒϥ΢β ϞόΠϧϒϥ΢β https://kangax.github.io/compat-table/es6/ ES6 → ES5΁ͷτϥϯεύΠϧ
11. •https://babeljs.io/ •ES6→ES5΁ͷτϥϯεύΠϥ •ES6Ͱॻ͍ͨJSϑΝΠϧ͔ΒES5(ES2009)ʹ ରԠͨ͠JSϑΝΠϧΛॻ͖ग़͢
 ˞Ұ෦ରԠ͍ͯ͠ͳ͍ES6ͷػೳ͋Γ
12. ES6ͷத਎
13. 1.class class Member { // ίϯετϥΫλʔ͸private constructor(name, age) { this.name = name; this.age = age; } // ϝιου͸͢΂ͯpublic getInfo() { return `I’m ${this.name}. ${this.age} year's old.`; } } //Πϯελϯεੜ੒ var tom = new Member(‘Tom’, 30); //ϝιου࣮ߦ console.log(tom.getInfo()); //-> I’m Tom. 30 year's old.
14. 1.class class Member { // ίϯετϥΫλʔ͸private constructor(name, age) { this.name = name; this.age = age; } // ϝιου͸͢΂ͯpublic getInfo() { return `I’m ${this.name}. ${this.age} year's old.`; } } //Πϯελϯεੜ੒ var tom = new Member(‘Tom’, 30); //ϝιου࣮ߦ console.log(tom.getInfo()); //-> I’m Tom. 30 year's old. ҎԼͷػೳ΋ར༻Մೳ
    w ܧঝ
    w ήολʔηολʔ
    HFU
    
    TFU
    w TUBUJDϝιου
15. 2.import / export ɹ
16. 2.import / export ར༻Մೳͳϒϥ΢βͳ͠
17. 2.import / export ར༻Մೳͳϒϥ΢βͳ͠
18. 2.import / export ར༻Մೳͳϒϥ΢βͳ͠ ͜ͷ΁Μ͸
    ։ൃ؀ڥͷઆ໌ͷ࣌ʹ
19. 3.ؔ਺ߏจͷվળ var calcTriangleArea = function(base, height) { // ࡾ֯ܕͷ໘ੵΛܭࢉͯ͠ฦ٫ return base * height / 2 //ఈล × ߴ͞ ÷ 2 } console.log(calcTriangleArea(5, 4) + ‘cᶷ’); //-> 10cᶷ 3-1.Ξϩʔؔ਺ طଘ var calcTriangleArea = (base, height) => { // ࡾ֯ܕͷ໘ੵΛܭࢉͯ͠ฦ٫ return base * height / 2 //ఈล × ߴ͞ ÷ 2 } console.log(calcTriangleArea(5, 4) + ‘cᶷ’); //-> 10cᶷ Ξϩʔؔ਺
20. 3.ؔ਺ߏจͷվળ // ԁͷ໘ੵΛٻΊΔ var calcCircleArea = radius => radius * radius * Math.PI; console.log(calcCircleArea(5) + ‘cᶷ’); //-> 78.53981633974483cᶷ 3-1.Ξϩʔؔ਺ var show = () => console.log(‘ݩؾͰ͔͢ʁ’); show(); //-> ݩؾͰ͔͢ʁ Ξϩʔؔ਺(Ҿ਺ͳ͠) Ξϩʔؔ਺(Ҿ਺1ͭ & 1ߦ)
21. 3.ؔ਺ߏจͷվળ var calcTriangleArea = function(base = 5, height = 4) { // ࡾ֯ܕͷ໘ੵΛܭࢉͯ͠ฦ٫ return base * height / 2 //ఈล × ߴ͞ ÷ 2 }; console.log(calcTriangleArea() + ‘cᶷ’); //-> 10cᶷ console.log(calcTriangleArea(6) + ‘cᶷ’); //->12cᶷ console.log(calcTriangleArea(,6) + ‘cᶷ’); //-> Τϥʔ 3-2.Ҿ਺ͷσϑΥϧτ஋
22. 3.ؔ਺ߏจͷվળ //Ҿ਺Λશͯ߹ࢉͯ͠ฦ٫͢Δ var calcSum = (...nums) => { let sum = 0; for (let n of nums) { sum += n; } return sum; }; console.log(calcSum(1,2,3,4,5,6)); //-> 21 3-3.Մม௕Ҿ਺ ྫ1)
23. 4.let / const ͷείʔϓ var scope = “global_scope"; var getValue = function() { var scope = ‘local_scope’; return scope; }; if (true) { var new_scope1 = ‘new_scope1’; } for (var i = 0,len = 3; i < len; i++ ) { var new_scope2 = 'new_scope2'; }; console.log(getValue()); // -> local_scope console.log(scope); // -> global_scope console.log(new_scope1); // -> new_scope1 console.log(new_scope2); // -> new_scope2 طଘͷείʔϓ
24. 4.let / const ͷείʔϓ var scope = “global_scope"; var getValue = function() { var scope = ‘local_scope’; return scope; }; if (true) { var new_scope1 = ‘new_scope1’; } for (var i = 0,len = 3; i < len; i++ ) { var new_scope2 = 'new_scope2'; }; console.log(getValue()); // -> local_scope console.log(scope); // -> global_scope console.log(new_scope1); // -> new_scope1 console.log(new_scope2); // -> new_scope2 طଘͷείʔϓ WBS
    ͳ͠ͷએݴ͸
    શͯHMPCBMʹͳΔͷͰඇਪ঑ ΤϥʔͱͳΒͳ͍
25. let scope = ‘aaa’; let scope = ‘bbb’; // Τϥʔ 4.let / const ͷείʔϓ if (true) { let new_scope = ‘new_scope’; } console.log(new_scope); // Τϥʔ let ྫ̍) let ྫ2) const scope = ‘aaa’; scope = ‘bbb’; // Τϥʔ const ྫ1)
26. let scope = ‘aaa’; let scope = ‘bbb’; // Τϥʔ 4.let / const ͷείʔϓ if (true) { let new_scope = ‘new_scope’; } console.log(new_scope); // Τϥʔ let ྫ̍) let ྫ2) ϒϩοΫ֎͸Τϥʔ એݴͷॏෳ͸Τϥʔ const scope = ‘aaa’; scope = ‘bbb’; // Τϥʔ const ྫ1) ஋ͷ࠶୅ೖෆՄ
    +BWBͰ͍͏pOBM جຊ͸const ࠶୅ೖ͕ඞཁʹͳͬͨΒletΛར༻(var͸ඇਪ঑) airbnbϧʔϧ
27. 5. Map / Set let m = new Map(); m.set(‘javascript’:’express’); m.set(‘ruby’:’ruby on rails’); m.set(‘python’:’Djungo’); console.log(m.size); //->3 console.log(m.get(‘ruby’)); //->ruby on rails console.log(m.has(‘ruby’)); //->true Map let s = new Set(); s.add(100); s.add(50); s.add(100); for (let item of s) { console.log(item); //->100,50 } Set
28. 5. Map / Set let m = new Map(); m.set(‘javascript’:’express’); m.set(‘ruby’:’ruby on rails’); m.set(‘python’:’Djungo’); console.log(m.size); //->3 console.log(m.get(‘ruby’)); //->ruby on rails console.log(m.has(‘ruby’)); //->true Map let s = new Set(); s.add(100); s.add(50); s.add(100); //->100͸ॏෳ for (let item of s) { console.log(item); //->100,50 } Set +BWBͷNBQͱಉ͡ ஋ͷॏෳΛڐ͞ͳ͍
29. 6. for … of(ΠςϨʔλʔ) var numberlist = [1,2,3,4]; for (var i = 0, len = numberlist.length; i < len; i++) { console.log(i); //->1,2,3,4 } for const numberlist = [1,2,3,4]; for (const item of numberlist) console.log(item); //->1,2,3,4 } let data_str = “͍͋͏͓͑"; for(let item of data_str) { console.log(item);//->͋ ͍ɹ͏ ͑ ͓ } for of
30. 7. δΣωϨʔλʔ let showlog = function* () { // functionͷ్தͰԿճͰ΋ϦλʔϯͰ͖Δ yield '͸͡Ίͯͷ'; yield 'δΣωϨʔλʔ'; yield 'ɻ'; }; // δΣωϨʔλʔ͸ྻڍՄೳͳΦϒδΣΫτΛฦ٫͢Δ for (let item of showlog()) { console.log(item); } δΣωϨʔλʔ
31. 8.Promise Promise
32. 8.Promise Callbackؔ਺ͷઆ໌͔Β ඞཁͩͱࢥ͏ͷͰผͷػձʹ (௕͘ͳΓͦ͏Ͱ͢͠) Promise
33. The End ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ