今から始めるES2015

ͪΐͬͱ଴ͬͯͶ٩ ˊᗜˋ و

ࠓ͔Β࢝ΊΔ&4 !TPUB

ࣗݾ঺հ w 4PUB4VHJVSB !TPUB w ৽ଔ೥໨ w ࣾ಺Ͱ͸ओʹ͓஡͘Έͯ͠·͢ w
ͨ·ʹ1)1ͱ+4ॻ͖·͢

ຊ೔ͷΰʔϧ

&4Λ஌Δ

ͦͯ͠໌೔͔Βॻ͘

ൃදΛௌ͘લͷ༻ޠू w &4ʜ&$."4DSJQU w +4ʜ+BWB4DSJQU

"HFOEB w )JTUPSZPG&$."4DSJQU w "CPVU&4 w )PXUPXSJUF&4 w 5SZXSJUJOH&4

)JTUPSZPG&$."4DSJQU

ࠓ೔͸&4ͷ͓ษڧձ &4ͱ+4ͷྺ࢙Λ ௒ͬ͘͟ΓৼΓฦΔ

w &$."4DSJQU*OUFSOBUJPOBMͷఆΊΔ +BWB4DSJQUͷ࢓༷ w ࢓༷ʹԊ࣮ͬͯ૷͞ΕΔͷ͕+BWB4DSJQU w ౰વɺෳ਺࣮૷ଘࡏ͢Δ w ౰વɺ࢓༷ʹै͏ٛ຿͸ͳ͍ ͦ΋ͦ΋&$."4DSJQUͱ͸

&$."4DSJQU࢓༷ +BWB4DSJQU࣮૷ ͭ·Γ

&$."4DSJQU࢓༷ +BWB4DSJQU࣮૷ ͭ·Γ ̃ㅳ䍖Ԋ⃵㯸սⶨմՅՖ⶿嫥Մնָ׋ֈ֘խԭն

d&$."4DSJQU w &4Ҏલʜང͔ੲ w &4ʜࠓͷݸલʹ͋ͨΔ࣮૷ d*& w &4ʜ࢓༷͸ଘࡏ͢Δ΋ͷͷɺͲͷϕϯμʔ΋࣮૷ͤ ͣਁಁ͠ͳ͔ͬͨ
w ͜͜Β΁Μ͸Α΄Ͳͷ͜ͱ͕ແ͍ݶΓ৮Δ͜ͱ͸ͳ͍͸ ͣ w ৮Βͳ͖Ό͍͚ͳ͍ํ͍ͨΒೆແ

&$."4DSJQU w &4ͷͭલ w *&Ҏ߱ɺϞμϯϒϥ΢βͰಈ͘Έͳ͞ΜͷΑ͘ ஌Δ+BWB4DSJQUʹ࠷΋͍ۙ΋ͷ w ͔͠͠&4ʹ͸ʮͲ͏ͯ͜͠͏ͳͬͨʯ࢓༷͕ ଟ͔ͬͨ

w ҉໧ͷάϩʔόϧม਺ w ϨΩγΧϧείʔϓ໰୊ w ίʔϧόοΫ஍ࠈ w UIJTࢀর໰୊ w FUD
&4ͷͭΒ͍࢓༷

UIJT໰୊ var cat = { name: 'tama', say: function ()
{ console.log(this.name); // ‘tama’ function say() { console.log(this.name); // ?? } say(); } }; cat.say();

UIJT໰୊ var cat = { name: 'tama', say: function ()
{ console.log(this.name); // ‘tama’ function say() { console.log(this.name); // undefined } say(); } }; cat.say();

ίʔϧόοΫ஍ࠈ asyncOne('hoge', function (res, err) { asyncTwo(res, function (res, err)
{ asyncThree(res, function (res, err) { asyncFour(res, function (res, err) { asyncFive(res, function (res, err) { console.log(res); // ඇಉظϚγϚγ }); }); }); }); });

҉໧ͷάϩʔόϧม਺ var show = function () { var name =
'sota1235'; var age = (function (now) { birthday = 1992; return now - birthday; })(2016); console.log(name + ' is ' + age + ' years old.'); }; show(); // ‘sota1235 is 24 years old.’ /** after 100000 lines... */ console.log(name); // undefined console.log(age); // undefined console.log(birthday); // ??

҉໧ͷάϩʔόϧม਺ var show = function () { var name =
'sota1235'; var age = (function (now) { birthday = 1992; return now - birthday; })(2016); console.log(name + ' is ' + age + ' years old.'); }; show(); // ‘sota1235 is 24 years old.’ /** after 100000 lines... */ console.log(name); // undefined console.log(age); // undefined console.log(birthday); // 1992

ͦ͏ͩɺ+4Λ΍ΊΑ͏

"MU+4ͷొ৔ w $44Ͱ͍͏4BTTͱ͔4UZMVTΈ͍ͨͳ΋ͷ w ίϯύΠϧ͢Δͱϒϥ΢βͰಈ͘΋ͷ͕ు͖ग़͞ΕΔ w +4Λָʹॻ͖͍ͨਓ͕ͨͪ৭Μͳ෺Λ࡞Γ࢝Ίͨ

ओͳ"MU+4 Πϯσϯτݴޠ࠷ߴʂ άϩʔόϧม਺ͱ͔ࢮΜͰཉ͍͠

ओͳ"MU+4 ܕͦ͜ࢸߴ

ओͳ"MU+4 ·ͩ+BWB4DSJQUͰফ໣ͯ͠ΔΜͰ͔͢

ओͳ"MU+4

ओͳ"MU+4 ͜Εͧࠞಱʜ

͑ɺ·ͩੜ+4ফ໣ͯ͠Δͷʁظ w &4ͷҋʹᙺΕΛ੾Βͨ͠+4FSʹΑΔ"MU+4େ ઓ૪ w +4ͷ୅ସΛ໨ࢦͨ͠ΓଞݴޠΛ+4ʹίϯύΠϧ ͠Α͏ͱͨ͠Γ w ਓ͸ଵଦͳ͍͖΋ͷ

͑ɺ·ͩੜ+4ফ໣ͯ͠Δͷʁظ w "MU+4ͷొ৔Ͱ&4ͷҋΛආ͚ͯ+4Λॻ͘͜ͱ ͸ൺֱత༰қʹͳͬͨ w ͱ͸͍͑ɺϒϥ΢βͰಈ͘Θ͚Ͱ͸ͳ͍ͷͰࠜ ຊղܾʹ͸ࢸΒͳ͍ w ୭΋͕ٹੈओΛ଴ͪ๬ΜͰ͍ͨʜ

ͦͯ࣌͠͸೥

ٹੈओര஀

"CPVU&4

&4 w &4͔Β࣮ʹ೥ͿΓͷϦϦʔε w &4ͱݺ͹Ε͕ͯͨਖ਼໊ࣜশ͸&4 w ϒϥ΢βॲཧೳྗͷ޲্ɺϑϩϯτͷൃలʹ൐ ͍ຬΛ࣋ͯ͠ొ৔ w ཁ͢Δʹधཁ͕͋Δ͔Β࢓༷ࡦఆ͕ਐΜͩ

υϥεςΟοΫͳมߋ w ৽نػೳ͕ඇৗʹଟ͍ w ࠓ·Ͱͷ&4ͷ໰୊ͷଟ͘Λղܾ w $P⒎FF4DSJQUΛ͸͡Ίͱ͢Δ"MU+4ʹେ͖͘Ө ڹΛड͚͍ͯΔ w $MBTTߏจɺ"SSPX'VODUJPOFUDʜ

ه๏Λ͍͔ͭ͘঺հ

MFU w ϒϩοΫείʔϓม਺͕એݴՄೳʹͳͬͨ w ࠶୅ೖՄೳͳͷͰGPSจத͚ͩ༗ޮͳΧ΢ϯτม ਺౳ͷ࣮ݱ͕Մೳʹ

MFU for (let i = 0; i < 5; i++)
{ console.log(i); } console.log(i); // ReferenceError let name = 'sota1235'; // ࠶୅ೖՄ name = 'sota1236'; // ࠶એݴෆՄ let name = 'sota1236'; // TypeError

DPOTU w ఆ਺ͷએݴ͕Մೳʹͳͬͨ w ࠶୅ೖෆՄ w WBSऴྃͷ͓஌Βͤ w ม਺એݴ͸ݪଇશͯDPOTUͰɺͱ͍͏+4FS΋ଟ͍

DPOTU const version = 2015; version = 2016; // TypeError
const version = 2017; // TypeError

BSSPXGVODUJPO w ؔ਺ͷলུه๏ w ؔ਺ͷॲཧ͕ߦ͔͠ͳ͚Ε͹҉໧ͷSFUVSO΋ Մೳ w ਌είʔϓͷUIJTΛҾ͖ܧ͙఺ʹ஫ҙ

BSSPXGVODUJPO // ES5 var func = function (food, name) {
console.log(name + ' want to eat ' + food); }; // ES2015 const func = (food, name) => { console.log(name + ' want to eat ' + food); }; // Ҿ਺͕1ͭͷ৔߹ɺؙׅހলུՄೳ const func2 = food => { console.log('I want to eat ' + food); }; // ॲཧ͕ҰߦͳΒதׅހলུՄೳ // ධՁ͞Εͨ஋͕҉໧ͷreturn஋ͱͳΔ఺ʹ஫ҙ const func3 = food => console.log('I want to eat ' + food);

EFGBVMUQBSBNFUFSWBMVFT w ؔ਺ͷσϑΥϧτҾ਺ͷࢦఆ͕Մೳʹͳͬͨ

EFGBVMUQBSBNFUFSWBMVFT // lastͷσϑΥϧτ஋Λࢦఆ const getName = (first, last = 'Sugiura')
=> { return last + ' ' + first; }; // ม਺ʹೖΔ΋ͷ͸ԿͰ΋ࢦఆՄೳ const concat = (list, subList = ['c']) => { return list.concat(subList); }; concat(['a', 'b']); // ['a', 'b', 'c'] concat(['a', 'b'], ['d']); // ['a', 'b', 'd']

TQSFBEPQFSBUPS w ഑ྻɺΦϒδΣΫτΛϧʔϓͤͣల։Ͱ͖ΔΑ ͏ʹ w ഑ྻ࿈݁΍Մม௕Ҿ਺ͷ࣮૷͕༰қʹͳͬͨ w ԋࢉࢠΛར༻͢Δ

TQSFBEPQFSBUPS // ഑ྻΛల։ const a = ['a', 'b', 'c']; const
b = [...a, 'd']; // ['a', 'b', 'c', 'd']; // Մม௕Ҿ਺ function print(...names) { console.log(names.join(' ')); }; print('es5', 'es6', 'es7'); // 'es5 es6 es7'

QBSBNFUFSDPOUFYUNBUDIJOH w 0CKFDU͔ΒಛఆͷΩʔΛࢦఆ͠ม਺ʹ୅ೖ͢Δ w 0CKFDUΛม਺΍ؔ਺ͷҾ਺ʹϚοϐϯάͰ͖Δ

QBSBNFUFSDPOUFYUNBUDIJOH const meal = { breakfast : 'bread', lunch :
'pasta', dinner : 'curry', }; const { breakfast, lunch } = meal; console.log(breakfast); // 'bread' console.log(lunch); // 'pasta' function printLunch({ lunch }) { console.log('Lunch is ' + lunch); }; printLunch(meal); // 'Lunch is pasta'

DMBTT w $MBTTߏจ͕Մೳʹͳͬͨ w ࠓ·ͰͲ͓ΓQSPUPUZQFϕʔεͰͷදه΋Մೳ w ͕ɺಛஈϝϦοτͳ͍ͷͰ$MBTTߏจͰΑ͍ w QSPUPUZQFͷཧղ͸͓ͯ͘͠΂͠

DMBTT class Dog { constructor(name, age) { this.name = name;
this.age = age; } printName() { console.log(this.name); } static bark() { console.log('Wow'); } get age() { return this.age; } } Dog.bark(); // 'Wow' const dog = new Dog('chiwawa', 18); dog.printName(); // 'chiwawa'; console.log(dog.age); // 18

WBMVFFYQPSUJNQPSU w ϑΝΠϧͷϞδϡʔϧԽ͕Մೳʹͳͬͨ w &4ʹ͸ແ͔ͬͨػೳ w OPEFKT͔Β༌ೖͨ͠ػೳ

WBMVFFYQPSUJNQPSU // module.js export default function cat() { console.log('myaw'); }
export config = { env: 'develop', }; // sample.js import cat, { config } from './module'; cat(); // 'myaw' console.log(config.env); // 'develop';

1SPNJTF w ඇಉظॲཧΛ׬ྃ࣌ʹղܾ͢ΔΦϒδΣΫτ w &4ͷ࣌఺Ͱ޿࣮͘૷͞Ε͍͕ͯͨ࢓༷తʹ͸ &4ʹؚ·ΕΔ w ίʔϧόοΫɺμϝɻθολΠɻ

1SPNJTF // Not good :( asyncFirst('hoge', result => { asyncSecond(result,
result => { asyncThird(result, result => { console.log(result); }); }); }); // Good promise :) asyncFirst('hoge') .then(asyncSecond) .then(asyncThird) .then(result => console.log(result)); .catch(err => console.error(err));

ͦͷଞେ੎ w ͜͜Ͱ঺հͨ͠΋ͷ͸͘͘͝͝Ұ෦ w ඇৗʹ৽ػೳ͕ଟ͍ͷͰίπίπ֮͑Α͏ w (JU)VCͰ·ͱΊͯ͘ΕͯΔϖʔδͰ߲໨਺͑ͨ Βݸ͋ͬͨ w
IUUQTHJUIVCDPNMVLFIPCBOFTGFBUVSFT

)PXUPXSJUF&4

?P? &4࠷ߴʂ໌೔͔Βॻ͍ͧ͘ʂ

㵺㱿㵺 ɻP ͋Εɺϒϥ΢β࣮૷͸௥͍͍ͭͯΔͷʁ

cIUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFTc ᵎ ☋ʆ ᵊࡾ

‧‪‬‭▓▒░ `Т` ░▒▓‭‬‪‧͏Θ͋͋͋͋

ϒϥ΢βϕϯμʔ໰୊ w ͜͜Ͱ࠶ͼཱͪ͸͔ͩΔϕϯμʔ໰୊ w ϒϥ΢βʹΑͬͯ&4ͷରԠঢ়گʹࠩҟ͕ ͋Δ

ϒϥ΢βରԠঢ়گ w *&͸࿦֎ w &EHF ''͸࠷৽൛ͳΒ w $ISPNF 0QFSB͸࠷৽൛ͳΒ w
εϚϗ͸࠷େͱ݁ߏյ໓త ࣌఺IUUQTLBOHBYHJUIVCJPDPNQBUUBCMFFT

Α͘Θ͔ΒΜɻߦͰ w ٸͳ࢓༷มߋʹ w ϒϥ΢β։ൃ͕௥͍͚ͭͣ w &4͕ಈ͔ͳ͍

#BCFM w &4Λ&4ʹม׵ͯ͘͠ΕΔτϥϯεύΠ ϥʔ w $P⒎FF4DSJQU΍5ZQF4DSJQUΛॻ͍ͨΒ&4ʹ ม͑ͯ͘ΕΔͷͱಉ͡Α͏ͳϊϦ w *&·ͰରԠͨ͠ίʔυΛు͍ͯ͘ΕΔ

#BCFM &4 &4  ϒϥ΢βͰಈ͘ #BCFMͰ ม׵͞ΕΔ

͑ɺ"MU+4͡ΌΜ w ϑϩϯτ+4ͱͯ͠ಈ͔͢खॱ͸͔֬ʹ"MU+4ͱ Ұॹ w ίʔυॻ͘ˠ&4ʹม׵ w ҧ͏ͷ͸ॻ͘ίʔυ͕&$."ඪ४Ͱ͋Δ͜ͱ w ͍ͣΕશϒϥ΢β͕ಈ͘
͸ͣͷ ίʔυ͕ॻ͚Δ

#BCFM࢖༻࣌ͷ஫ҙ w #BCFM͚ͩͰ͸࢖͑ͳ͍&4ͷ࢓༷΋͋Δ w 1SPYZ 4ZNCPM౳ w ͭ·Γ&4Ͱ࠶ݱͰ͖ͳ͍΋ͷ w #BCFM͚ͩͰ&4ΛֶͿ΂͖Ͱͳ͍
w #BCFM࡞ऀ΋ͦ͏ݴͬͯΔ

#BCFM࢖༻࣌ͷ஫ҙ w ݹ͍*&ͷରԠΛࢹ໺ʹೖΕΔࡍ͸৻ॏʹͳΔ΂͖ w 1PMZpMMϥΠϒϥϦͰ*&͙Β͍·Ͱ͸͍͚ͦ ͏͕ͩݕূ͕ඞཁͦ͏ w ϞδϡʔϧػೳΛϑϩϯτ࣮૷ʹམͱ͍ͨ͠ͳΒ ϞδϡʔϧίϯύΠϥʔඞਢ w
#SPXTFSJGZ 8FCQBDL͋ͨΓʁ

ͱ͸͍͑ w ʮϑϩϯτͰ&4ͷԸܙʹ͋΍͔Γ͍ͨʯ ͷͰ͋Ε͹#BCFM࢖͑͹׎͏ w ౰෼धཁ͸͋ΔͷͰอकͷ৺഑͸ແ͍ w &4Ҏ߱΋αϙʔτ͞ΕΔ໛༷

5SZXSJUJOH&4

໌೔͔Β&4Λॻ͜͏ʂ ʮࠓॻ͍ͨ&4Λϒϥ΢βͰಡΈࠐ·ͤͨΒಈ͘ʂʯ Λ໨ࢦ͢

Լ͝͠Β͑ w &4͕ॻ͚ͳ͍ਓ͸·ͣ&4Λֶͼ·͠ΐ͏ w #BCFM͕͢Δͷ͸&4Λ&4Ͱ࠶ݱ͢Δ͜ͱ w ͭ·Γ&4Ͱ࠶ݱͰ͖ͳ͍ػೳ͸࢖͑ͳ͍ w ͳͥͦ͏͢΂͖͔͸͜ΕΛಡΉͱϋϥΦν͢Δ w
IUUQB[VHJUIVCJPTMJEFOPEFKTFTIPXUPMFBSOIUNM

ඞཁͳࡐྉ w /PEFKTOQNݸ w #BCFMݸ w λεΫϥϯφʔ͓޷ΈͰ

4UFQ&4Λ&4ʹม׵͢Δ

4UFQ ͦͷલʹʜ &4Λ޾ͤʹॻͨ͘Ίͷ ίπΛ͓ڭ͑͠·͢

4UFQ ͦͷલʹʜ Ϗϧυ؀ڥ͸શͯύΫΕ

ͳͥύΫΔͷ͔ w &4ͷ஌ࣝ͸ࠓޙ΋ͣͬͱੜ͖Δ w &4Λม׵͢ΔͨΊͷ஌ࣝ͸͍ͣΕ͍Βͳ ͘ͳΔ w ׬

ͳͥύΫΔͷ͔ w ৮ͬͨ͜ͱ͋ΔਓͳΒΘ͔Δ͚ͲOQNͬͯ݁ߏ ͭΒ͍ w ม׵͢Δ͚ͩͰ΋ίέΔਓ͸ίέΔ w ؤுͬͯ΋͍͍͚ͲίϨʹؔͯ͠͸ڊਓͷݞʹ ৐Δ΂͖ͱ͍͏ͷ͕ࢲͷॴײ

ͬͯ͜ͱͰ w ԶͷࢡΛӽ͑ͯߦ͚ʂ w IUUQTHJUIVCDPNTPUBFT@TUBSUFS@LJU w Ͱ͖Δ͜ͱ w &4Λ&4ʹม׵ w
Ϣχοτςετ͕&4Ͱॻ͚Δˍಈ͘

ᶃ&4Λม׵ w #BCFMपΓͷπʔϧΛOQNͰམͱ͢ w ϏϧυεΫϦϓτΛॻ͘ w QBDLBHFKTPOPSλεΫϥϯφʔ w ͓޷ΈͰ w
࣮ߦ͢Δ

ᶄϢχοτςετΛಈ͔͢ w #BCFMपΓͷπʔϧΛམͱ͢ w ಈ͔͢ w Ҏ্ʂ w ͨͩ͠ɺϒϥ΢βͰ࣮ߦ͍ͨ͠৔߹͸ม׵ͷ ඞཁ͋Γ
NPDIBͱ͔

͙͢ʹॻ͚ͨʂ w ϏϧυεΫϦϓτॻ͍ͯ΋อकͷ໰୊͋Δ͚Ͳ ୭͔͕େ఍ؤுͬͯΔ w ձࣾͷΈΜͳ͕ॻ͖࢝ΊΕ͹QKUԣஅͯ͠ࢼߦࡨ ޡ͢Ε͹͍͍ w ઃఆपΓ͸໎ΘͣύΫΖ͏

4UFQ&4ΛֶͿ

4UFQ&4ΛֶͿ w ಡΜͰֶͿ w τϨʔχϯάͰֶͿ w ౖΒΕֶͯͿ

ಡΜͰֶͿ w ࢓༷ॻΛಡΉ w IUUQXXXFDNBJOUFSOBUJPOBMPSH QVCMJDBUJPOTTUBOEBSET&DNBIUN

ಡΜͰֶͿ w FTGFBUVSFT w IUUQFTGFBUVSFTPSH w &4ͱͷൺֱͰ঺հ͞Ε͍ͯͯඇৗʹΑ͍

τϨʔχϯάͰֶͿ w UPXFSPGCBCFMͱ͍͏OQN͕͋Δ w ৄ͘͠͸࡞ऀهࣄΛ w IUUQZPTVLFGVSVLBXBIBUFOBCMPHDPNFOUSZ

τϨʔχϯάͰֶͿ

ౖΒΕֶͯͿ w &4-JOUΛར༻͢Δ w &4ͳॻ͖ํΛڧ͍ΔϝδϟʔͳDPOpHΛ མͱͯ͠࢖͏ w ൃݟ͕ଟ͍ͷͰݸਓతʹਪͯ͠Δ w "JSCOC
(PPHMF͋ͨΓͷDPOpH͕Φεεϝ

&4-JOU"JSCOC

·ͱΊ w &4Λॻͨ͘Ίͷ؀ڥ͸ਓͷΛύΫΖ͏ w ه๏͸ͪΐͬͱ֮ͣͭ͑Α͏ w &4΋΄΅ಈ͘ͷͰ·ͣ͸DPOTUΛ࢖͏ॴ͔ Βʜͱ͍͏ײ֮Ͱ͓̺

ͪͳΈʹ w ҎԼͷ΋ͷ͸#BCFM͸ඞཁͳ͍Ͱ͢ w OPEFKTWd w Ϟμϯϒϥ΢β $ISPNF '' &EHF͋ͨΓ
w ΧόʔͰ͸ͳ͍͚Ͳ͍͍ͩͨಈ͘ͷͰ࿅ श࣌͸ͪ͜Βͷํ͕Φεεϝ

༨ஊɿ͜Ε͔Βͷ&4

ࠓޙɺ&4͸Ͳ͏ͳΔͷ͔ w &4ͷେྔΞοϓσʔτ͸ܾΊΔํ΋πϥΠ w ͜Ε͔Β͸ຖ೥ࡉ͔͘ΞοϓσʔτΛ͠Α͏ͱ͍ ͏ྲྀΕʹͳ͍ͬͯΔ w &4 &4ʜ w
&4͸͔ͭ͠ػೳ૿͑ͳ͍༧ఆͩΑʂ

&4OFYU w ࣍ظʹͰΔ&4ͷ࢓༷Λ·Δͬͱ&4OFYUͱݺͿ w #BCFMͷQSFTFUΛར༻͢Δ͜ͱͰকདྷͷ࢓༷Λ ઌऔΓͰ͖Δ w ڵຯͷ͋Δํ͸୭Ͱ΋࣍ظ࢓༷ΛఏҊͰ͖Δͷ Ͱ΍ͬͯΈΑ͏

&4Ͱ ࠷ߴͷ+4ϥΠϑΛ

今から始めるES2015

今から始めるES2015

More Decks by Sota Sugiura

Other Decks in Programming

Featured

Transcript