ES2015(ES6)入門

Transcript

1. ES2015(ES6)ೖ໳ Nokogiri Javascriptͷ৽͍͠จ๏Λ஌Ζ͏
2. Nokogiri Job: SIer ->
 Web Engineer(8݄) I — JS , Java, Ruby and Design. ͸͡Ί·ͯ͠
3. Nokogiri Job: SIer ->
 Web Engineer(8݄) I — JS , Java, Ruby and Design. ͸͡Ί·ͯ͠ https://nokogiring.github.io/
4. ES(ECMAscript)ͱ͸ʁ
5. ECMA InternationalʹΑͬͯඪ४Խ͞Ε ͨJavaScriptن֨ 1997೥ॳ൛ 2009೥12݄ʹୈ̑൛ ௨শ ES2009 (ES5) 2015೥6݄ʹୈ̒൛ ௨শ ES2015 (ES6) ES(ECMAScript)
6. ECMA InternationalʹΑͬͯඪ४Խ͞Ε ͨJavaScriptن֨ 1997೥ॳ൛ 2009೥12݄ʹୈ̑൛ ௨শ ES2009 (ES5) 2015೥6݄ʹୈ̒൛ ௨শ ES2015 (ES6) ES(ECMAScript) 5PEBZ`T
   5PQJD
7. ͪͳΈʹES2009ͷ௥Ճػೳ͸ʁ
8. strictϞʔυͷಋೖ JSONϥΠϒϥϦͷαϙʔτ etc ES2009(ES5)
9. strictϞʔυͷಋೖ JSONϥΠϒϥϦͷαϙʔτ etc ES2009(ES5) ϝδϟʔϒϥ΢βͰ͸΄΅αϙʔτ͞Ε͍ͯΔ
10. ES2015(ES6)͸Կ͕৽͍͔͠ʁ
11. class໋ྩͷಋೖͰɺJava/C#ϥΠΫͳΫϥεఆ͕ٛՄೳʹ import / export໋ྩʹΑΔίʔυͷϞδϡʔϧԽ ؔ਺ߏจͷվળ(Ξϩʔؔ਺ɺҾ਺σϑΥϧτ஋ɺՄม௕Ҿ਺) let / const໋ྩʹΑΔϒϩοΫείʔϓͷಋೖ Map / Set for … of(ΠςϨʔλʔ) δΣωϨʔλʔ Promise ES2015(ES6)
12. class໋ྩͷಋೖͰɺJava/C#ϥΠΫͳΫϥεఆ͕ٛՄೳʹ import / export໋ྩʹΑΔίʔυͷϞδϡʔϧԽ ؔ਺ߏจͷվળ(Ξϩʔؔ਺ɺҾ਺σϑΥϧτ஋ɺՄม௕Ҿ਺) let / const໋ྩʹΑΔϒϩοΫείʔϓͷಋೖ Map / Set for … of(ΠςϨʔλʔ) δΣωϨʔλʔ Promise ES2015(ES6) ࠓ೔ͷ࿩͢ൣғ
13. ʲࢀߟʳϒϥ΢βຖͷES2015(ES6)ରԠঢ়گ σεΫτοϓϒϥ΢β ϞόΠϧϒϥ΢β https://kangax.github.io/compat-table/es6/
14. ʲࢀߟʳϒϥ΢βຖͷES2015(ES6)ରԠঢ়گ σεΫτοϓϒϥ΢β ϞόΠϧϒϥ΢β https://kangax.github.io/compat-table/es6/ ES2015(ES6) → ES2009(ES5)΁ͷ τϥϯεύΠϧ͕ඞཁ
15. •https://babeljs.io/ •JSτϥϯεύΠϥ •ES2015(ES6)Ͱॻ͍ͨJSϑΝΠϧ͔Β ES5(ES2009)ʹରԠͨ͠JSϑΝΠϧग़ྗ
 ˞Ұ෦ରԠ͍ͯ͠ͳ͍ػೳ͋Γ
16. ES2015(ES6)ͷத਎΁
17. 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.
18. 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ϝιου
19. 2.import / export
20. 2.import / export ར༻Մೳͳϒϥ΢βͳ͠
21. import / export ར༻Մೳͳϒϥ΢βͳ͠
22. import / export ར༻Մೳͳϒϥ΢βͳ͠ આ໌͸ผͷػձʹ
23. 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ᶷ Ξϩʔؔ਺
24. 3.ؔ਺ߏจͷվળ // ԁͷ໘ੵΛٻΊΔ var calcCircleArea = radius => radius * radius * Math.PI; console.log(calcCircleArea(5) + ‘cᶷ’); //-> 78.53981633974483cᶷ 3-1.Ξϩʔؔ਺ var show = () => console.log(‘ݩؾͰ͔͢ʁ’); show(); //-> ݩؾͰ͔͢ʁ Ξϩʔؔ਺(Ҿ਺1ͭ & 1ߦ) Ξϩʔؔ਺(Ҿ਺ͳ͠)
25. 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.Ҿ਺ͷσϑΥϧτ஋
26. 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.Մม௕Ҿ਺
27. 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 طଘͷείʔϓ
28. 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ʹͳΔͷͰඇਪ঑ ΤϥʔͱͳΒͳ͍
29. 4.let / const ͷείʔϓ if (true) { let new_scope = ‘new_scope’; } console.log(new_scope); // Τϥʔ طଘͷείʔϓ let ྫ̍) let ྫ2) let scope = ‘aaa’; let scope = ‘bbb’; // Τϥʔ const ྫ1) const scope = ‘aaa’; scope = ‘bbb’; // Τϥʔ
30. 4.let / const ͷείʔϓ if (true) { let new_scope = ‘new_scope’; } console.log(new_scope); // Τϥʔ طଘͷείʔϓ let ྫ̍) let ྫ2) let scope = ‘aaa’; let scope = ‘bbb’; // Τϥʔ const ྫ1) const scope = ‘aaa’; scope = ‘bbb’; // Τϥʔ ϒϩοΫ֎͸Τϥʔ એݴͷॏෳ͸Τϥʔ ஋ͷ࠶୅ೖෆՄ
    +BWBͰ͍͏pOBM
31. 4.let / const ͷείʔϓ if (true) { let new_scope = ‘new_scope’; } console.log(new_scope); // Τϥʔ طଘͷείʔϓ let ྫ̍) let ྫ2) let scope = ‘aaa’; let scope = ‘bbb’; // Τϥʔ const ྫ1) const scope = ‘aaa’; scope = ‘bbb’; // Τϥʔ ϒϩοΫ֎͸Τϥʔ એݴͷॏෳ͸Τϥʔ ஋ͷ࠶୅ೖෆՄ
    +BWBͰ͍͏pOBM جຊ͸const ࠶୅ೖ͕ඞཁʹͳͬͨΒletΛར༻(var͸ඇਪ঑)
32. 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 let s = new Set(); s.add(100); s.add(50); s.add(100); for (let item of s) { console.log(item); //->100,50 } Map Set
33. 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 let s = new Set(); s.add(100); s.add(50); s.add(100); for (let item of s) { console.log(item); //->100,50 } Map Set LFZ
    WBMVF
    ͷ૊Έ߹Θͤ ஋ͷॏෳΛڐ͞ͳ͍
34. 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 } const numberlist = [1,2,3,4]; for (let item of numberlist) console.log(item); //->1,2,3,4 } let data_str = “͍͋͏͓͑"; for(let item of data_str) { console.log(item);//->͋ ͍ ͏ ͑ ͓ } for for of
35. 7. δΣωϨʔλʔ let showlog = function* () { // functionͷ్தͰԿճͰ΋ϦλʔϯͰ͖Δ yield '͸͡Ίͯͷ'; yield 'δΣωϨʔλʔ'; yield 'ɻ'; }; // δΣωϨʔλʔ͸ྻڍՄೳͳΦϒδΣΫτΛฦ٫͢Δ for (let item of showlog()) { console.log(item); } //-> ‘͸͡Ίͯͷ’ //-> ‘δΣωϨʔλʔ’ //-> ‘ɻ’ δΣωϨʔλʔ
36. The End ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ