ES2015(ES6)ೖ໳ Nokogiri Javascriptͷ৽͍͠จ๏Λ஌Ζ͏

Nokogiri Job: SIer ->
 Web Engineer(8݄) I — JS , Java, Ruby and Design. ͸͡Ί·ͯ͠

Nokogiri Job: SIer ->
 Web Engineer(8݄) I — JS , Java, Ruby and Design. ͸͡Ί·ͯ͠ https://nokogiring.github.io/

ES(ECMAscript)ͱ͸ʁ

ECMA InternationalʹΑͬͯඪ४Խ͞Ε ͨJavaScriptن֨ 1997೥ॳ൛ 2009೥12݄ʹୈ̑൛ ௨শ ES2009 (ES5) 2015೥6݄ʹୈ̒൛ ௨শ ES2015 (ES6) ES(ECMAScript)

ECMA InternationalʹΑͬͯඪ४Խ͞Ε ͨJavaScriptن֨ 1997೥ॳ൛ 2009೥12݄ʹୈ̑൛ ௨শ ES2009 (ES5) 2015೥6݄ʹୈ̒൛ ௨শ ES2015 (ES6) ES(ECMAScript) 5PEBZ`T5PQJD

ͪͳΈʹES2009ͷ௥Ճػೳ͸ʁ

strictϞʔυͷಋೖ JSONϥΠϒϥϦͷαϙʔτ etc ES2009(ES5)

strictϞʔυͷಋೖ JSONϥΠϒϥϦͷαϙʔτ etc ES2009(ES5) ϝδϟʔϒϥ΢βͰ͸΄΅αϙʔτ͞Ε͍ͯΔ

ES2015(ES6)͸Կ͕৽͍͔͠ʁ

class໋ྩͷಋೖͰɺJava/C#ϥΠΫͳΫϥεఆ͕ٛՄೳʹ import / export໋ྩʹΑΔίʔυͷϞδϡʔϧԽ ؔ਺ߏจͷվળ(Ξϩʔؔ਺ɺҾ਺σϑΥϧτ஋ɺՄม௕Ҿ਺) let / const໋ྩʹΑΔϒϩοΫείʔϓͷಋೖ Map / Set for … of(ΠςϨʔλʔ) δΣωϨʔλʔ Promise ES2015(ES6)

class໋ྩͷಋೖͰɺJava/C#ϥΠΫͳΫϥεఆ͕ٛՄೳʹ import / export໋ྩʹΑΔίʔυͷϞδϡʔϧԽ ؔ਺ߏจͷվળ(Ξϩʔؔ਺ɺҾ਺σϑΥϧτ஋ɺՄม௕Ҿ਺) let / const໋ྩʹΑΔϒϩοΫείʔϓͷಋೖ Map / Set for … of(ΠςϨʔλʔ) δΣωϨʔλʔ Promise ES2015(ES6) ࠓ೔ͷ࿩͢ൣғ

ʲࢀߟʳϒϥ΢βຖͷES2015(ES6)ରԠঢ়گ σεΫτοϓϒϥ΢β ϞόΠϧϒϥ΢β https://kangax.github.io/compat-table/es6/

ʲࢀߟʳϒϥ΢βຖͷES2015(ES6)ରԠঢ়گ σεΫτοϓϒϥ΢β ϞόΠϧϒϥ΢β https://kangax.github.io/compat-table/es6/ ES2015(ES6) → ES2009(ES5)΁ͷ τϥϯεύΠϧ͕ඞཁ

•https://babeljs.io/ •JSτϥϯεύΠϥ •ES2015(ES6)Ͱॻ͍ͨJSϑΝΠϧ͔Β ES5(ES2009)ʹରԠͨ͠JSϑΝΠϧग़ྗ
 ˞Ұ෦ରԠ͍ͯ͠ͳ͍ػೳ͋Γ

ES2015(ES6)ͷத਎΁

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.

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 ήολʔηολʔ HFUTFU w TUBUJDϝιου

2.import / export

2.import / export ར༻Մೳͳϒϥ΢βͳ͠

import / export ར༻Մೳͳϒϥ΢βͳ͠

import / export ར༻Մೳͳϒϥ΢βͳ͠ આ໌͸ผͷػձʹ

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ᶷ Ξϩʔؔ਺

3.ؔ਺ߏจͷվળ // ԁͷ໘ੵΛٻΊΔ var calcCircleArea = radius => radius * radius * Math.PI; console.log(calcCircleArea(5) + ‘cᶷ’); //-> 78.53981633974483cᶷ 3-1.Ξϩʔؔ਺ var show = () => console.log(‘ݩؾͰ͔͢ʁ’); show(); //-> ݩؾͰ͔͢ʁ Ξϩʔؔ਺(Ҿ਺1ͭ & 1ߦ) Ξϩʔؔ਺(Ҿ਺ͳ͠)

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.Ҿ਺ͷσϑΥϧτ஋

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.Մม௕Ҿ਺

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 طଘͷείʔϓ

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ʹͳΔͷͰඇਪ঑ ΤϥʔͱͳΒͳ͍

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’; // Τϥʔ

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

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͸ඇਪ঑)

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

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 LFZWBMVFͷ૊Έ߹Θͤ ஋ͷॏෳΛڐ͞ͳ͍

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

7. δΣωϨʔλʔ let showlog = function* () { // functionͷ్தͰԿճͰ΋ϦλʔϯͰ͖Δ yield '͸͡Ίͯͷ'; yield 'δΣωϨʔλʔ'; yield 'ɻ'; }; // δΣωϨʔλʔ͸ྻڍՄೳͳΦϒδΣΫτΛฦ٫͢Δ for (let item of showlog()) { console.log(item); } //-> ‘͸͡Ίͯͷ’ //-> ‘δΣωϨʔλʔ’ //-> ‘ɻ’ δΣωϨʔλʔ

The End ͝ࢹௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ