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

KMC春合宿2018での発表資料です

Transcript

1. 2018೥ͷ”JavaScript” ࠶ೖ໳ Pasta-K at KMC SpringCamp 2018 pasta0915@gmail.com / pastak@kmc.gr.jp
2. @pastak
3. • ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε5ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
4. ໨࣍ • JavaScriptͷྺ࢙ • JavaScriptͱECMAScript • ECMAScriptͷḷ͖ͬͯͨಓͷΓ • babel / browserify / Webpack ...͸ԿͷͨΊʁ • ·ͱΊ
5. ͜ͷτʔΫͷλʔήοτ • JavaScriptʹ͍ͭͯաڈʹ৮Εͨ͜ͱ͕͋Δ΋ͷͷɺ͜͜਺೥ JavaScriptͷΤίγεςϜʹ৮Ε͍ͯͳ͍ਓ • ࠷ۙͷJavaScript͸ֶशίετ͕ߴ͍ͱײ͍ͯ͡Δਓ • JavaScriptʹ͍ͭͯೖ໳͍ͨ͠ͱߟ͍͑ͯΔਓ • ࠓޙJavaScriptΛ΍͍ͬͯ͘"Մೳੑ͕͋Δਓ
6. ͜ͷτʔΫͷΰʔϧ • ʮ࠷ۙͷJavaScriptΛॻͨ͘Ίʹඞཁͳπʔϧ͕ଟֶͯ͘शίε τ͕ߴͯ͘ΫιʯΈ͍ͨͳ͜ͱΛಥવݴ͍ग़ͯ͠͠·Θͳ͍Α͏ ʹ͢Δ • ͱ͜ΖͰԿނ͜Μͳʹ৭ʑπʔϧ΍Β࢓༷΍Β͕࿩୊ʹͳ͍ͬͯ Δͷ͔Λ੔ཧͯ͠ཧղ͢Δ • ͱ͜ΖͰͱ͜ΖͰɺ ʮ“JavaScript”ͬͯԿ??ʯΛ೺Ѳ͢Δ
7. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘?
8. ͜ͷτʔΫͰ͸࿩͞ͳ͍͜ͱ • JavaScriptͷจ๏΍ه๏ɺ࠷ۙ௥Ճ͞ΕͨECMAScriptͷ಺༰ʹ͍ͭͯ • JavaScriptΛ༻͍ͨΞϓϦέʔγϣϯߏஙςΫχοΫ • JSͷςΫχοΫ஌Γ͍ͨਓ͸ڈ೥ͷय़߹॓ͷࢿྉΛಡΜͰ͘Ε • WebΞϓϦέʔγϣϯͰ 60fpsΛ(ۃྗ)໨ࢦ͢ // Speaker Deck • https://speakerdeck.com/pastak/webahurikesiyonte-60fpswo-ji-li-mu-zhi-su
9. JavaScriptͷྺ࢙Λ ৼΓฦͬͯΈΔ
10. օ͞Μ͕Πϝʔδ͢ΔJavaScript͸ͲΕͰ͢? • WebϖʔδΛ೐΍͔ʹ͢Δ΍ͭ • Google Maps / Web 2.0 / Ajax • Twitter / Facebook / SPA / PWA • NodeJS
11. ॳظͷϢʔεέʔε • WebαΠτΛ՚ඒʹ͢Δ • ͋Μ·Γศརͳ࢖ΘΕํ͕ͳ͔ͬͨ • ΫϦοΫͨ͠ΒalertΛग़͢ • จࣈ͕νΧνΧ͢Δ • mouseoverͰcursorΛม͑Δ
12. JavaScript҉ࠇ࣌୅ • 2000೥୅લ൒͸JSͷ੬ऑੑΛͭ͘΢ΣϒαΠτ΋ଟ͘JavaScript ΛແޮԽ͍ͯ͠Δਓͨͪ΋ଟ͍ͨ͘ • ϒϥΫϥ • Flashશ੝ظ
13. 2005೥ Google Mapsര஀ • Google Maps͸ແݶʹεΫϩʔϧͰ͖Δ஍ਤαΠτͩͬͨ • ྫ͑͹Yahoo!ͷ஍ਤ͸্ԼࠨӈʹҠಈ͢ΔϦϯΫΛԡͯ͠Ҡಈ͍ͯͨ͠ • Google Maps͸͜ͷͱ͖XMLHttpRequestͳͲΛ࢖ͬͯμΠφϛοΫʹಡ ΈࠐΈ࢓૊ΈΛఏڙ͍ͯͨ͠ • AjaxΞϓϦέʔγϣϯ͕ਓؾΛത͢Δ͖͔͚ͬʹͳͬͨ
14. ਓʑ͸
    ؾ෇͍ͨ
15. JavaScript ศར͡ΌΜ
16. JavaScriptʹର͢ΔೝࣝͷมԽ • WebαΠτΛ૽͕͘͢͠Δ͚ͩͷअຐͳଘࡏͩͱࢥΘΕ͍ͯͨ • ࣮ࡍɺJavaScriptΛUXʹܨ͛ΔΑ͏ͳΞϓϦέʔγϣϯ͕ͳ͔ͬͨ • DynamicHTMLͷඇޓ׵໰୊΍ඇಉظ௨৴ΛNN͕ͳ͔ͳ͔࣮૷͠ͳ͔ͬ ͨ͜ͱ΋͋Δ͕ɾɾɾ • ࣮ྫͱͯ͠ͷGoogle Maps͸Ϣʔβʔ͚ͩͰͳ͘։ൃऀʹ΋େ͖ͳӨڹΛ༩ ͑ͨ
17. JSͰϚογϡΞοϓ͢Δͷ͕ྲྀߦͬͨ • Google Maps Ajax APIΛ࢝Ίͱ͢ΔXMLΛఏڙ͢ΔAPI΍jsonpΛఏڙ͢ ΔAPI͕৭ʑͱొ৔ • ͜ΕΒΛ૊Έ߹ΘͤͯΞϓϦέʔγϣϯΛ࡞ΔʰϚογϡΞοϓʱ͕ྲྀߦ • ͜ͷྲྀΕΛ௥ਵ͢ΔϦονͳWebΞϓϦέʔγϣϯ͕ొ৔࢝͠ΊΔ • ʰWeb 2.0ʱ
18. ϒϥ΢βߴ଎Խ • 2008೥ Google Chromeͷొ৔ • Googleۘ੡JSΤϯδϯ V8͕଎͔ͬͨ • ଞͷJSΤϯδϯ΋௥ਵͯ͠ߴ଎Խͷಓ΁ • ͜Μͳʹ଎͘Ͱ͖ΔͳΒ΋ͬͱΞϓϦέʔγϣϯͷػೳΛدͤΕΔ ͧ
19. NodeJSొ৔ • 2009೥ V8Λར༻ͨ͠αʔόʔαΠυ্ͷJavaScript࣮ߦ؀ڥͱͯ͠ొ৔ • ΠϕϯτۦಈܕʹΑΔϊϯϒϩοΩϯάIOͳͲʹ஫໨͕ू·ͬͨ • ʰΫϥΠΞϯτ1ສ୆໰୊ʱ͕ى͖ͳ͍ • ͔͜͜ΒҰؾʹJS͸ϒϥ΢β্Ҏ֎Ͱ΋ಈ͘ϓϩάϥϛϯάݴޠʹ • ͦΕҎલ΋ಈ͔͢؀ڥ͸͕͋ͬͨ͋·ΓϝδϟʔʹͳΒͳ͔ͬͨ • ࠓ͸αʔόʔαΠυ͸΋ͪΖΜɺCLI༻ͷεΫϦϓτ΍πʔϧΛॻͨ͘Ίʹଟ͘ར༻͞Ε͍ͯΔ
20. ݱࡏͷJavaScriptΞϓϦέʔγϣϯ • Angular΍ReactɺVueͳͲΛ࢖ͬͨSPAΞϓϦέʔγϣϯ • pushStateʹΑΔཤྺॻ͖ࠐΈ + XHR/fetchʹΑΔσʔλऔಘ • Progressive Web Application • ϞόΠϧϒϥ΢βͰ΋σεΫτοϓϒϥ΢βͰ΋͍͍ײ͡ʹಈ͘ • ΦϑϥΠϯΩϟογϡɾϩʔΧϧετϨʔδ
21. JavaScriptͱECMAScript
22. ECMAScriptͱ͸Կ͔
23. ·ͣ͸”ECMAScript”Λͬ͘͟Γͱ • JavaScriptͷඪ४࢓༷ͷ໊শ • Ecma Internationalͷtc39Ͱٞ࿦͞Ε͍ͯΔ • ݱࡏ͸Living StandardͷܗͰͲΜͲΜ࢓༷͕௥Ճ͞Ε͍ͯΔ
24. JavaScriptॳظ • 1995೥ NetScapeʹ৐ͤΔͨΊʹ։ൃ͞ΕΔ • Java͕ྲྀߦ͍ͬͯͨͷͰɺ໊લΛआΓ͖ͯͯJavaScriptʹ • 1996೥ IE3.0ʹ৐ͤΑ͏ͱ͢Δ΋ަবࣦഊ • Microsoft͕ಠࣗͷJScriptͱͯ͠։ൃ
25. JavaScriptඪ४Խ • 1997೥ JavaScriptͱJScriptͷ྆ํ͕͋Δঢ়گΛͳΜͱ͔͠Α͏ͱ͍͏ Ϟνϕʔγϣϯ͕Netscapeʹ͋ͬͨ • ͜ͷJavaScriptͷඪ४ԽΛECMAΠϯλʔφγϣφϧʹґཔ • ECMA-262ͷॳ൛͕ग़དྷΔ • “JavaScript”͸঎ඪͷ౎߹Ͱ࢖͑ͳ͍ͷͰɺ”ECMAScript”ʹ
26. ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ • ͜͜·Ͱ͸ॱௐͩͬͨɾɾɾ
27. ECMAScriptඪ४Խͷܥේ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ • ͜͜·Ͱ͸ॱௐͩͬͨɾɾɾ • ECMA-262 ୈ4൛Ͱࣄ݅͸ىͬͨ͜!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
28. ECMAScript 4Ͱͷग़དྷࣄ • ਪਐ೿ • Adobe, Mozilla(چNetscape Navigationࣾ), Opera, Google • ଟ͘ͷ৽ػೳΛऔΓࠐΈJavaScriptΛେ෯ʹมߋ͢Δ • ൓ର೿ • Microsoft & Yahoo • ES3Λϕʔεʹػೳ௥Ճ΍όάमਖ਼ΛؚΜͩES3.1ͱͯ͠ެ։͢Δ
29. ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶃ • ActionScript 3.0(Adobe͕FlashΞϓϦέʔγϣϯͷͨΊʹ։ൃ͠ ͍ͯͨϓϩάϥϛϯάݴޠ)͔ΒऔΓࠐΜͩػೳ • class, interface, ܕ, ໊લۭؒ, package ͳͲ
30. ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶄ • JavaScript 1.7(NN΍Firefoxʹࡌ͍ͬͯͨJS͸౰࣌JavaScript 1.X ͱ͍͏όʔδϣϯ൪߸͕߱ΒΕ͍ͯͨ)͔ΒऔΓࠐΜͩػೳ • let, ෼ׂ୅ೖ, δΣωϨʔλʔ ͳͲ
31. ECMAScript4ͱ͸ͳΜͩͬͨͷ͔ • ߏ੒ཁૉᶅ • ͦͷଞʹ΋਺ଟ͘ͷ৽ͨͳػೳΛऔΓࠐΉ͜ͱ͕ըࡦ͞Ε͍ͯͨ • ྫ͑͹ɾɾɾ
32. ςϯϓϨʔτ • C#Ͱ͸Genericͱݺ͹ΕͯΔ΍ͭ http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ
33. ԋࢉࢠΦʔόʔϩʔυ http://tech.nitoyon.com/ja/blog/2007/10/30/es4-overview/ ΑΓ
34. ECMAScript4ʹؔ͢Δܾண • ݁Ռͱͯ͠͸ES3.1 (aka ES Harmony)Λ΍͍ͬͯ͘͜ͱʹऩଋ (2008೥8݄) • ES4͸͜Ε·ͰͷESʹରͯ͠มߋ͕େ͖͗͢ΔͷͰԺ౰ʹ΍Γ͍ͨ • จ๏ͷޓ׵ੑͷ໰୊ͳͲ͔ΒաڈͷWebͷࢿ࢈ʹӨڹΛ༩͑ͯ͠·͍͔Ͷͳ͍ • ໊લۭؒ΍ύοέʔδͳͲ͸Webʹ͙ͦΘͳ͍ͷͰɺES3.1ͷٞ࿦ͷ্Ͱ͸Ұ੾ѻ Θͳ͍ • ͦΕҎ֎ͷػೳʹ͍ͭͯ͸ٞ࿦ͷର৅ͱͯ͠ѻ͏
35. ECMAScript5ϦϦʔε • ES Harmonyͱͯ͠ਐΊΒΕ͍ͯͨ࡞ۀ͸਱ʹ2009೥ɺES5ͱͯ͠Ϧ Ϧʔε͞Εͨ • ϝδϟʔόʔδϣϯ͕2্͕͍ͭͬͯΔ͕࣮ଶ͸3.0͔Β3.1΁ͷϚΠ φʔόʔδϣϯΞοϓ • Mozilla͕ਐΊ͍ͯͨJavaScript 1.X → 2.0΁ͷ࡞ۀ΋ESʹ४ڌ͢Δํ ޲ʹͳΓɺ͜ͷόʔδϣϯݺশ΋ߦΘΕͳ͘ͳͬͨ
36. ECMAScript 5ͷ৽ػೳ • JSON.parse, JSON.stringify ͷ௥Ճ • Array΁ͷϝιουͷ௥Ճ forEach, filter, map, reduce, indexOf • String΁ͷϝιουͷ௥Ճ trim • StrictϞʔυͷ௥Ճ ͳͲ
37. ׻تͷECMAScript6ϦϦʔε • 2015೥ϦϦʔε • ਺ଟ͘ͷັྗతͳػೳ͕࢓༷ʹͳͬͨ!!!!!!!!!!!!!!!!!!! • Θ͍Θ͍
38. arrow function • () => {} Ͱؔ਺ࣜΛॻ͚Δ • this͕ͦͷએݴ࣌ͷίϯςΩετͷthisʹଋറ͞ΕΔ
39. enhanced object literals / destructuring • Objectͷkey͕ม਺໊ͱಉ࣌͡ʹলུՄೳ • ArrayͱObjectͰ෼ׂ୅ೖ͕Մೳʹ
40. Promise • JSͷίʔϧόοΫ஍ࠈ͔ΒਓʑΛղ์ • ͦΕ·Ͱਓʑ͸jQuery.defferͱ͔ʢyieldͱ͔ʣͰࣃΛ৯͍͠͹ͬ ͍ͯͨͷ͡Ό
41. Class • ͦΕ·Ͱਓʑ͸prototypeΛར༻ͯ͠΍͍͍ͬͯͬͯͨ
42. Class • ES6Ͱ͸Classߏจ͕௥Ճ͞Εͨ
43. ͦͷଞ • Symbol • Number.isNaN • Array.from / Array.find • String.includes / String.repeat • Object.assign • ຤ඌ࠶ؼ࠷దԽ
44. ES6➜ES2015…ͦͯͦ͠ͷઌ΁ • ES6͸ES2015ʹվশɻҎ߱͸Living Standardํࣜʹ • ECMAScriptͷ࢓༷ॻͷυϥϑτ͸Github্ͷtc39/ecma262Ͱ؅ཧ͞Ε͍ͯΔ • ࠷৽ͷECMAScript࢓༷͸ https://tc39.github.io/ecma262/ • ຖ೥۠੾ΓΛ෇͚ͯҎ߱͸ES2016, ES2017ͱTagΛ෇͚Δ • ͜ͷλΠϛϯάͰStage4ʹೖ͍ͬͯΔ࢓༷Λର৅ʹ͢Δ
45. http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ
46. ࠓͷECMAScript • ͦΕ·Ͱ͸શͯͷ࢓༷͕߹ҙ͞ΕͨޙʹϦϦʔε͞Ε͍͕ͯͨɺݱ ࡏͷES͸߹ҙ͕औΕͨ࢓༷͔Βॱ࣍ϦϦʔε͞Ε͍ͯΔ • ྫ͑͹ɺES4ͷ߹ҙܗ੒ͷࣦഊʹΑΓES3͔Β࣍ظόʔδϣϯͰ͋ ΔES5·Ͱʹ10೥ʢES4ࣗମʹ΋2.5೥͘Β͍ͷϦιʔε͕͔͔ͬ ͍ͯͨͱݴΘΕ͍ͯΔ)͕͔͔ͬͨ
47. ࠓͷECMAScript • Github্ͷେ͖ͳϓϩδΣΫτͱ͍͏ܗͰਐΊ͍ͯΔ • ϑΟʔυόοΫΛΑΓड͚΍͍͢؀ڥʹ • ϒϥ΢βϕϯμʔ͚ͩͰͳ͘JavaScriptΛར༻͢Δ։ൃऀ͔Β΋ ϑΟʔυόοΫΛΑΓड͚ΔͨΊʹ • ϓϩηεͷಁ໌Խ • ϛʔςΟϯάϊʔτ΋શͯGithub্Ͱެ։͞Ε͍ͯΔ
48. ECMAScriptͷݱࡏͷࡦఆखॱ • ͦΕͧΕͷػೳʹ͍ͭͯݸผͷϓϩϙʔαϧͱͯ͠ਐΊΔ • ͜ͷϓϩϙʔαϧ΋ٞ࿦ͷͨΊʹ࠷େ࠷খݶͷܗͷ΋ͷ͕૿͑ͨ • ੹೚ऀ(νϟϯϐΦϯ)ͱstage0ʙ4͕͋Γɺstage4ʹͳΔͱ ECMAScriptͷ࢓༷ʹmergeՄೳʹͳΔ
49. ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯ http://azu.github.io/slide/2018/node/ecmascript39.html ΑΓ
50. ECMAScriptϓϩϙʔαϧͷStageʹ͍ͭͯ stage3͔Βstage4ʹ͸ ʲ2ͭҎ্ͷ࣮૷*ʳ͕ඞཁ * flag෇͖࣮૷Ͱ΋OK
51. Transpiler΍Polyfillʹ͍ͭͯ • Transpiler: ৽͍͠ߏจΛطଘͷػೳͰ࠶ݱͰ͖ΔΑ͏ʹιʔείʔυΛม ׵͢Δπʔϧ • ex: Babel • Polyfill: ϓϩϙʔβϧͰ௥Ճ͞Εͨ৽͍͠ϝιου΍ؔ਺ͳͲΛ࣮૷Λఏ ڙ͢ΔϥΠϒϥϦ • ex: babel-polyfill, whatwg-fetch
52. Transpiler΍Polyfillʹ͍ͭͯ • Transpiler΍Polyfill͸৽͍͠ߏจ΍ϝιουͳͲͷ࠶ݱΛࢼΈ͍ͯ Δ͚ͩͰɺ಺෦తͳৼΔ෣͍΍࣮ߦ଎౓ʹ͍ͭͯ͸࣮ࡍͷϒϥ΢β ࣮૷ͱ͸ҟͳΔͷͰ஫ҙ • ϒϥ΢βຊମ΁ͷ࣮૷Λ଴ͨͣͯ͠ઌߦͯ͠ࢼ͢͜ͱ͕ग़དྷΔͷͰɺ ϓϩϙʔαϧ΁ͷϑΟʔυόοΫ͕༰қʹͳͬͨ
53. ECMAScriptݱঢ়·ͱΊ • ES5·Ͱ͸શ࢓༷ʹ͍ͭͯಉҙͷ্ͰϦϦʔε͍ͯͨ͠ • ES6 (= ES2015)Ҏ߱͸࢓༷ຖʹಉҙ͕ͳ͞ΕΔͱϦϦʔε • ࣮૷͕2ͭҎ্ଘࡏ͍ͯ͠Δɾςετ͕͋Δ • tc39ٕज़ҕһձͰͷঝೝ • ຖ೥6݄ࠒʹESXXXXͱศٓతͳ໊લ(λά)͕෇͚ΒΕΔ
54. JavaScriptͱECMAScript
55. “JavaScript”ͱ”ECMAScript"
56. “JavaScript”ͱ”ECMAScript" ͔͜͜Β͕ຊ୊!!!!!!!!!!
57. JavaScriptͷॲཧܥ • ϒϥ΢βʹࡌ͍ͬͯΔΤϯδϯͨͪ • Chrome: V8, Safari: JavaScriptCore, Firefox: SpiderMonkey ͳͲ • CLI্ͳͲͰར༻Ͱ͖Δॲཧܥ • NodeJS
58. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ
59. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ Perl????
60. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES5 strict mode
61. "use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ • ES5ͷStrict mode͸աڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJS΁ͷ౤ࢿͷͨΊ • ߏจ΍ϥϯλΠϜͷৼΔ෣͍ʹରͯ͠มߋΛՃ͑Δ • ϑΝΠϧͷઌ಄·ͨ͸ؔ਺ͷઌ಄Ͱ
62. "use strict" / Opt-in Strict mode • JavaScript͸جຊతʹޙํޓ׵ੑΛഁյ͠ͳ͍Α͏ʹ։ൃ͕ਐΊΒΕͯ ͖ͨ • ES5ͷStrict mode͸աڈͷJSͷෛ࠴ͷฦ٫ɺকདྷͷJS΁ͷ౤ࢿͷͨΊ • ߏจ΍ϥϯλΠϜͷৼΔ෣͍ʹରͯ͠มߋΛՃ͑Δ • ϑΝΠϧͷઌ಄·ͨ͸ؔ਺ͷઌ಄Ͱ ߏจΛ௥Ճ͢ΔͷͰ͸ͳ͘จࣈྻΛࣝผ ʹར༻͢Δ͜ͱͰඇରԠͷ؀ڥͰ΋ͦΕ ͳΓʹಈ͘Α͏ʹͳ͍ͬͯΔ (ͨͩ͠ৼΔ෣͍͕ҟͳΔͷͰҙਤ௨Γ ʹಈ͔ͳ͍͜ͱ͕ଟ͍ͷͰ஫ҙ)
63. Strict modeͰมΘΔ͜ͱ • ۮൃతͳάϧʔόϧม਺΁ͷ୅ೖΛΤϥʔʹ • ͍͔ͭ͘ͷ৔߹ʹTypeError ྫ֎͕ൃੜ͢ΔΑ͏ʹʢҎԼ͸ͦͷྫʣ • NaN ΁ͷ୅ೖ • JSͰ͸ NaN ͸ΩʔϫʔυͰ͸ͳ͘άϧʔόϧม਺ • getterϓϩύςΟ΁ͷ୅ೖ • ΦϒδΣΫτʹॏෳͨ͠ϓϩύςΟΛઃఆ͢Δ
64. Strict modeͰมΘΔ͜ͱ • implementsɺinterfaceɺletɺpackageɺprivateɺprotectedɺpublicɺstaticɺyield Λ༧໿ޠʹ௥Ճ • with Λ࢖͏ͱSyntax Errorʹ • thisͷৼΔ෣͍ͷมߋ • τοϓϨϕϧ·ͨ͸ؔ਺಺Ҏ֎Ͱͷؔ਺એݴΛΤϥʔʹ ͳͲ
65. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ
66. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ From http://efcl.info/2018/01/04/what-is-this/
67. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ From http://efcl.info/2018/01/04/what-is-this/
68. this in JS • JavaScriptͷthis͸ͦΕ͚ͩͰ1࡭ͷຊ͕ॻ͚Δ͘Β͍৭ʑͳ࿩୊͕ ͋Δ • JSΛॻ͍͍ͯΔͱͱʹ͔͘thisͰϋϚΔɻ͜ΕͰ΋͔ͱϋϚΔɻ • ࠷ۙ͸Ξϩʔؔ਺ͳͲͷ͓ӄͰϚγʹ͸ͳͬͨ
69. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES6 spread parameter
70. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ jQuery
71. jQuery • ΈΜͳେ޷͖jQuery • JS͸jQueryΛ༻͍ͨ΋ͷ͔͠ॻ͍ͨ͜ͱͳ͍ਓ΋ଟ͍͔΋? • $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
72. jQueryͱJavaScript • JS͕DOMૢ࡞ʹΑΔUIߏஙͳͲͷϋʔυϧ͕ҰؾʹԼ͕ͬͨ • ϝιουνΣʔϯͰॻ͚Δͷ΋ਓؾͩͬͨ • jQueryϓϥάΠϯΛར༻ͨ͠Ξχϝʔγϣϯ΍৭ʑͳύʔπ(ྫ͑͹lightbox)Λར༻ ͨ͠WebαΠτ͕രൃతʹ૿͑ͨ • jQuery mobileͱ͍͏ϞόΠϧରԠͤ͞Δͷ΋͋ͬͨ • WebαΠτͰෳ਺ͷϓϥάΠϯΛ࢖ͬͨΓɺUIຖʹ৭ʑͳίʔυΛॻ͍ͯఏڙ͢Δͱ ͍͏͜ͱ΋Ұൠతʹͳͬͨ
73. ͦͷଞͷஶ໊ͳJavaScriptϥΠϒϥϦ • Backbone.js • prototype.js • YUI Library • AngularJS • React • VueJS
74. 2009೥:AngularJS 2005೥: prototype 2006೥: jQuery 2014೥:Vue 2010೥:Backbone 2013೥:React
75. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ DOM API
76. DOM APIͬͯԿʁ • DOM(Document Object Model)͸XML, HTML, SVGυΩϡϝϯτΛ ϓϩάϥϛϯάݴޠͰར༻͢ΔͨΊʹϞσϧԽͨ͠΋ͷ • จॻΛ໦ߏ଄Ͱදݱ͍ͯ͠Δ • ϊʔυ͸͞ΒʹΠϕϯτϋϯυϥΛ͍࣋ͬͯΔ • ଟ͘͸JavaScriptͰར༻͞ΕΔ͕ɺDOM͸ECMAScriptͷ࢓༷ͷҰ ෦Ͱ͸ͳ͍
77. DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ
78. DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ • A: W3C, WHATWG
79. DOM APIͬͯԿʁ • Q: DOM APIʹ͍ͭͯͷ࢓༷͸ͲͷஂମʹΑͬͯࡦఆ͞Ε͍ͯΔʁ • A: W3C, WHATWG • HTMLͷ࢓༷ࡦఆͷํ਑ͷҧ͍ͰᦻΛ෼͔ͭ͜ͱʹͳͬͨ2ͭͷஂ ମ͕ͦΕͧΕ࢓༷Λ༗͍ͯ͠Δ • WHATWGͰ͸DOM Standard, W3CͰ͸DOM 4 • جຊతʹ͸ಉ͕ͩ͡Ұ෦ࠩ෼͕͋Δ
80. ༨ஊ: W3CͱWHATWG • 1999೥ͷHTML4.01קࠂҎ߱ɺ௕೥HTMLͷΞοϓσʔτ͕ࢭ·͍ͬͯͨ • 2004೥ Apple, Opera, MozillaͰWHATWGઃཱ • 2007೥ ྆ऀ͕ڠྗମ੍ΛऔΔW3C HTML Working GroupΛઃཱ • 2012೥ קࠂΛઃཱ͍ͨ͠W3Cͱ։ൃͷܧଓΛॏࢹ͢ΔWHATWG͕ᦻΛ෼͔ͭ͜ͱʹ ͳΓɺ྆૊৫͕ผʑʹࡦఆ࡞ۀΛਐΊ͍ͯ͘͜ͱʹ • 2014೥ W3C HTML 5קࠂ͕ൃߦ
81. ༨ஊ: W3CͱWHATWG • WHATWGͷDOM (Living) Standard • ϒϥ΢βϕϯμʔ͸WHATWGͷվగʹूத͍ͯ͠Δ • W3C͸͜ΕΒΛίϐʔ͢Δ͚ͩͰͳ͘Ұ෦ՃචΛͯ͠ဃ཭Λ࢈ΜͩΓ͍ͯ͠Δ ͜ͱʹରͯ͠൷൑͕͋Δ • ͨͩW3Cͷจॻ͸ϩΠϠϦςΟʔϑϦʔ͕໌ه͞Ε͍ͯͨΓɺઐ໳ՈʹΑΔϫ ΠυϨϏϡʔ͕ͳ͞Ε͍ͯΔ(ͱ͍͏ͷ͕ओுͰ͋Δ)
82. ಉ͘͡ECMAScriptͷ࢓༷ʹؚ·Εͳ͍΋ͷ • window • window.navigator • window.location • window.history • XMLHttpRequest • HTML Canvas 2D Context • WebStorage ...etc HTML Living Standardʹ ؚ·Ε͍ͯΔ
83. օ͞Μͷॻ͍͍ͯΔ”JavaScript”͸ʁ ES module
84. JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ • ఻౷తͳJavaScriptͷϥΠϒϥϦͷಡΈࠐΈํ
85. JavaScriptͰ֎෦ϥΠϒϥϦΛಡΈࠐΉ • scriptλάͰಡΈࠐΉख๏ͷ໰୊఺ • window(άϩʔόϧ)Λհͯؔ͠਺Λڞ༗͢Δඞཁ͕͋Δ • άϩʔόϧྖҬͷԚછ • ར༻ॱΛߟ͑ͯɺॱ൪ʹλάΛهड़͢Δඞཁ͕͋Δ • ෳ਺ͷϑΝΠϧΛಡΈࠐΉඞཁ͕͋Δ • ಉҰΦϦδϯͷಉ࣌઀ଓ਺੍ݶ
86. ֎෦ϥΠϒϥϦಡΈࠐΈ໰୊ͱ޲͖߹͏ • JSͷߏจͱͯ͠֎෦ϥΠϒϥϦΛಡΈࠐΉํ๏Λఏڙ͢Δ͜ͱͰ άϩʔόϧ؀ڥΛར༻ͨؔ͠਺ͷڞ༗ΛࢭΊΔ • ࣄલʹͦΕΒͷϥΠϒϥϦΛؚΜͩঢ়ଶͰ1ͭͷϑΝΠϧʹίϯύ Πϧ͢Δ͜ͱͰ઀ଓ਺΍ϑΝΠϧαΠζͷ໰୊Λղܾ͢Δ
87. JavaScriptͱpackage maneger • ֎෦ͷϥΠϒϥϦΛޮ཰Α͘؅ཧ͢ΔͨΊʹ͸ύοέʔδϚωʔδϟ ͕ඞཁͰ͋ͬͨ • ͦͷͨΊʹొ৔ͨ͠ͷ͕ • bower • npm
88. JavaScriptͱpackage maneger • JavaScriptͷpackage manager • bower • ϒϥ΢β޲͚ͷϥΠϒϥϦΛఏڙ͍ͯͨ͠ • 2014೥ޙ൒͘Β͍͔ΒJSք۾͔Β͸ෛ࠴ͱͯ͠ೝࣝ͞Ε͍ͯͨ • npm • Node޲͚ͷϥΠϒϥϦΛఏڙ͍͕ͯͨ͠ɺϒϥ΢β޲͚ͷϥΠϒϥϦ΋ѻ ͏Α͏ʹͳͬͨ • 2014೥7݄ʹ͸jQuery͕npmͷΈͰbowerͷαϙʔτΛऴྃͨ͠ • https://github.com/jquery/jquery/pull/1620
89. require vs import • CommonJS • module.exportsʹ୅ೖ͢Δ͜ͱͰॻ͖ग़͠ • require()Λར༻ͯ͠ಡΈࠐΈ • ECMAScript • exportࣜΛར༻ͯ͠ॻ͖ग़͠ • importࣜΛར༻ͯ͠ಡΈࠐΈ
90. #
91. ͋Εʁզʑ͸
    ECMAScriptܗࣜ
    ͡Όͳ͍ͷΛ
    ͣͬͱ࢖ͬͯͨͷʁ
92. ͳͥ require ͕࢖ΘΕ͍ͯͨͷ͔ • ES2015ͷͱ͖ʹ͸γϯλοΫεͷΈΛܾΊ͍ͯͨ • ࣮ࡍʹॲཧܥ͕ͲͷΑ͏ʹϞδϡʔϧͷಡΈࠐΈΛߦ͏͔ʹ͍ͭͯ͸ECMAScriptͰఆٛ͞ Ε͍ͯͳ͔ͬͨ ➜ NodeJS: NodeJSਞӦ ➜ϒϥ΢β: WHATWG • ͲͷΑ͏ͳৼΔ෣͍Ͱ࣮૷͢Δ͔Λ֤ਞӦ͕ܾఆ͢Δඞཁ͕͋ͬͨͷͰɺ࢓༷ʹΑͬͯ શͯ
93. ۩ମతʹͲ͏͍͏໰୊͕͋ͬͨͷ͔ • ϩʔυ࣌ʹͦͷϑΝΠϧ͕ESM͔Ͳ͏͔Λ஌Δඞཁ͕͋Δ • ࣝผࢠ(URI)ΛͲͷΑ͏ʹղܾ͢Δ͔ • طଘͷCommonJSͱͷޓ׵ੑΛͲ͏͢Δ͔(NodeJS)
94. ۩ମతʹͲ͏͍͏໰୊͕͋ͬͨͷ͔ https://teppeis.hatenablog.com/entry/2017/08/es-modules-in-nodejs ΑΓ
95. ES Modulesͷݱঢ় • ϒϥ΢β͸ChromeͱFirefox͸ରԠࡁΈ • NodeJS͸֦ுࢠΛmjsͱ࣮ͯ͠ߦ͢Δ͜ͱͰରԠ • Strict mode͕ڧ੍͞ΕɺτοϓϨϕϧthis͸undefinedʹ • __dirnameͳͲ΋࢖͑ͳ͘ͳ͍ͬͯΔͷͰ஫ҙ
96. ͜͜ʹͳ͍ʁ
97. ΋͔ͯ͠͠ʁ
98. ΋͔ͯ͠͠ʁ CoffeeScript
99. CoffeeScript • Alt JSͷ1ͭɻRubyͳͲ͔ΒӨڹΛड͚ͨγϯλοΫεγϡΨʔ΍͍͔ͭ͘ ͷػೳͳػೳ͕ਓؾͩͬͨ • Ruby on Rails 3.1Ҏ߱Ͱެࣜʹαϙʔτ͞Ε͍ͯͨ • Atom΋ϦϦʔε࣌͸֤छϓϥάΠϯͳͲ͕CoffeeScriptͰॻ͔Ε͍ͯͨ • JavaScriptͷੜΈͷ਌Ͱ͋ΔϒϨϯμϯɾΞΠΫ΋ʮJavaScriptͷະདྷʯʹ ӨڹΛ༩͑ͨͱ໌ݴ͍ͯ͠Δ • ͪͳΈʹࠓ΋ܧଓతʹΞοϓσʔτ͞Ε͍ͯͯɺݱࡏ͸2ܥ͕࠷৽൛
100. CoffeeScriptͷه๏;Γ͔͑Γ Ruby෩ʹ ObjectϦςϥϧͷ{}Λলུ
101. CoffeeScriptͷه๏;Γ͔͑Γ this.ͷγϯλοΫεγϡΨʔ
102. CoffeeScriptͷه๏;Γ͔͑Γ ޙஔͷif/unless
103. arrow function
104. arrow function
105. arrow function fat arrow͸thisΛଋറ
106. arrow function ͜Ε͕ޙʹES2015Ͱ arrow functionΛಋೖ͢ΔͨΊͷ͖͔͚ͬʹ ͳͬͨ
107. 2010೥ CoffeeScriptొ৔
108. JSͱESͷҧ͍ͷ੔ཧ • "ECMAScript" • JavaScriptݴޠͷ࢓༷͕ऩΊΒΕ͍ͯΔ • ࣮ࡍͷϒϥ΢β্Ͱѻ͑ΔAPI͸ผ్HTMLͷ࢓༷΍DOMͷ࢓༷ͱ ͯ͠ࡦఆ͞Ε͍ͯΔ • ্هશͯΛؚΊͯ೔ৗతʹ͸"JavaScript"ͱݺশ͍ͯ͠Δ
109. babel / browserify / Webpack ...etc ͸ͦΕͧΕԿͷͨΊʁ
110. Babel
111. Babel • Babel (چ: 6to5) ͸ES2015Ҏ߱ͷه๏Λ֤छϒϥ΢βͰಈ͘ES5 Ҏલͷදݱʹม׵͢ΔTranspiler • ։ൃऀ͸ES2015Ҏ߱ͷه๏Ͱهड़ՄೳʹͳΓͭͭ΋ɺϢʔβʔ ʹରͯ͠͸ޙํޓ׵ੑΛ୲อͯ͠αʔϏεΛఏڙͰ͖Δ
112. Babel • babel-plugin • ECMAScriptͷ1ͭͷ࢓༷ʹରԠͨ͠ม׵͕ϓϥάΠϯʹͳ͍ͬͯΔ • babel-preset • babel-pluginͷू߹ɻbabel-preset-2015͸ES2015ʹؚ·ΕΔ΋ͷ ͷू߹ɻbabel-preset-stage0, babel-preset-latest, babel-preset- envͳͲɻ
113. Babel • babel-register • NodeJSͰrequire͢ΔࡍʹઌಡΈͯ͠BabelͰcompile͢ΔΑ͏ʹ͠ ͯ͘ΕΔ • babel-polyfill • globalείʔϓ΁ͷ௥Ճ͕ඞཁͳPromise΍Weakmap΍static methodͰ͋ΔArray.formͳͲΛར༻Մೳʹ͢Δ
114. Browserify
115. Browserify • CommonJSܗࣜͷmoduleͷղܾΛ͢Δπʔϧ • BrowserifyΛར༻͢Δ͜ͱͰCJS moduleΛར༻ͨ͠ϑΝΠϧ Λϒϥ΢βͰ΋ಡΊΔܗʹม׵Ͱ͖Δ • NodeJS޲͚ʹॻ͔ΕͨCJSܗࣜͷϥΠϒϥϦͳͲΛϒϥ΢βͰ ΋࢖༻Մೳʹ
116. Webpack
117. Webpack • BrowserifyͷΑ͏ͳJSͷTranspiler΍gulpͷΑ͏ͳλεΫϥϯ φʔ͕ྲྀߦ͢ΔதɺͦΕΒΛΦʔϧΠϯϫϯతʹ૊Έ߹Θͤͨ πʔϧͱͯ͠ొ৔ • JSϑΝΠϧͷόϯυϦϯά͚ͩͰͳ͘ɺCSS/LESSͳͲ΍ը૾ ϑΝΠϧͳͲͷΞηοτ΋JSϑΝΠϧͱಉ༷ʹѻ͏͜ͱ͕ग़དྷ ͨͷͰਓؾ
118. TypeScript
119. TypeScript • MicrosoftʹΑͬͯJSʹܕΛ༩͑ΔͨΊͷAltJS/Transpilerͱͯ͠ ։ൃ͞Εͨ • JavaScriptʹ੩తܕ෇͚ͳͲΛՃ͑ͨϓϩάϥϛϯάݴޠ • େن໛ΞϓϦέʔγϣϯͷ։ൃʹ΋଱͑͏ΔΑ͏ʹͳ͍ͬͯΔ(?)
120. ͦͷଞͷπʔϧͨͪ • rollup • ES moduleܗࣜͷJSͷͨΊͷόϯυϦϯάπʔϧ • tree-shaking΋΍ͬͯ͘ΕΔͧ • flowtype • JSʹ੩తܕ෇͚ͷͨΊͷه๏Λ௥Ճ͢Δ • babelϓϥάΠϯͱͯ͠ಈ࡞͢ΔͷͰɺbabelͰॲཧ͢ΔࡍʹAST͔Βফͯ͘͠ΕΔ
121. babel / browserify / Webpack ...etc ͸ͦΕͧΕԿͷͨΊʁ
122. ͦΕͧΕԿͷͨΊʁ • Babel • ES2015Ҏ߱ͷදݱΛඇରԠͷϒϥ΢βͳͲͰ΋ಈ͘Α͏ʹม׵ • Browserify • CommonJSܗࣜͷrequireΛղܾɻओʹrequireΛղܾͰ͖ͳ͍ϒϥ΢β޲͚ • Webpack • JSͷόϯυϦϯά͚ͩͰͳ͘ɺCSS΍ը૾ͳͲ΋औΓѻ͏
123. ·ͱΊ
124. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘?
125. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘? Έͳ͞Μ౴͑ΒΕ·͢ΑͶʁ
126. ࣍ͷ֤ߦͷίʔυ͸(ϒϥ΢β|NodeJS)Ͱಈ͘? ղ౴͸օ͞Μͷࣗྗݚڀʹظ଴͠·͢
127. ·ͱΊ • "JavaScript"ͷ࢓༷͸ECMAScript͚ͩͰͳ͘WHATWG HTML Living StandardͳͲ΋ؚΜͰ͍Δ • ͜͜ʹࢸΔ·Ͱʹ৭ʑͳܦҢ͕͋ͬͨ • JavaScriptͷݱࡏͷπʔϧͨͪ͸͜Ε·Ͱͷྺ࢙ͷෛ࠴ͱະདྷͷ౤ࢿͷͨ ΊͷؒΛܨ͍Ͱ͘Ε͍ͯΔ • ίϯςΩετΛཧղͯ͠దࡐదॴͰֶΜͩΓ࢖͍ͬͯ͜͏
128. ࢀߟจݙ • [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