2018年の”JavaScript” 再入門/re-learning-about-js-in-2018

by pastak

Slide 1

Slide 1 text

2018೥ͷ”JavaScript” ࠶ೖ໳ Pasta-K at KMC SpringCamp 2018 [email protected] / [email protected]

Slide 2

Slide 2 text

@pastak

Slide 3

Slide 3 text

• ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε5ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript

Slide 4

Slide 4 text

໨࣍ • JavaScriptͷྺ࢙ • JavaScriptͱECMAScript • ECMAScriptͷḷ͖ͬͯͨಓͷΓ • babel / browserify / Webpack ...͸ԿͷͨΊʁ • ·ͱΊ

Slide 5

Slide 5 text

͜ͷτʔΫͷλʔήοτ • JavaScriptʹ͍ͭͯաڈʹ৮Εͨ͜ͱ͕͋Δ΋ͷͷɺ͜͜਺೥ JavaScriptͷΤίγεςϜʹ৮Ε͍ͯͳ͍ਓ • ࠷ۙͷJavaScript͸ֶशίετ͕ߴ͍ͱײ͍ͯ͡Δਓ • JavaScriptʹ͍ͭͯೖ໳͍ͨ͠ͱߟ͍͑ͯΔਓ • ࠓޙJavaScriptΛ΍͍ͬͯ͘"Մೳੑ͕͋Δਓ

Slide 6

Slide 6 text

͜ͷτʔΫͷΰʔϧ • ʮ࠷ۙͷJavaScriptΛॻͨ͘Ίʹඞཁͳπʔϧ͕ଟֶͯ͘शίε τ͕ߴͯ͘ΫιʯΈ͍ͨͳ͜ͱΛಥવݴ͍ग़ͯ͠͠·Θͳ͍Α͏ ʹ͢Δ • ͱ͜ΖͰԿނ͜Μͳʹ৭ʑπʔϧ΍Β࢓༷΍Β͕࿩୊ʹͳ͍ͬͯ Δͷ͔Λ੔ཧͯ͠ཧղ͢Δ • ͱ͜ΖͰͱ͜ΖͰɺ ʮ“JavaScript”ͬͯԿ??ʯΛ೺Ѳ͢Δ

Slide 7

Slide 7 text

࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘?

Slide 8

Slide 8 text

͜ͷτʔΫͰ͸࿩͞ͳ͍͜ͱ • JavaScriptͷจ๏΍ه๏ɺ࠷ۙ௥Ճ͞ΕͨECMAScriptͷ಺༰ʹ͍ͭͯ • JavaScriptΛ༻͍ͨΞϓϦέʔγϣϯߏஙςΫχοΫ • JSͷςΫχοΫ஌Γ͍ͨਓ͸ڈ೥ͷय़߹॓ͷࢿྉΛಡΜͰ͘Ε • WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)໨ࢦ͢ // Speaker Deck • https://speakerdeck.com/pastak/webahurikesiyonte-60fpswo-ji-li-mu-zhi-su

Slide 9

Slide 9 text

JavaScriptͷྺ࢙Λ ৼΓฦͬͯΈΔ

Slide 10

Slide 10 text

օ͞Μ͕Πϝʔδ͢ΔJavaScript͸ͲΕͰ͢? • WebϖʔδΛ೐΍͔ʹ͢Δ΍ͭ • Google Maps / Web 2.0 / Ajax • Twitter / Facebook / SPA / PWA • NodeJS

Slide 11

Slide 11 text

ॳظͷϢʔεέʔε • WebαΠτΛ՚ඒʹ͢Δ • ͋Μ·Γศརͳ࢖ΘΕํ͕ͳ͔ͬͨ • ΫϦοΫͨ͠ΒalertΛग़͢ • จࣈ͕νΧνΧ͢Δ • mouseoverͰcursorΛม͑Δ

Slide 12

Slide 12 text

JavaScript҉ࠇ࣌୅ • 2000೥୅લ൒͸JSͷ੬ऑੑΛͭ͘΢ΣϒαΠτ΋ଟ͘JavaScript ΛແޮԽ͍ͯ͠Δਓͨͪ΋ଟ͍ͨ͘ • ϒϥΫϥ • Flashશ੝ظ

Slide 13

Slide 13 text

2005೥ Google Mapsര஀ • Google Maps͸ແݶʹεΫϩʔϧͰ͖Δ஍ਤαΠτͩͬͨ • ྫ͑͹Yahoo!ͷ஍ਤ͸্ԼࠨӈʹҠಈ͢ΔϦϯΫΛԡͯ͠Ҡಈ͍ͯͨ͠ • Google Maps͸͜ͷͱ͖XMLHttpRequestͳͲΛ࢖ͬͯμΠφϛοΫʹಡ ΈࠐΈ࢓૊ΈΛఏڙ͍ͯͨ͠ • AjaxΞϓϦέʔγϣϯ͕ਓؾΛത͢Δ͖͔͚ͬʹͳͬͨ

Slide 14

Slide 14 text

ਓʑ͸ ؾ෇͍ͨ

Slide 15

Slide 15 text

JavaScript ศར͡ΌΜ

Slide 16

Slide 16 text

JavaScriptʹର͢ΔೝࣝͷมԽ • WebαΠτΛ૽͕͘͢͠Δ͚ͩͷअຐͳଘࡏͩͱࢥΘΕ͍ͯͨ • ࣮ࡍɺJavaScriptΛUXʹܨ͛ΔΑ͏ͳΞϓϦέʔγϣϯ͕ͳ͔ͬͨ • DynamicHTMLͷඇޓ׵໰୊΍ඇಉظ௨৴ΛNN͕ͳ͔ͳ͔࣮૷͠ͳ͔ͬ ͨ͜ͱ΋͋Δ͕ɾɾɾ • ࣮ྫͱͯ͠ͷGoogle Maps͸Ϣʔβʔ͚ͩͰͳ͘։ൃऀʹ΋େ͖ͳӨڹΛ༩ ͑ͨ

Slide 17

Slide 17 text

JSͰϚογϡΞοϓ͢Δͷ͕ྲྀߦͬͨ • Google Maps Ajax APIΛ࢝Ίͱ͢ΔXMLΛఏڙ͢ΔAPI΍jsonpΛఏڙ͢ ΔAPI͕৭ʑͱొ৔ • ͜ΕΒΛ૊Έ߹ΘͤͯΞϓϦέʔγϣϯΛ࡞ΔʰϚογϡΞοϓʱ͕ྲྀߦ • ͜ͷྲྀΕΛ௥ਵ͢ΔϦονͳWebΞϓϦέʔγϣϯ͕ొ৔࢝͠ΊΔ • ʰWeb 2.0ʱ

Slide 18

Slide 18 text

ϒϥ΢βߴ଎Խ • 2008೥ Google Chromeͷొ৔ • Googleۘ੡JSΤϯδϯ V8͕଎͔ͬͨ • ଞͷJSΤϯδϯ΋௥ਵͯ͠ߴ଎Խͷಓ΁ • ͜Μͳʹ଎͘Ͱ͖ΔͳΒ΋ͬͱΞϓϦέʔγϣϯͷػೳΛدͤΕΔ ͧ

Slide 19

Slide 19 text

NodeJSొ৔ • 2009೥ V8Λར༻ͨ͠αʔόʔαΠυ্ͷJavaScript࣮ߦ؀ڥͱͯ͠ొ৔ • ΠϕϯτۦಈܕʹΑΔϊϯϒϩοΩϯάIOͳͲʹ஫໨͕ू·ͬͨ • ʰΫϥΠΞϯτ1ສ୆໰୊ʱ͕ى͖ͳ͍ • ͔͜͜ΒҰؾʹJS͸ϒϥ΢β্Ҏ֎Ͱ΋ಈ͘ϓϩάϥϛϯάݴޠʹ • ͦΕҎલ΋ಈ͔͢؀ڥ͸͕͋ͬͨ͋·ΓϝδϟʔʹͳΒͳ͔ͬͨ • ࠓ͸αʔόʔαΠυ͸΋ͪΖΜɺCLI༻ͷεΫϦϓτ΍πʔϧΛॻͨ͘Ίʹଟ͘ར༻͞Ε͍ͯΔ

Slide 20

Slide 20 text

ݱࡏͷJavaScriptΞϓϦέʔγϣϯ • Angular΍ReactɺVueͳͲΛ࢖ͬͨSPAΞϓϦέʔγϣϯ • pushStateʹΑΔཤྺॻ͖ࠐΈ + XHR/fetchʹΑΔσʔλऔಘ • Progressive Web Application • ϞόΠϧϒϥ΢βͰ΋σεΫτοϓϒϥ΢βͰ΋͍͍ײ͡ʹಈ͘ • ΦϑϥΠϯΩϟογϡɾϩʔΧϧετϨʔδ

Slide 21

Slide 21 text

JavaScriptͱECMAScript

Slide 22

Slide 22 text

ECMAScriptͱ͸Կ͔

Slide 23

Slide 23 text

·ͣ͸”ECMAScript”Λͬ͘͟Γͱ • JavaScriptͷඪ४࢓༷ͷ໊শ • Ecma Internationalͷtc39Ͱٞ࿦͞Ε͍ͯΔ • ݱࡏ͸Living StandardͷܗͰͲΜͲΜ࢓༷͕௥Ճ͞Ε͍ͯΔ

Slide 24

Slide 24 text

JavaScriptॳظ • 1995೥ NetScapeʹ৐ͤΔͨΊʹ։ൃ͞ΕΔ • Java͕ྲྀߦ͍ͬͯͨͷͰɺ໊લΛआΓ͖ͯͯJavaScriptʹ • 1996೥ IE3.0ʹ৐ͤΑ͏ͱ͢Δ΋ަবࣦഊ • Microsoft͕ಠࣗͷJScriptͱͯ͠։ൃ

Slide 25

Slide 25 text

JavaScriptඪ४Խ • 1997೥ JavaScriptͱJScriptͷ྆ํ͕͋Δঢ়گΛͳΜͱ͔͠Α͏ͱ͍͏ Ϟνϕʔγϣϯ͕Netscapeʹ͋ͬͨ • ͜ͷJavaScriptͷඪ४ԽΛECMAΠϯλʔφγϣφϧʹґཔ • ECMA-262ͷॳ൛͕ग़དྷΔ • “JavaScript”͸঎ඪͷ౎߹Ͱ࢖͑ͳ͍ͷͰɺ”ECMAScript”ʹ

Slide 26

Slide 26 text

ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ • ͜͜·Ͱ͸ॱௐͩͬͨɾɾɾ

Slide 27

Slide 27 text

ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ • ͜͜·Ͱ͸ॱௐͩͬͨɾɾɾ • ECMA-262 ୈ4൛Ͱࣄ݅͸ىͬͨ͜!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Slide 28

Slide 28 text

ECMAScript 4Ͱͷग़དྷࣄ • ਪਐ೿ • Adobe, Mozilla(چNetscape Navigationࣾ), Opera, Google • ଟ͘ͷ৽ػೳΛऔΓࠐΈJavaScriptΛେ෯ʹมߋ͢Δ • ൓ର೿ • Microsoft & Yahoo • ES3Λϕʔεʹػೳ௥Ճ΍όάमਖ਼ΛؚΜͩES3.1ͱͯ͠ެ։͢Δ

Slide 29

Slide 29 text

ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶃ • ActionScript 3.0(Adobe͕FlashΞϓϦέʔγϣϯͷͨΊʹ։ൃ͠ ͍ͯͨϓϩάϥϛϯάݴޠ)͔ΒऔΓࠐΜͩػೳ • class, interface, ܕ, ໊લۭؒ, package ͳͲ

Slide 30

Slide 30 text

ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶄ • JavaScript 1.7(NN΍Firefoxʹࡌ͍ͬͯͨJS͸౰࣌JavaScript 1.X ͱ͍͏όʔδϣϯ൪߸͕߱ΒΕ͍ͯͨ)͔ΒऔΓࠐΜͩػೳ • let, ෼ׂ୅ೖ, δΣωϨʔλʔ ͳͲ

Slide 31

Slide 31 text

ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶅ • ͦͷଞʹ΋਺ଟ͘ͷ৽ͨͳػೳΛऔΓࠐΉ͜ͱ͕ըࡦ͞Ε͍ͯͨ • ྫ͑͹ɾɾɾ

Slide 32

Slide 32 text

ςϯϓϨʔτ • C#Ͱ͸Genericͱݺ͹ΕͯΔ΍ͭ http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ

Slide 33

Slide 33 text

ԋࢉࢠΦʔόʔϩʔυ http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ

Slide 34

Slide 34 text

ECMAScript4ʹؔ͢Δܾண • ݁Ռͱͯ͠͸ES3.1 (aka ES Harmony)Λ΍͍ͬͯ͘͜ͱʹऩଋ (2008೥8݄) • ES4͸͜Ε·ͰͷESʹରͯ͠มߋ͕େ͖͗͢ΔͷͰԺ౰ʹ΍Γ͍ͨ • จ๏ͷޓ׵ੑͷ໰୊ͳͲ͔ΒաڈͷWebͷࢿ࢈ʹӨڹΛ༩͑ͯ͠·͍͔Ͷͳ͍ • ໊લۭؒ΍ύοέʔδͳͲ͸Webʹ͙ͦΘͳ͍ͷͰɺES3.1ͷٞ࿦ͷ্Ͱ͸Ұ੾ѻ Θͳ͍ • ͦΕҎ֎ͷػೳʹ͍ͭͯ͸ٞ࿦ͷର৅ͱͯ͠ѻ͏

Slide 35

Slide 35 text

ECMAScript5ϦϦʔε • ES Harmonyͱͯ͠ਐΊΒΕ͍ͯͨ࡞ۀ͸਱ʹ2009೥ɺES5ͱͯ͠Ϧ Ϧʔε͞Εͨ • ϝδϟʔόʔδϣϯ͕2্͕͍ͭͬͯΔ͕࣮ଶ͸3.0͔Β3.1΁ͷϚΠ φʔόʔδϣϯΞοϓ • Mozilla͕ਐΊ͍ͯͨJavaScript 1.X → 2.0΁ͷ࡞ۀ΋ESʹ४ڌ͢Δํ ޲ʹͳΓɺ͜ͷόʔδϣϯݺশ΋ߦΘΕͳ͘ͳͬͨ

Slide 36

Slide 36 text

ECMAScript 5ͷ৽ػೳ • JSON.parse, JSON.stringify ͷ௥Ճ • Array΁ͷϝιουͷ௥Ճ forEach, ﬁlter, map, reduce, indexOf • String΁ͷϝιουͷ௥Ճ trim • StrictϞʔυͷ௥Ճ ͳͲ

Slide 37

Slide 37 text

׻تͷECMAScript6ϦϦʔε • 2015೥ϦϦʔε • ਺ଟ͘ͷັྗతͳػೳ͕࢓༷ʹͳͬͨ!!!!!!!!!!!!!!!!!!! • Θ͍Θ͍

Slide 38

Slide 38 text

arrow function • () => {} Ͱؔ਺ࣜΛॻ͚Δ • this͕ͦͷએݴ࣌ͷίϯςΩετͷthisʹଋറ͞ΕΔ

Slide 39

Slide 39 text

enhanced object literals / destructuring • Objectͷkey͕ม਺໊ͱಉ࣌͡ʹলུՄೳ • ArrayͱObjectͰ෼ׂ୅ೖ͕Մೳʹ

Slide 40

Slide 40 text

Promise • JSͷίʔϧόοΫ஍ࠈ͔ΒਓʑΛղ์ • ͦΕ·Ͱਓʑ͸jQuery.defferͱ͔ʢyieldͱ͔ʣͰࣃΛ৯͍͠͹ͬ ͍ͯͨͷ͡Ό

Slide 41

Slide 41 text

Class • ͦΕ·Ͱਓʑ͸prototypeΛར༻ͯ͠΍͍͍ͬͯͬͯͨ

Slide 42

Slide 42 text

Class • ES6Ͱ͸Classߏจ͕௥Ճ͞Εͨ

Slide 43

Slide 43 text

ͦͷଞ • Symbol • Number.isNaN • Array.from / Array.ﬁnd • String.includes / String.repeat • Object.assign • ຤ඌ࠶ؼ࠷దԽ

Slide 44

Slide 44 text

ES6➜ES2015…ͦͯͦ͠ͷઌ΁ • ES6͸ES2015ʹվশɻҎ߱͸Living Standardํࣜʹ • ECMAScriptͷ࢓༷ॻͷυϥϑτ͸Github্ͷtc39/ecma262Ͱ؅ཧ͞Ε͍ͯΔ • ࠷৽ͷECMAScript࢓༷͸ https://tc39.github.io/ecma262/ • ຖ೥۠੾ΓΛ෇͚ͯҎ߱͸ES2016, ES2017ͱTagΛ෇͚Δ • ͜ͷλΠϛϯάͰStage4ʹೖ͍ͬͯΔ࢓༷Λର৅ʹ͢Δ

Slide 45

Slide 45 text

http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ

Slide 46

Slide 46 text

ࠓͷECMAScript • ͦΕ·Ͱ͸શͯͷ࢓༷͕߹ҙ͞ΕͨޙʹϦϦʔε͞Ε͍͕ͯͨɺݱ ࡏͷES͸߹ҙ͕औΕͨ࢓༷͔Βॱ࣍ϦϦʔε͞Ε͍ͯΔ • ྫ͑͹ɺES4ͷ߹ҙܗ੒ͷࣦഊʹΑΓES3͔Β࣍ظόʔδϣϯͰ͋ ΔES5·Ͱʹ10೥ʢES4ࣗମʹ΋2.5೥͘Β͍ͷϦιʔε͕͔͔ͬ ͍ͯͨͱݴΘΕ͍ͯΔ)͕͔͔ͬͨ

Slide 47

Slide 47 text

ࠓͷECMAScript • Github্ͷେ͖ͳϓϩδΣΫτͱ͍͏ܗͰਐΊ͍ͯΔ • ϑΟʔυόοΫΛΑΓड͚΍͍͢؀ڥʹ • ϒϥ΢βϕϯμʔ͚ͩͰͳ͘JavaScriptΛར༻͢Δ։ൃऀ͔Β΋ ϑΟʔυόοΫΛΑΓड͚ΔͨΊʹ • ϓϩηεͷಁ໌Խ • ϛʔςΟϯάϊʔτ΋શͯGithub্Ͱެ։͞Ε͍ͯΔ

Slide 48

Slide 48 text

ECMAScriptͷݱࡏͷࡦఆखॱ • ͦΕͧΕͷػೳʹ͍ͭͯݸผͷϓϩϙʔαϧͱͯ͠ਐΊΔ • ͜ͷϓϩϙʔαϧ΋ٞ࿦ͷͨΊʹ࠷େ࠷খݶͷܗͷ΋ͷ͕૿͑ͨ • ੹೚ऀ(νϟϯϐΦϯ)ͱstage0ʙ4͕͋Γɺstage4ʹͳΔͱ ECMAScriptͷ࢓༷ʹmergeՄೳʹͳΔ

Slide 49

Slide 49 text

ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯ http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ

Slide 50

Slide 50 text

ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯ stage3͔Βstage4ʹ͸ ʲ2ͭҎ্ͷ࣮૷*ʳ͕ඞཁ * ﬂag෇͖࣮૷Ͱ΋OK

Slide 51

Slide 51 text

Transpiler΍Polyfillʹ͍ͭͯ • Transpiler: ৽͍͠ߏจΛطଘͷػೳͰ࠶ݱͰ͖ΔΑ͏ʹιʔείʔυΛม ׵͢Δπʔϧ • ex: Babel • Polyfill: ϓϩϙʔβϧͰ௥Ճ͞Εͨ৽͍͠ϝιου΍ؔ਺ͳͲΛ࣮૷Λఏ ڙ͢ΔϥΠϒϥϦ • ex: babel-polyfill, whatwg-fetch

Slide 52

Slide 52 text

Transpiler΍Polyﬁllʹ͍ͭͯ • Transpiler΍Polyﬁll͸৽͍͠ߏจ΍ϝιουͳͲͷ࠶ݱΛࢼΈ͍ͯ Δ͚ͩͰɺ಺෦తͳৼΔ෣͍΍࣮ߦ଎౓ʹ͍ͭͯ͸࣮ࡍͷϒϥ΢β ࣮૷ͱ͸ҟͳΔͷͰ஫ҙ • ϒϥ΢βຊମ΁ͷ࣮૷Λ଴ͨͣͯ͠ઌߦͯ͠ࢼ͢͜ͱ͕ग़དྷΔͷͰɺ ϓϩϙʔαϧ΁ͷϑΟʔυόοΫ͕༰қʹͳͬͨ

Slide 53

Slide 53 text

ECMAScriptݱঢ়·ͱΊ • ES5·Ͱ͸શ࢓༷ʹ͍ͭͯಉҙͷ্ͰϦϦʔε͍ͯͨ͠ • ES6 (= ES2015)Ҏ߱͸࢓༷ຖʹಉҙ͕ͳ͞ΕΔͱϦϦʔε • ࣮૷͕2ͭҎ্ଘࡏ͍ͯ͠Δɾςετ͕͋Δ • tc39ٕज़ҕһձͰͷঝೝ • ຖ೥6݄ࠒʹESXXXXͱศٓతͳ໊લ(λά)͕෇͚ΒΕΔ

Slide 54

Slide 54 text

JavaScriptͱECMAScript

Slide 55

Slide 55 text

“JavaScript”ͱ”ECMAScript"

Slide 56

Slide 56 text

“JavaScript”ͱ”ECMAScript" ͔͜͜Β͕ຊ୊!!!!!!!!!!

Slide 57

Slide 57 text

JavaScriptͷॲཧܥ • ϒϥ΢βʹࡌ͍ͬͯΔΤϯδϯͨͪ • Chrome: V8, Safari: JavaScriptCore, Firefox: SpiderMonkey ͳͲ • CLI্ͳͲͰར༻Ͱ͖Δॲཧܥ • NodeJS

Slide 58

Slide 58 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ

Slide 59

Slide 59 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ Perl????

Slide 60

Slide 60 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES5 strict mode

Slide 61

Slide 61 text

"use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ • ES5ͷStrict mode͸աڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJS΁ͷ౤ࢿͷͨΊ • ߏจ΍ϥϯλΠϜͷৼΔ෣͍ʹରͯ͠มߋΛՃ͑Δ • ϑΝΠϧͷઌ಄·ͨ͸ؔ਺ͷઌ಄Ͱ

Slide 62

Slide 62 text

"use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ • ES5ͷStrict mode͸աڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJS΁ͷ౤ࢿͷͨΊ • ߏจ΍ϥϯλΠϜͷৼΔ෣͍ʹରͯ͠มߋΛՃ͑Δ • ϑΝΠϧͷઌ಄·ͨ͸ؔ਺ͷઌ಄Ͱ ߏจΛ௥Ճ͢ΔͷͰ͸ͳ͘จࣈྻΛࣝผ ʹར༻͢Δ͜ͱͰඇରԠͷ؀ڥͰ΋ͦΕ ͳΓʹಈ͘Α͏ʹͳ͍ͬͯΔ (ͨͩ͠ৼΔ෣͍͕ҟͳΔͷͰҙਤ௨Γ ʹಈ͔ͳ͍͜ͱ͕ଟ͍ͷͰ஫ҙ)

Slide 63

Slide 63 text

Strict modeͰมΘΔ͜ͱ • ۮൃతͳάϧʔόϧม਺΁ͷ୅ೖΛΤϥʔʹ • ͍͔ͭ͘ͷ৔߹ʹTypeError ྫ֎͕ൃੜ͢ΔΑ͏ʹʢҎԼ͸ͦͷྫʣ • NaN ΁ͷ୅ೖ • JSͰ͸ NaN ͸ΩʔϫʔυͰ͸ͳ͘άϧʔόϧม਺ • getterϓϩύςΟ΁ͷ୅ೖ • ΦϒδΣΫτʹॏෳͨ͠ϓϩύςΟΛઃఆ͢Δ

Slide 64

Slide 64 text

Strict modeͰมΘΔ͜ͱ • implementsɺinterfaceɺletɺpackageɺprivateɺprotectedɺpublicɺstaticɺyield Λ༧໿ޠʹ௥Ճ • with Λ࢖͏ͱSyntax Errorʹ • thisͷৼΔ෣͍ͷมߋ • τοϓϨϕϧ·ͨ͸ؔ਺಺Ҏ֎Ͱͷؔ਺એݴΛΤϥʔʹ ͳͲ

Slide 65

Slide 65 text

this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ

Slide 66

Slide 66 text

this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ From http://efcl.info/2018/01/04/what-is-this/

Slide 67

Slide 67 text

this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ From http://efcl.info/2018/01/04/what-is-this/

Slide 68

Slide 68 text

this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ • JSΛॻ͍͍ͯΔͱͱʹ͔͘thisͰϋϚΔɻ͜ΕͰ΋͔ͱϋϚΔɻ • ࠷ۙ͸Ξϩʔؔ਺ͳͲͷ͓ӄͰϚγʹ͸ͳͬͨ

Slide 69

Slide 69 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES6 spread parameter

Slide 70

Slide 70 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ jQuery

Slide 71

Slide 71 text

jQuery • ΈΜͳେ޷͖jQuery • JS͸jQueryΛ༻͍ͨ΋ͷ͔͠ॻ͍ͨ͜ͱͳ͍ਓ΋ଟ͍͔΋? • $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

Slide 72

Slide 72 text

jQueryͱJavaScript • JS͕DOMૢ࡞ʹΑΔUIߏஙͳͲͷϋʔυϧ͕ҰؾʹԼ͕ͬͨ • ϝιουνΣʔϯͰॻ͚Δͷ΋ਓؾͩͬͨ • jQueryϓϥάΠϯΛར༻ͨ͠Ξχϝʔγϣϯ΍৭ʑͳύʔπ(ྫ͑͹lightbox)Λར༻ ͨ͠WebαΠτ͕രൃతʹ૿͑ͨ • jQuery mobileͱ͍͏ϞόΠϧରԠͤ͞Δͷ΋͋ͬͨ • WebαΠτͰෳ਺ͷϓϥάΠϯΛ࢖ͬͨΓɺUIຖʹ৭ʑͳίʔυΛॻ͍ͯఏڙ͢Δͱ ͍͏͜ͱ΋Ұൠతʹͳͬͨ

Slide 73

Slide 73 text

ͦͷଞͷஶ໊ͳJavaScriptϥΠϒϥϦ • Backbone.js • prototype.js • YUI Library • AngularJS • React • VueJS

Slide 74

Slide 74 text

2009೥:AngularJS 2005೥: prototype 2006೥: jQuery 2014೥:Vue 2010೥:Backbone 2013೥:React

Slide 75

Slide 75 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ DOM API

Slide 76

Slide 76 text

DOM APIͬͯԿʁ • DOM(Document Object Model)͸XML, HTML, SVGυΩϡϝϯτΛ ϓϩάϥϛϯάݴޠͰར༻͢ΔͨΊʹϞσϧԽͨ͠΋ͷ • จॻΛ໦ߏ଄Ͱදݱ͍ͯ͠Δ • ϊʔυ͸͞ΒʹΠϕϯτϋϯυϥΛ͍࣋ͬͯΔ • ଟ͘͸JavaScriptͰར༻͞ΕΔ͕ɺDOM͸ECMAScriptͷ࢓༷ͷҰ ෦Ͱ͸ͳ͍

Slide 77

Slide 77 text

DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ

Slide 78

Slide 78 text

DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ • A: W3C, WHATWG

Slide 79

Slide 79 text

DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ • A: W3C, WHATWG • HTMLͷ࢓༷ࡦఆͷํ਑ͷҧ͍ͰᦻΛ෼͔ͭ͜ͱʹͳͬͨ2ͭͷஂ ମ͕ͦΕͧΕ࢓༷Λ༗͍ͯ͠Δ • WHATWGͰ͸DOM Standard, W3CͰ͸DOM 4 • جຊతʹ͸ಉ͕ͩ͡Ұ෦ࠩ෼͕͋Δ

Slide 80

Slide 80 text

༨ஊ: W3CͱWHATWG • 1999೥ͷHTML4.01קࠂҎ߱ɺ௕೥HTMLͷΞοϓσʔτ͕ࢭ·͍ͬͯͨ • 2004೥ Apple, Opera, MozillaͰWHATWGઃཱ • 2007೥ ྆ऀ͕ڠྗମ੍ΛऔΔW3C HTML Working GroupΛઃཱ • 2012೥ קࠂΛઃཱ͍ͨ͠W3Cͱ։ൃͷܧଓΛॏࢹ͢ΔWHATWG͕ᦻΛ෼͔ͭ͜ͱʹ ͳΓɺ྆૊৫͕ผʑʹࡦఆ࡞ۀΛਐΊ͍ͯ͘͜ͱʹ • 2014೥ W3C HTML 5קࠂ͕ൃߦ

Slide 81

Slide 81 text

༨ஊ: W3CͱWHATWG • WHATWGͷDOM (Living) Standard • ϒϥ΢βϕϯμʔ͸WHATWGͷվగʹूத͍ͯ͠Δ • W3C͸͜ΕΒΛίϐʔ͢Δ͚ͩͰͳ͘Ұ෦ՃචΛͯ͠ဃ཭Λ࢈ΜͩΓ͍ͯ͠Δ ͜ͱʹରͯ͠൷൑͕͋Δ • ͨͩW3Cͷจॻ͸ϩΠϠϦςΟʔϑϦʔ͕໌ه͞Ε͍ͯͨΓɺઐ໳ՈʹΑΔϫ ΠυϨϏϡʔ͕ͳ͞Ε͍ͯΔ(ͱ͍͏ͷ͕ओுͰ͋Δ)

Slide 82

Slide 82 text

ಉ͘͡ECMAScriptͷ࢓༷ʹؚ·Εͳ͍΋ͷ • window • window.navigator • window.location • window.history • XMLHttpRequest • HTML Canvas 2D Context • WebStorage ...etc HTML Living Standardʹ ؚ·Ε͍ͯΔ

Slide 83

Slide 83 text

օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES module

Slide 84

Slide 84 text

JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ • ఻౷తͳJavaScriptͷϥΠϒϥϦͷಡΈࠐΈํ

Slide 85

Slide 85 text

JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ • scriptλάͰಡΈࠐΉख๏ͷ໰୊఺ • window(άϩʔόϧ)Λհͯؔ͠਺Λڞ༗͢Δඞཁ͕͋Δ • άϩʔόϧྖҬͷԚછ • ར༻ॱΛߟ͑ͯɺॱ൪ʹλάΛهड़͢Δඞཁ͕͋Δ • ෳ਺ͷϑΝΠϧΛಡΈࠐΉඞཁ͕͋Δ • ಉҰΦϦδϯͷಉ࣌઀ଓ਺੍ݶ

Slide 86

Slide 86 text

֎෦ϥΠϒϥϦಡΈࠐΈ໰୊ͱ޲͖߹͏ • JSͷߏจͱͯ͠֎෦ϥΠϒϥϦΛಡΈࠐΉํ๏Λఏڙ͢Δ͜ͱͰ άϩʔόϧ؀ڥΛར༻ͨؔ͠਺ͷڞ༗ΛࢭΊΔ • ࣄલʹͦΕΒͷϥΠϒϥϦΛؚΜͩঢ়ଶͰ1ͭͷϑΝΠϧʹίϯύ Πϧ͢Δ͜ͱͰ઀ଓ਺΍ϑΝΠϧαΠζͷ໰୊Λղܾ͢Δ

Slide 87

Slide 87 text

JavaScriptͱpackage maneger • ֎෦ͷϥΠϒϥϦΛޮ཰Α͘؅ཧ͢ΔͨΊʹ͸ύοέʔδϚωʔδϟ ͕ඞཁͰ͋ͬͨ • ͦͷͨΊʹొ৔ͨ͠ͷ͕ • bower • npm

Slide 88

Slide 88 text

JavaScriptͱpackage maneger • JavaScriptͷpackage manager • bower • ϒϥ΢β޲͚ͷϥΠϒϥϦΛఏڙ͍ͯͨ͠ • 2014೥ޙ൒͘Β͍͔ΒJSք۾͔Β͸ෛ࠴ͱͯ͠ೝࣝ͞Ε͍ͯͨ • npm • Node޲͚ͷϥΠϒϥϦΛఏڙ͍͕ͯͨ͠ɺϒϥ΢β޲͚ͷϥΠϒϥϦ΋ѻ ͏Α͏ʹͳͬͨ • 2014೥7݄ʹ͸jQuery͕npmͷΈͰbowerͷαϙʔτΛऴྃͨ͠ • https://github.com/jquery/jquery/pull/1620

Slide 89

Slide 89 text

require vs import • CommonJS • module.exportsʹ୅ೖ͢Δ͜ͱͰॻ͖ग़͠ • require()Λར༻ͯ͠ಡΈࠐΈ • ECMAScript • exportࣜΛར༻ͯ͠ॻ͖ग़͠ • importࣜΛར༻ͯ͠ಡΈࠐΈ

Slide 90

Slide 90 text

Slide 91

Slide 91 text

͋Εʁզʑ͸ ECMAScriptܗࣜ ͡Όͳ͍ͷΛ ͣͬͱ࢖ͬͯͨͷʁ

Slide 92

Slide 92 text

ͳͥ require ͕࢖ΘΕ͍ͯͨͷ͔ • ES2015ͷͱ͖ʹ͸γϯλοΫεͷΈΛܾΊ͍ͯͨ • ࣮ࡍʹॲཧܥ͕ͲͷΑ͏ʹϞδϡʔϧͷಡΈࠐΈΛߦ͏͔ʹ͍ͭͯ͸ECMAScriptͰఆٛ͞ Ε͍ͯͳ͔ͬͨ ➜ NodeJS: NodeJSਞӦ ➜ϒϥ΢β: WHATWG • ͲͷΑ͏ͳৼΔ෣͍Ͱ࣮૷͢Δ͔Λ֤ਞӦ͕ܾఆ͢Δඞཁ͕͋ͬͨͷͰɺ࢓༷ʹΑͬͯ શͯ

Slide 93

Slide 93 text

۩ମతʹͲ͏͍͏໰୊͕͋ͬͨͷ͔ • ϩʔυ࣌ʹͦͷϑΝΠϧ͕ESM͔Ͳ͏͔Λ஌Δඞཁ͕͋Δ • ࣝผࢠ(URI)ΛͲͷΑ͏ʹղܾ͢Δ͔ • طଘͷCommonJSͱͷޓ׵ੑΛͲ͏͢Δ͔(NodeJS)

Slide 94

Slide 94 text

۩ମతʹͲ͏͍͏໰୊͕͋ͬͨͷ͔ https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs ΑΓ

Slide 95

Slide 95 text

ES Modulesͷݱঢ় • ϒϥ΢β͸ChromeͱFirefox͸ରԠࡁΈ • NodeJS͸֦ுࢠΛmjsͱ࣮ͯ͠ߦ͢Δ͜ͱͰରԠ • Strict mode͕ڧ੍͞ΕɺτοϓϨϕϧthis͸undeﬁnedʹ • __dirnameͳͲ΋࢖͑ͳ͘ͳ͍ͬͯΔͷͰ஫ҙ

Slide 96

Slide 96 text

͜͜ʹͳ͍ʁ

Slide 97

Slide 97 text

΋͔ͯ͠͠ʁ

Slide 98

Slide 98 text

΋͔ͯ͠͠ʁ CoffeeScript

Slide 99

Slide 99 text

CoffeeScript • Alt JSͷ1ͭɻRubyͳͲ͔ΒӨڹΛड͚ͨγϯλοΫεγϡΨʔ΍͍͔ͭ͘ ͷػೳͳػೳ͕ਓؾͩͬͨ • Ruby on Rails 3.1Ҏ߱Ͱެࣜʹαϙʔτ͞Ε͍ͯͨ • Atom΋ϦϦʔε࣌͸֤छϓϥάΠϯͳͲ͕CoffeeScriptͰॻ͔Ε͍ͯͨ • JavaScriptͷੜΈͷ਌Ͱ͋ΔϒϨϯμϯɾΞΠΫ΋ʮJavaScriptͷະདྷʯʹ ӨڹΛ༩͑ͨͱ໌ݴ͍ͯ͠Δ • ͪͳΈʹࠓ΋ܧଓతʹΞοϓσʔτ͞Ε͍ͯͯɺݱࡏ͸2ܥ͕࠷৽൛

Slide 100

Slide 100 text

CoffeeScriptͷه๏;Γ͔͑Γ Ruby෩ʹ ObjectϦςϥϧͷ{}Λলུ

Slide 101

Slide 101 text

CoffeeScriptͷه๏;Γ͔͑Γ this.ͷγϯλοΫεγϡΨʔ

Slide 102

Slide 102 text

CoffeeScriptͷه๏;Γ͔͑Γ ޙஔͷif/unless

Slide 103

Slide 103 text

arrow function

Slide 104

Slide 104 text

arrow function

Slide 105

Slide 105 text

arrow function fat arrow͸thisΛଋറ

Slide 106

Slide 106 text

arrow function ͜Ε͕ޙʹES2015Ͱ arrow functionΛಋೖ͢ΔͨΊͷ͖͔͚ͬʹ ͳͬͨ

Slide 107

Slide 107 text

2010೥ CoffeeScriptొ৔

Slide 108

Slide 108 text

JSͱESͷҧ͍ͷ੔ཧ • "ECMAScript" • JavaScriptݴޠͷ࢓༷͕ऩΊΒΕ͍ͯΔ • ࣮ࡍͷϒϥ΢β্Ͱѻ͑ΔAPI͸ผ్HTMLͷ࢓༷΍DOMͷ࢓༷ͱ ͯ͠ࡦఆ͞Ε͍ͯΔ • ্هશͯΛؚΊͯ೔ৗతʹ͸"JavaScript"ͱݺশ͍ͯ͠Δ

Slide 109

Slide 109 text

babel / browserify / Webpack ...etc ͸ͦΕͧΕԿͷͨΊʁ

Slide 110

Slide 110 text

Babel

Slide 111

Slide 111 text

Babel • Babel (چ: 6to5) ͸ES2015Ҏ߱ͷه๏Λ֤छϒϥ΢βͰಈ͘ES5 Ҏલͷදݱʹม׵͢ΔTranspiler • ։ൃऀ͸ES2015Ҏ߱ͷه๏Ͱهड़ՄೳʹͳΓͭͭ΋ɺϢʔβʔ ʹରͯ͠͸ޙํޓ׵ੑΛ୲อͯ͠αʔϏεΛఏڙͰ͖Δ

Slide 112

Slide 112 text

Babel • babel-plugin • ECMAScriptͷ1ͭͷ࢓༷ʹରԠͨ͠ม׵͕ϓϥάΠϯʹͳ͍ͬͯΔ • babel-preset • babel-pluginͷू߹ɻbabel-preset-2015͸ES2015ʹؚ·ΕΔ΋ͷ ͷू߹ɻbabel-preset-stage0, babel-preset-latest, babel-preset- envͳͲɻ

Slide 113

Slide 113 text

Babel • babel-register • NodeJSͰrequire͢ΔࡍʹઌಡΈͯ͠BabelͰcompile͢ΔΑ͏ʹ͠ ͯ͘ΕΔ • babel-polyﬁll • globalείʔϓ΁ͷ௥Ճ͕ඞཁͳPromise΍Weakmap΍static methodͰ͋ΔArray.formͳͲΛར༻Մೳʹ͢Δ

Slide 114

Slide 114 text

Browserify

Slide 115

Slide 115 text

Browserify • CommonJSܗࣜͷmoduleͷղܾΛ͢Δπʔϧ • BrowserifyΛར༻͢Δ͜ͱͰCJS moduleΛར༻ͨ͠ϑΝΠϧ Λϒϥ΢βͰ΋ಡΊΔܗʹม׵Ͱ͖Δ • NodeJS޲͚ʹॻ͔ΕͨCJSܗࣜͷϥΠϒϥϦͳͲΛϒϥ΢βͰ ΋࢖༻Մೳʹ

Slide 116

Slide 116 text

Webpack

Slide 117

Slide 117 text

Webpack • BrowserifyͷΑ͏ͳJSͷTranspiler΍gulpͷΑ͏ͳλεΫϥϯ φʔ͕ྲྀߦ͢ΔதɺͦΕΒΛΦʔϧΠϯϫϯతʹ૊Έ߹Θͤͨ πʔϧͱͯ͠ొ৔ • JSϑΝΠϧͷόϯυϦϯά͚ͩͰͳ͘ɺCSS/LESSͳͲ΍ը૾ ϑΝΠϧͳͲͷΞηοτ΋JSϑΝΠϧͱಉ༷ʹѻ͏͜ͱ͕ग़དྷ ͨͷͰਓؾ

Slide 118

Slide 118 text

TypeScript

Slide 119

Slide 119 text

TypeScript • MicrosoftʹΑͬͯJSʹܕΛ༩͑ΔͨΊͷAltJS/Transpilerͱͯ͠ ։ൃ͞Εͨ • JavaScriptʹ੩తܕ෇͚ͳͲΛՃ͑ͨϓϩάϥϛϯάݴޠ • େن໛ΞϓϦέʔγϣϯͷ։ൃʹ΋଱͑͏ΔΑ͏ʹͳ͍ͬͯΔ(?)

Slide 120

Slide 120 text

ͦͷଞͷπʔϧͨͪ • rollup • ES moduleܗࣜͷJSͷͨΊͷόϯυϦϯάπʔϧ • tree-shaking΋΍ͬͯ͘ΕΔͧ • ﬂowtype • JSʹ੩తܕ෇͚ͷͨΊͷه๏Λ௥Ճ͢Δ • babelϓϥάΠϯͱͯ͠ಈ࡞͢ΔͷͰɺbabelͰॲཧ͢ΔࡍʹAST͔Βফͯ͘͠ΕΔ

Slide 121

Slide 121 text

babel / browserify / Webpack ...etc ͸ͦΕͧΕԿͷͨΊʁ

Slide 122

Slide 122 text

ͦΕͧΕԿͷͨΊʁ • Babel • ES2015Ҏ߱ͷදݱΛඇରԠͷϒϥ΢βͳͲͰ΋ಈ͘Α͏ʹม׵ • Browserify • CommonJSܗࣜͷrequireΛղܾɻओʹrequireΛղܾͰ͖ͳ͍ϒϥ΢β޲͚ • Webpack • JSͷόϯυϦϯά͚ͩͰͳ͘ɺCSS΍ը૾ͳͲ΋औΓѻ͏

Slide 123

Slide 123 text

·ͱΊ

Slide 124

Slide 124 text

࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘?

Slide 125

Slide 125 text

࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘? Έͳ͞Μ౴͑ΒΕ·͢ΑͶʁ

Slide 126

Slide 126 text

࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘? ղ౴͸օ͞Μͷࣗྗݚڀʹظ଴͠·͢

Slide 127

Slide 127 text

·ͱΊ • "JavaScript"ͷ࢓༷͸ECMAScript͚ͩͰͳ͘WHATWG HTML Living StandardͳͲ΋ؚΜͰ͍Δ • ͜͜ʹࢸΔ·Ͱʹ৭ʑͳܦҢ͕͋ͬͨ • JavaScriptͷݱࡏͷπʔϧͨͪ͸͜Ε·Ͱͷྺ࢙ͷෛ࠴ͱະདྷͷ౤ࢿͷͨ ΊͷؒΛܨ͍Ͱ͘Ε͍ͯΔ • ίϯςΩετΛཧղͯ͠దࡐదॴͰֶΜͩΓ࢖͍ͬͯ͜͏

Slide 128

Slide 128 text

ࢀߟจݙ • [ThinkIT] ୈ2ճɿGoogle͸WebͷৗࣝΛృΓସ͑ͨ (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.0͸ECMAScript 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