KMC春合宿2018での発表資料です
2018ͷ”JavaScript”࠶ೖPasta-Kat KMC SpringCamp 2018[email protected] / [email protected]
View Slide
@pastak
• ژେֶֶ෦ใֶՊ ܭࢉػՊֶίʔε5ճੜ• KMC ݩใ• Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ• JavaScript / React / Ruby on Rails• Browser Extension• גࣜձࣾͯͳ ΞϧόΠτ• TypeScript
࣍• JavaScriptͷྺ࢙• JavaScriptͱECMAScript• ECMAScriptͷḷ͖ͬͯͨಓͷΓ• babel / browserify / Webpack ...ԿͷͨΊʁ• ·ͱΊ
͜ͷτʔΫͷλʔήοτ• JavaScriptʹ͍ͭͯաڈʹ৮Εͨ͜ͱ͕͋Δͷͷɺ͜͜JavaScriptͷΤίγεςϜʹ৮Ε͍ͯͳ͍ਓ• ࠷ۙͷJavaScriptֶशίετ͕ߴ͍ͱײ͍ͯ͡Δਓ• JavaScriptʹ͍ͭͯೖ͍ͨ͠ͱߟ͍͑ͯΔਓ• ࠓޙJavaScriptΛ͍ͬͯ͘"Մೳੑ͕͋Δਓ
͜ͷτʔΫͷΰʔϧ• ʮ࠷ۙͷJavaScriptΛॻͨ͘Ίʹඞཁͳπʔϧ͕ଟֶͯ͘शίετ͕ߴͯ͘ΫιʯΈ͍ͨͳ͜ͱΛಥવݴ͍ग़ͯ͠͠·Θͳ͍Α͏ʹ͢Δ• ͱ͜ΖͰԿނ͜Μͳʹ৭ʑπʔϧΒ༷Β͕ʹͳ͍ͬͯΔͷ͔Λཧͯ͠ཧղ͢Δ• ͱ͜ΖͰͱ͜ΖͰɺ ʮ“JavaScript”ͬͯԿ??ʯΛѲ͢Δ
࣍ͷ֤ߦͷίʔυ(ϒϥβ|NodeJS)Ͱಈ͘?
͜ͷτʔΫͰ͞ͳ͍͜ͱ• JavaScriptͷจ๏ه๏ɺ࠷ۙՃ͞ΕͨECMAScriptͷ༰ʹ͍ͭͯ• JavaScriptΛ༻͍ͨΞϓϦέʔγϣϯߏஙςΫχοΫ• JSͷςΫχοΫΓ͍ͨਓڈͷय़߹॓ͷࢿྉΛಡΜͰ͘Ε• WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)ࢦ͢ // Speaker Deck• https://speakerdeck.com/pastak/webahurikesiyonte-60fpswo-ji-li-mu-zhi-su
JavaScriptͷྺ࢙ΛৼΓฦͬͯΈΔ
օ͞Μ͕Πϝʔδ͢ΔJavaScriptͲΕͰ͢?• WebϖʔδΛ͔ʹ͢Δͭ• Google Maps / Web 2.0 / Ajax• Twitter / Facebook / SPA / PWA• NodeJS
ॳظͷϢʔεέʔε• WebαΠτΛ՚ඒʹ͢Δ• ͋Μ·ΓศརͳΘΕํ͕ͳ͔ͬͨ• ΫϦοΫͨ͠ΒalertΛग़͢• จࣈ͕νΧνΧ͢Δ• mouseoverͰcursorΛม͑Δ
JavaScript҉ࠇ࣌• 2000લJSͷ੬ऑੑΛͭ͘ΣϒαΠτଟ͘JavaScriptΛແޮԽ͍ͯ͠Δਓͨͪଟ͍ͨ͘• ϒϥΫϥ• Flashશظ
2005 Google Mapsര• Google MapsແݶʹεΫϩʔϧͰ͖ΔਤαΠτͩͬͨ• ྫ͑Yahoo!ͷਤ্ԼࠨӈʹҠಈ͢ΔϦϯΫΛԡͯ͠Ҡಈ͍ͯͨ͠• Google Maps͜ͷͱ͖XMLHttpRequestͳͲΛͬͯμΠφϛοΫʹಡΈࠐΈΈΛఏڙ͍ͯͨ͠• AjaxΞϓϦέʔγϣϯ͕ਓؾΛത͢Δ͖͔͚ͬʹͳͬͨ
ਓʑؾ͍ͨ
JavaScriptศར͡ΌΜ
JavaScriptʹର͢ΔೝࣝͷมԽ• WebαΠτΛ૽͕͘͢͠Δ͚ͩͷअຐͳଘࡏͩͱࢥΘΕ͍ͯͨ• ࣮ࡍɺJavaScriptΛUXʹܨ͛ΔΑ͏ͳΞϓϦέʔγϣϯ͕ͳ͔ͬͨ• DynamicHTMLͷඇޓඇಉظ௨৴ΛNN͕ͳ͔ͳ͔࣮͠ͳ͔ͬͨ͜ͱ͋Δ͕ɾɾɾ• ࣮ྫͱͯ͠ͷGoogle MapsϢʔβʔ͚ͩͰͳ͘։ൃऀʹେ͖ͳӨڹΛ༩͑ͨ
JSͰϚογϡΞοϓ͢Δͷ͕ྲྀߦͬͨ• Google Maps Ajax APIΛ࢝Ίͱ͢ΔXMLΛఏڙ͢ΔAPIjsonpΛఏڙ͢ΔAPI͕৭ʑͱొ• ͜ΕΒΛΈ߹ΘͤͯΞϓϦέʔγϣϯΛ࡞ΔʰϚογϡΞοϓʱ͕ྲྀߦ• ͜ͷྲྀΕΛਵ͢ΔϦονͳWebΞϓϦέʔγϣϯ͕ొ࢝͠ΊΔ• ʰWeb 2.0ʱ
ϒϥβߴԽ• 2008 Google Chromeͷొ• GoogleۘJSΤϯδϯ V8͕͔ͬͨ• ଞͷJSΤϯδϯਵͯ͠ߴԽͷಓ• ͜Μͳʹ͘Ͱ͖ΔͳΒͬͱΞϓϦέʔγϣϯͷػೳΛدͤΕΔͧ
NodeJSొ• 2009 V8Λར༻ͨ͠αʔόʔαΠυ্ͷJavaScript࣮ߦڥͱͯ͠ొ• ΠϕϯτۦಈܕʹΑΔϊϯϒϩοΩϯάIOͳͲʹ͕ू·ͬͨ• ʰΫϥΠΞϯτ1ສʱ͕ى͖ͳ͍• ͔͜͜ΒҰؾʹJSϒϥβ্Ҏ֎Ͱಈ͘ϓϩάϥϛϯάݴޠʹ• ͦΕҎલಈ͔͢ڥ͕͋ͬͨ͋·ΓϝδϟʔʹͳΒͳ͔ͬͨ• ࠓαʔόʔαΠυͪΖΜɺCLI༻ͷεΫϦϓτπʔϧΛॻͨ͘Ίʹଟ͘ར༻͞Ε͍ͯΔ
ݱࡏͷJavaScriptΞϓϦέʔγϣϯ• AngularReactɺVueͳͲΛͬͨSPAΞϓϦέʔγϣϯ• pushStateʹΑΔཤྺॻ͖ࠐΈ + XHR/fetchʹΑΔσʔλऔಘ• Progressive Web Application• ϞόΠϧϒϥβͰσεΫτοϓϒϥβͰ͍͍ײ͡ʹಈ͘• ΦϑϥΠϯΩϟογϡɾϩʔΧϧετϨʔδ
JavaScriptͱECMAScript
ECMAScriptͱԿ͔
·ͣ”ECMAScript”Λͬ͘͟Γͱ• JavaScriptͷඪ४༷ͷ໊শ• Ecma Internationalͷtc39Ͱٞ͞Ε͍ͯΔ• ݱࡏLiving StandardͷܗͰͲΜͲΜ༷͕Ճ͞Ε͍ͯΔ
JavaScriptॳظ• 1995 NetScapeʹͤΔͨΊʹ։ൃ͞ΕΔ• Java͕ྲྀߦ͍ͬͯͨͷͰɺ໊લΛआΓ͖ͯͯJavaScriptʹ• 1996 IE3.0ʹͤΑ͏ͱ͢Δަবࣦഊ• Microsoft͕ಠࣗͷJScriptͱͯ͠։ൃ
JavaScriptඪ४Խ• 1997 JavaScriptͱJScriptͷ྆ํ͕͋Δঢ়گΛͳΜͱ͔͠Α͏ͱ͍͏Ϟνϕʔγϣϯ͕Netscapeʹ͋ͬͨ• ͜ͷJavaScriptͷඪ४ԽΛECMAΠϯλʔφγϣφϧʹґཔ• ECMA-262ͷॳ൛͕ग़དྷΔ• “JavaScript”ඪͷ߹Ͱ͑ͳ͍ͷͰɺ”ECMAScript”ʹ
ECMAScriptඪ४Խͷܥේ• 1998 ECMA-262 ୈ2൛• 1999 ECMA-262 ୈ3൛• ͜͜·Ͱॱௐͩͬͨɾɾɾ
ECMAScriptඪ४Խͷܥේ• 1998 ECMA-262 ୈ2൛• 1999 ECMA-262 ୈ3൛• ͜͜·Ͱॱௐͩͬͨɾɾɾ• ECMA-262 ୈ4൛Ͱࣄ݅ىͬͨ͜!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
ECMAScript 4Ͱͷग़དྷࣄ• ਪਐ• Adobe, Mozilla(چNetscape Navigationࣾ), Opera, Google• ଟ͘ͷ৽ػೳΛऔΓࠐΈJavaScriptΛେ෯ʹมߋ͢Δ• ର• Microsoft & Yahoo• ES3ΛϕʔεʹػೳՃόάमਖ਼ΛؚΜͩES3.1ͱͯ͠ެ։͢Δ
ECMAScript4ͱͳΜͩͬͨͷ͔• ߏཁૉᶃ• ActionScript 3.0(Adobe͕FlashΞϓϦέʔγϣϯͷͨΊʹ։ൃ͍ͯͨ͠ϓϩάϥϛϯάݴޠ)͔ΒऔΓࠐΜͩػೳ• class, interface, ܕ, ໊લۭؒ, package ͳͲ
ECMAScript4ͱͳΜͩͬͨͷ͔• ߏཁૉᶄ• JavaScript 1.7(NNFirefoxʹࡌ͍ͬͯͨJS࣌JavaScript 1.Xͱ͍͏όʔδϣϯ൪߸͕߱ΒΕ͍ͯͨ)͔ΒऔΓࠐΜͩػೳ• let, ׂೖ, δΣωϨʔλʔ ͳͲ
ECMAScript4ͱͳΜͩͬͨͷ͔• ߏཁૉᶅ• ͦͷଞʹଟ͘ͷ৽ͨͳػೳΛऔΓࠐΉ͜ͱ͕ըࡦ͞Ε͍ͯͨ• ྫ͑ɾɾɾ
ςϯϓϨʔτ• C#ͰGenericͱݺΕͯΔͭhttp://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ
ԋࢉࢠΦʔόʔϩʔυhttp://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ
ECMAScript4ʹؔ͢Δܾண• ݁Ռͱͯ͠ES3.1 (aka ES Harmony)Λ͍ͬͯ͘͜ͱʹऩଋ (20088݄)• ES4͜Ε·ͰͷESʹରͯ͠มߋ͕େ͖͗͢ΔͷͰԺʹΓ͍ͨ• จ๏ͷޓੑͷͳͲ͔ΒաڈͷWebͷࢿ࢈ʹӨڹΛ༩͑ͯ͠·͍͔Ͷͳ͍• ໊લۭؒύοέʔδͳͲWebʹ͙ͦΘͳ͍ͷͰɺES3.1ͷٞͷ্ͰҰѻΘͳ͍• ͦΕҎ֎ͷػೳʹ͍ͭͯٞͷରͱͯ͠ѻ͏
ECMAScript5ϦϦʔε• ES Harmonyͱͯ͠ਐΊΒΕ͍ͯͨ࡞ۀʹ2009ɺES5ͱͯ͠ϦϦʔε͞Εͨ• ϝδϟʔόʔδϣϯ͕2্͕͍ͭͬͯΔ͕࣮ଶ3.0͔Β3.1ͷϚΠφʔόʔδϣϯΞοϓ• Mozilla͕ਐΊ͍ͯͨJavaScript 1.X → 2.0ͷ࡞ۀESʹ४ڌ͢ΔํʹͳΓɺ͜ͷόʔδϣϯݺশߦΘΕͳ͘ͳͬͨ
ECMAScript 5ͷ৽ػೳ• JSON.parse, JSON.stringify ͷՃ• ArrayͷϝιουͷՃ forEach, filter, map, reduce, indexOf• StringͷϝιουͷՃ trim• StrictϞʔυͷՃͳͲ
تͷECMAScript6ϦϦʔε• 2015ϦϦʔε• ଟ͘ͷັྗతͳػೳ͕༷ʹͳͬͨ!!!!!!!!!!!!!!!!!!!• Θ͍Θ͍
arrow function• () => {} ͰؔࣜΛॻ͚Δ• this͕ͦͷએݴ࣌ͷίϯςΩετͷthisʹଋറ͞ΕΔ
enhanced object literals / destructuring• Objectͷkey͕ม໊ͱಉ࣌͡ʹলུՄೳ• ArrayͱObjectͰׂೖ͕Մೳʹ
Promise• JSͷίʔϧόοΫࠈ͔ΒਓʑΛղ์• ͦΕ·ͰਓʑjQuery.defferͱ͔ʢyieldͱ͔ʣͰࣃΛ৯͍͍ͬͯͨ͠ͷ͡Ό
Class• ͦΕ·ͰਓʑprototypeΛར༻͍͍ͯͬͯͬͯͨ͠
Class• ES6ͰClassߏจ͕Ճ͞Εͨ
ͦͷଞ• Symbol• Number.isNaN• Array.from / Array.find• String.includes / String.repeat• Object.assign• ඌ࠶ؼ࠷దԽ
ES6➜ES2015…ͦͯͦ͠ͷઌ• ES6ES2015ʹվশɻҎ߱Living Standardํࣜʹ• ECMAScriptͷ༷ॻͷυϥϑτGithub্ͷtc39/ecma262Ͱཧ͞Ε͍ͯΔ• ࠷৽ͷECMAScript༷ https://tc39.github.io/ecma262/• ຖ۠ΓΛ͚ͯҎ߱ES2016, ES2017ͱTagΛ͚Δ• ͜ͷλΠϛϯάͰStage4ʹೖ͍ͬͯΔ༷Λରʹ͢Δ
http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ
ࠓͷECMAScript• ͦΕ·Ͱશͯͷ༷͕߹ҙ͞ΕͨޙʹϦϦʔε͞Ε͍͕ͯͨɺݱࡏͷES߹ҙ͕औΕ༷͔ͨΒॱ࣍ϦϦʔε͞Ε͍ͯΔ• ྫ͑ɺES4ͷ߹ҙܗͷࣦഊʹΑΓES3͔Β࣍ظόʔδϣϯͰ͋ΔES5·Ͱʹ10ʢES4ࣗମʹ2.5͘Β͍ͷϦιʔε͕͔͔͍ͬͯͨͱݴΘΕ͍ͯΔ)͕͔͔ͬͨ
ࠓͷECMAScript• Github্ͷେ͖ͳϓϩδΣΫτͱ͍͏ܗͰਐΊ͍ͯΔ• ϑΟʔυόοΫΛΑΓड͚͍͢ڥʹ• ϒϥβϕϯμʔ͚ͩͰͳ͘JavaScriptΛར༻͢Δ։ൃऀ͔ΒϑΟʔυόοΫΛΑΓड͚ΔͨΊʹ• ϓϩηεͷಁ໌Խ• ϛʔςΟϯάϊʔτશͯGithub্Ͱެ։͞Ε͍ͯΔ
ECMAScriptͷݱࡏͷࡦఆखॱ• ͦΕͧΕͷػೳʹ͍ͭͯݸผͷϓϩϙʔαϧͱͯ͠ਐΊΔ• ͜ͷϓϩϙʔαϧٞͷͨΊʹ࠷େ࠷খݶͷܗͷͷ͕૿͑ͨ• ऀ(νϟϯϐΦϯ)ͱstage0ʙ4͕͋Γɺstage4ʹͳΔͱECMAScriptͷ༷ʹmergeՄೳʹͳΔ
ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯhttp://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ
ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯstage3͔Βstage4ʹʲ2ͭҎ্ͷ࣮*ʳ͕ඞཁ* flag͖࣮ͰOK
TranspilerPolyfillʹ͍ͭͯ• Transpiler: ৽͍͠ߏจΛطଘͷػೳͰ࠶ݱͰ͖ΔΑ͏ʹιʔείʔυΛม͢Δπʔϧ• ex: Babel• Polyfill: ϓϩϙʔβϧͰՃ͞Εͨ৽͍͠ϝιουؔͳͲΛ࣮Λఏڙ͢ΔϥΠϒϥϦ• ex: babel-polyfill, whatwg-fetch
TranspilerPolyfillʹ͍ͭͯ• TranspilerPolyfill৽͍͠ߏจϝιουͳͲͷ࠶ݱΛࢼΈ͍ͯΔ͚ͩͰɺ෦తͳৼΔ͍࣮ߦʹ͍࣮ͭͯࡍͷϒϥβ࣮ͱҟͳΔͷͰҙ• ϒϥβຊମͷ࣮Λͨͣͯ͠ઌߦͯ͠ࢼ͢͜ͱ͕ग़དྷΔͷͰɺϓϩϙʔαϧͷϑΟʔυόοΫ͕༰қʹͳͬͨ
ECMAScriptݱঢ়·ͱΊ• ES5·Ͱશ༷ʹ͍ͭͯಉҙͷ্ͰϦϦʔε͍ͯͨ͠• ES6 (= ES2015)Ҏ༷߱ຖʹಉҙ͕ͳ͞ΕΔͱϦϦʔε• ࣮͕2ͭҎ্ଘࡏ͍ͯ͠Δɾςετ͕͋Δ• tc39ٕज़ҕһձͰͷঝೝ• ຖ6݄ࠒʹESXXXXͱศٓతͳ໊લ(λά)͕͚ΒΕΔ
“JavaScript”ͱ”ECMAScript"
“JavaScript”ͱ”ECMAScript"͔͜͜Β͕ຊ!!!!!!!!!!
JavaScriptͷॲཧܥ• ϒϥβʹࡌ͍ͬͯΔΤϯδϯͨͪ• Chrome: V8, Safari: JavaScriptCore, Firefox: SpiderMonkey ͳͲ• CLI্ͳͲͰར༻Ͱ͖Δॲཧܥ• NodeJS
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁ
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁPerl????
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁES5strict mode
"use strict" / Opt-in Strict mode• JavaScriptجຊతʹޙํޓੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕ͖ͯͨ• ES5ͷStrict modeաڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJSͷࢿͷͨΊ• ߏจϥϯλΠϜͷৼΔ͍ʹରͯ͠มߋΛՃ͑Δ• ϑΝΠϧͷઌ಄·ͨؔͷઌ಄Ͱ
"use strict" / Opt-in Strict mode• JavaScriptجຊతʹޙํޓੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕ͖ͯͨ• ES5ͷStrict modeաڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJSͷࢿͷͨΊ• ߏจϥϯλΠϜͷৼΔ͍ʹରͯ͠มߋΛՃ͑Δ• ϑΝΠϧͷઌ಄·ͨؔͷઌ಄ͰߏจΛՃ͢ΔͷͰͳ͘จࣈྻΛࣝผʹར༻͢Δ͜ͱͰඇରԠͷڥͰͦΕͳΓʹಈ͘Α͏ʹͳ͍ͬͯΔ(ͨͩ͠ৼΔ͍͕ҟͳΔͷͰҙਤ௨Γʹಈ͔ͳ͍͜ͱ͕ଟ͍ͷͰҙ)
Strict modeͰมΘΔ͜ͱ• ۮൃతͳάϧʔόϧมͷೖΛΤϥʔʹ• ͍͔ͭ͘ͷ߹ʹTypeError ྫ֎͕ൃੜ͢ΔΑ͏ʹʢҎԼͦͷྫʣ• NaN ͷೖ• JSͰ NaN ΩʔϫʔυͰͳ͘άϧʔόϧม• getterϓϩύςΟͷೖ• ΦϒδΣΫτʹॏෳͨ͠ϓϩύςΟΛઃఆ͢Δ
Strict modeͰมΘΔ͜ͱ• implementsɺinterfaceɺletɺpackageɺprivateɺprotectedɺpublicɺstaticɺyieldΛ༧ޠʹՃ• with Λ͏ͱSyntax Errorʹ• thisͷৼΔ͍ͷมߋ• τοϓϨϕϧ·ͨؔҎ֎ͰͷؔએݴΛΤϥʔʹͳͲ
this in JS• JavaScriptͷthisͦΕ͚ͩͰ1ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ͕͋Δ
this in JS• JavaScriptͷthisͦΕ͚ͩͰ1ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ͕͋ΔFrom http://efcl.info/2018/01/04/what-is-this/
this in JS• JavaScriptͷthisͦΕ͚ͩͰ1ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ͕͋Δ• JSΛॻ͍͍ͯΔͱͱʹ͔͘thisͰϋϚΔɻ͜ΕͰ͔ͱϋϚΔɻ• ࠷ۙΞϩʔؔͳͲͷ͓ӄͰϚγʹͳͬͨ
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁES6spread parameter
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁjQuery
jQuery• ΈΜͳେ͖jQuery• JSjQueryΛ༻͍ͨͷ͔͠ॻ͍ͨ͜ͱͳ͍ਓଟ͍͔?• $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
jQueryͱJavaScript• JS͕DOMૢ࡞ʹΑΔUIߏஙͳͲͷϋʔυϧ͕ҰؾʹԼ͕ͬͨ• ϝιουνΣʔϯͰॻ͚Δͷਓؾͩͬͨ• jQueryϓϥάΠϯΛར༻ͨ͠Ξχϝʔγϣϯ৭ʑͳύʔπ(ྫ͑lightbox)Λར༻ͨ͠WebαΠτ͕രൃతʹ૿͑ͨ• jQuery mobileͱ͍͏ϞόΠϧରԠͤ͞Δͷ͋ͬͨ• WebαΠτͰෳͷϓϥάΠϯΛͬͨΓɺUIຖʹ৭ʑͳίʔυΛॻ͍ͯఏڙ͢Δͱ͍͏͜ͱҰൠతʹͳͬͨ
ͦͷଞͷஶ໊ͳJavaScriptϥΠϒϥϦ• Backbone.js• prototype.js• YUI Library• AngularJS• React• VueJS
2009:AngularJS2005: prototype2006: jQuery2014:Vue2010:Backbone2013:React
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁDOM API
DOM APIͬͯԿʁ• DOM(Document Object Model)XML, HTML, SVGυΩϡϝϯτΛϓϩάϥϛϯάݴޠͰར༻͢ΔͨΊʹϞσϧԽͨ͠ͷ• จॻΛߏͰදݱ͍ͯ͠Δ• ϊʔυ͞ΒʹΠϕϯτϋϯυϥΛ͍࣋ͬͯΔ• ଟ͘JavaScriptͰར༻͞ΕΔ͕ɺDOMECMAScriptͷ༷ͷҰ෦Ͱͳ͍
DOM APIͬͯԿʁ• Q: DOM APIʹ͍ͭͯͷ༷ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ
DOM APIͬͯԿʁ• Q: DOM APIʹ͍ͭͯͷ༷ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ• A: W3C, WHATWG
DOM APIͬͯԿʁ• Q: DOM APIʹ͍ͭͯͷ༷ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ• A: W3C, WHATWG• HTMLͷ༷ࡦఆͷํͷҧ͍ͰᦻΛ͔ͭ͜ͱʹͳͬͨ2ͭͷஂମ͕ͦΕͧΕ༷Λ༗͍ͯ͠Δ• WHATWGͰDOM Standard, W3CͰDOM 4• جຊతʹಉ͕ͩ͡Ұ෦͕ࠩ͋Δ
༨ஊ: W3CͱWHATWG• 1999ͷHTML4.01קࠂҎ߱ɺHTMLͷΞοϓσʔτ͕ࢭ·͍ͬͯͨ• 2004 Apple, Opera, MozillaͰWHATWGઃཱ• 2007 ྆ऀ͕ڠྗମ੍ΛऔΔW3C HTML Working GroupΛઃཱ• 2012 קࠂΛઃཱ͍ͨ͠W3Cͱ։ൃͷܧଓΛॏࢹ͢ΔWHATWG͕ᦻΛ͔ͭ͜ͱʹͳΓɺ྆৫͕ผʑʹࡦఆ࡞ۀΛਐΊ͍ͯ͘͜ͱʹ• 2014 W3C HTML 5קࠂ͕ൃߦ
༨ஊ: W3CͱWHATWG• WHATWGͷDOM (Living) Standard• ϒϥβϕϯμʔWHATWGͷվగʹूத͍ͯ͠Δ• W3C͜ΕΒΛίϐʔ͢Δ͚ͩͰͳ͘Ұ෦ՃචΛͯ͠ဃΛ࢈ΜͩΓ͍ͯ͠Δ͜ͱʹରͯ͠൷͕͋Δ• ͨͩW3CͷจॻϩΠϠϦςΟʔϑϦʔ͕໌ه͞Ε͍ͯͨΓɺઐՈʹΑΔϫΠυϨϏϡʔ͕ͳ͞Ε͍ͯΔ(ͱ͍͏ͷ͕ओுͰ͋Δ)
ಉ͘͡ECMAScriptͷ༷ʹؚ·Εͳ͍ͷ• window• window.navigator• window.location• window.history• XMLHttpRequest• HTML Canvas 2D Context• WebStorage...etcHTML Living Standardʹؚ·Ε͍ͯΔ
օ͞Μͷॻ͍͍ͯΔ”JavaScript”ʁES module
JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ• ౷తͳJavaScriptͷϥΠϒϥϦͷಡΈࠐΈํ
JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ• scriptλάͰಡΈࠐΉख๏ͷ• window(άϩʔόϧ)Λհͯؔ͠Λڞ༗͢Δඞཁ͕͋Δ• άϩʔόϧྖҬͷԚછ• ར༻ॱΛߟ͑ͯɺॱ൪ʹλάΛهड़͢Δඞཁ͕͋Δ• ෳͷϑΝΠϧΛಡΈࠐΉඞཁ͕͋Δ• ಉҰΦϦδϯͷಉ࣌ଓ੍ݶ
֎෦ϥΠϒϥϦಡΈࠐΈͱ͖߹͏• JSͷߏจͱͯ͠֎෦ϥΠϒϥϦΛಡΈࠐΉํ๏Λఏڙ͢Δ͜ͱͰάϩʔόϧڥΛར༻ͨؔ͠ͷڞ༗ΛࢭΊΔ• ࣄલʹͦΕΒͷϥΠϒϥϦΛؚΜͩঢ়ଶͰ1ͭͷϑΝΠϧʹίϯύΠϧ͢Δ͜ͱͰଓϑΝΠϧαΠζͷΛղܾ͢Δ
JavaScriptͱpackage maneger• ֎෦ͷϥΠϒϥϦΛޮΑ͘ཧ͢ΔͨΊʹύοέʔδϚωʔδϟ͕ඞཁͰ͋ͬͨ• ͦͷͨΊʹొͨ͠ͷ͕• bower• npm
JavaScriptͱpackage maneger• JavaScriptͷpackage manager• bower• ϒϥβ͚ͷϥΠϒϥϦΛఏڙ͍ͯͨ͠• 2014ޙ͘Β͍͔ΒJSք۾͔Βෛ࠴ͱͯ͠ೝࣝ͞Ε͍ͯͨ• npm• Node͚ͷϥΠϒϥϦΛఏڙ͍͕ͯͨ͠ɺϒϥβ͚ͷϥΠϒϥϦѻ͏Α͏ʹͳͬͨ• 20147݄ʹjQuery͕npmͷΈͰbowerͷαϙʔτΛऴྃͨ͠• https://github.com/jquery/jquery/pull/1620
require vs import• CommonJS• module.exportsʹೖ͢Δ͜ͱͰॻ͖ग़͠• require()Λར༻ͯ͠ಡΈࠐΈ• ECMAScript• exportࣜΛར༻ͯ͠ॻ͖ग़͠• importࣜΛར༻ͯ͠ಡΈࠐΈ
#
͋ΕʁզʑECMAScriptܗࣜ͡Όͳ͍ͷΛͣͬͱͬͯͨͷʁ
ͳͥ require ͕ΘΕ͍ͯͨͷ͔• ES2015ͷͱ͖ʹγϯλοΫεͷΈΛܾΊ͍ͯͨ• ࣮ࡍʹॲཧܥ͕ͲͷΑ͏ʹϞδϡʔϧͷಡΈࠐΈΛߦ͏͔ʹ͍ͭͯECMAScriptͰఆٛ͞Ε͍ͯͳ͔ͬͨ➜ NodeJS: NodeJSਞӦ➜ϒϥβ: WHATWG• ͲͷΑ͏ͳৼΔ͍Ͱ࣮͢Δ͔Λ֤ਞӦ͕ܾఆ͢Δඞཁ͕͋ͬͨͷͰɺ༷ʹΑͬͯશͯ
۩ମతʹͲ͏͍͏͕͋ͬͨͷ͔• ϩʔυ࣌ʹͦͷϑΝΠϧ͕ESM͔Ͳ͏͔ΛΔඞཁ͕͋Δ• ࣝผࢠ(URI)ΛͲͷΑ͏ʹղܾ͢Δ͔• طଘͷCommonJSͱͷޓੑΛͲ͏͢Δ͔(NodeJS)
۩ମతʹͲ͏͍͏͕͋ͬͨͷ͔https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs ΑΓ
ES Modulesͷݱঢ়• ϒϥβChromeͱFirefoxରԠࡁΈ• NodeJS֦ுࢠΛmjsͱ࣮ͯ͠ߦ͢Δ͜ͱͰରԠ• Strict mode͕ڧ੍͞ΕɺτοϓϨϕϧthisundefinedʹ• __dirnameͳͲ͑ͳ͘ͳ͍ͬͯΔͷͰҙ
͜͜ʹͳ͍ʁ
͔ͯ͠͠ʁ
͔ͯ͠͠ʁCoffeeScript
CoffeeScript• Alt JSͷ1ͭɻRubyͳͲ͔ΒӨڹΛड͚ͨγϯλοΫεγϡΨʔ͍͔ͭ͘ͷػೳͳػೳ͕ਓؾͩͬͨ• Ruby on Rails 3.1Ҏ߱Ͱެࣜʹαϙʔτ͞Ε͍ͯͨ• AtomϦϦʔε֤࣌छϓϥάΠϯͳͲ͕CoffeeScriptͰॻ͔Ε͍ͯͨ• JavaScriptͷੜΈͷͰ͋ΔϒϨϯμϯɾΞΠΫʮJavaScriptͷະདྷʯʹӨڹΛ༩͑ͨͱ໌ݴ͍ͯ͠Δ• ͪͳΈʹࠓܧଓతʹΞοϓσʔτ͞Ε͍ͯͯɺݱࡏ2ܥ͕࠷৽൛
CoffeeScriptͷه๏;Γ͔͑ΓRuby෩ʹObjectϦςϥϧͷ{}Λলུ
CoffeeScriptͷه๏;Γ͔͑Γthis.ͷγϯλοΫεγϡΨʔ
CoffeeScriptͷه๏;Γ͔͑Γޙஔͷif/unless
arrow function
arrow functionfat arrowthisΛଋറ
arrow function͜Ε͕ޙʹES2015Ͱarrow functionΛಋೖ͢ΔͨΊͷ͖͔͚ͬʹͳͬͨ
2010 CoffeeScriptొ
JSͱESͷҧ͍ͷཧ• "ECMAScript"• JavaScriptݴޠͷ༷͕ऩΊΒΕ͍ͯΔ• ࣮ࡍͷϒϥβ্Ͱѻ͑ΔAPIผ్HTMLͷ༷DOMͷ༷ͱͯ͠ࡦఆ͞Ε͍ͯΔ• ্هશͯΛؚΊͯৗతʹ"JavaScript"ͱݺশ͍ͯ͠Δ
babel / browserify / Webpack ...etcͦΕͧΕԿͷͨΊʁ
Babel
Babel• Babel (چ: 6to5) ES2015Ҏ߱ͷه๏Λ֤छϒϥβͰಈ͘ES5Ҏલͷදݱʹม͢ΔTranspiler• ։ൃऀES2015Ҏ߱ͷه๏Ͱهड़ՄೳʹͳΓͭͭɺϢʔβʔʹରͯ͠ޙํޓੑΛ୲อͯ͠αʔϏεΛఏڙͰ͖Δ
Babel• babel-plugin• ECMAScriptͷ1ͭͷ༷ʹରԠͨ͠ม͕ϓϥάΠϯʹͳ͍ͬͯΔ• babel-preset• babel-pluginͷू߹ɻbabel-preset-2015ES2015ʹؚ·ΕΔͷͷू߹ɻbabel-preset-stage0, babel-preset-latest, babel-preset-envͳͲɻ
Babel• babel-register• NodeJSͰrequire͢ΔࡍʹઌಡΈͯ͠BabelͰcompile͢ΔΑ͏ʹͯ͘͠ΕΔ• babel-polyfill• globalείʔϓͷՃ͕ඞཁͳPromiseWeakmapstaticmethodͰ͋ΔArray.formͳͲΛར༻Մೳʹ͢Δ
Browserify
Browserify• CommonJSܗࣜͷmoduleͷղܾΛ͢Δπʔϧ• BrowserifyΛར༻͢Δ͜ͱͰCJS moduleΛར༻ͨ͠ϑΝΠϧΛϒϥβͰಡΊΔܗʹมͰ͖Δ• NodeJS͚ʹॻ͔ΕͨCJSܗࣜͷϥΠϒϥϦͳͲΛϒϥβͰ༻Մೳʹ
Webpack
Webpack• BrowserifyͷΑ͏ͳJSͷTranspilergulpͷΑ͏ͳλεΫϥϯφʔ͕ྲྀߦ͢ΔதɺͦΕΒΛΦʔϧΠϯϫϯతʹΈ߹Θͤͨπʔϧͱͯ͠ొ• JSϑΝΠϧͷόϯυϦϯά͚ͩͰͳ͘ɺCSS/LESSͳͲը૾ϑΝΠϧͳͲͷΞηοτJSϑΝΠϧͱಉ༷ʹѻ͏͜ͱ͕ग़དྷͨͷͰਓؾ
TypeScript
TypeScript• MicrosoftʹΑͬͯJSʹܕΛ༩͑ΔͨΊͷAltJS/Transpilerͱͯ͠։ൃ͞Εͨ• JavaScriptʹ੩తܕ͚ͳͲΛՃ͑ͨϓϩάϥϛϯάݴޠ• େنΞϓϦέʔγϣϯͷ։ൃʹ͑͏ΔΑ͏ʹͳ͍ͬͯΔ(?)
ͦͷଞͷπʔϧͨͪ• rollup• ES moduleܗࣜͷJSͷͨΊͷόϯυϦϯάπʔϧ• tree-shakingͬͯ͘ΕΔͧ• flowtype• JSʹ੩తܕ͚ͷͨΊͷه๏ΛՃ͢Δ• babelϓϥάΠϯͱͯ͠ಈ࡞͢ΔͷͰɺbabelͰॲཧ͢ΔࡍʹAST͔Βফͯ͘͠ΕΔ
ͦΕͧΕԿͷͨΊʁ• Babel• ES2015Ҏ߱ͷදݱΛඇରԠͷϒϥβͳͲͰಈ͘Α͏ʹม• Browserify• CommonJSܗࣜͷrequireΛղܾɻओʹrequireΛղܾͰ͖ͳ͍ϒϥβ͚• Webpack• JSͷόϯυϦϯά͚ͩͰͳ͘ɺCSSը૾ͳͲऔΓѻ͏
·ͱΊ
࣍ͷ֤ߦͷίʔυ(ϒϥβ|NodeJS)Ͱಈ͘?Έͳ͞Μ͑ΒΕ·͢ΑͶʁ
࣍ͷ֤ߦͷίʔυ(ϒϥβ|NodeJS)Ͱಈ͘?ղօ͞Μͷࣗྗݚڀʹظ͠·͢
·ͱΊ• "JavaScript"ͷ༷ECMAScript͚ͩͰͳ͘WHATWG HTML LivingStandardͳͲؚΜͰ͍Δ• ͜͜ʹࢸΔ·Ͱʹ৭ʑͳܦҢ͕͋ͬͨ• JavaScriptͷݱࡏͷπʔϧͨͪ͜Ε·Ͱͷྺ࢙ͷෛ࠴ͱະདྷͷࢿͷͨΊͷؒΛܨ͍Ͱ͘Ε͍ͯΔ• ίϯςΩετΛཧղͯ͠దࡐదॴͰֶΜͩΓ͍ͬͯ͜͏
ࢀߟจݙ• [ThinkIT] ୈ2ճɿGoogleWebͷৗࣝΛృΓସ͑ͨ (1/4) https://thinkit.co.jp/free/article/0612/22/2/• GoogleΤϯδχΞɿʮGoogle Mapsͷެ։ͰAJAXͷؔ৺͕ߴ·ͬͨʯ - ZDNet Japan https://japan.zdnet.com/article/20085943/• ECMAScript 4 ͷ Draft Λͬ͘͟ΓಡΜͰΈͨ - ͯͬࣽ͘ϒϩά http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/• JavaScript - Wikipedia https://ja.wikipedia.org/wiki/JavaScript• ECMAScript 4ͷඪ४Խ͕தࢭ͞ΕΔ | εϥυ σϕϩούʔ https://developers.srad.jp/story/08/08/19/0714251/• JavaScript 1.7 ͷ৽ػೳ: Days on the Moon http://nanto.asablo.jp/blog/2006/08/12/481381#js17-block-scope• JavaScript ୈ6൛, David Flanagan ஶɺଜ্ ྻ ༁, ΦϥΠϦʔδϟύϯ• JavaScript 2.0ECMAScript 3.1ϕʔεʹɺECMAScript 4ৡา | ϚΠφϏχϡʔε https://news.mynavi.jp/article/20080818-a027/• ECMAScript 5ϦϦʔε https://www.infoq.com/jp/news/2009/12/ecmascript5• ECMAScript6ͷ৽ػೳ - Qiita https://qiita.com/rana_kualu/items/1f98c1a642102f48aa78• ECMAScriptͷ͍ํ http://azu.github.io/slide/2018/node/ecmascript39.html• ES6ͷ৽ػೳʮclassߏจʯ – جૅฤ – | ES6ͷ͋Δʹੜ·Εͯ https://liginc.co.jp/266587• Node.jsͷES Modulesαϙʔτͷݱঢ়֬ೝͱඋ͑ - teppeis blog https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs• Strict Ϟʔυ - JavaScript | MDN https://developer.mozilla.org/ja/docs/Web/JavaScript/Strict_mode• WHATWG൛ͱW3C൛͕͋Δ༷ͨͪ - Unreviewed http://takenspc.hatenablog.com/entry/2015/12/03/235927• ͓ͬ͞ΜES6/ES2015,React.jsΛֶͿ https://www.slideshare.net/dcubeio/es6es2015reactjs
pastak
bkeepers
chrisshort
dougneiner
morganepeng
moore
iamctodd
tammielis
rmw
tanoku
cassininazir
pauljervisheath
jponch