ざっくりとjavascriptを知ろう

Transcript

1. JavaScriptͷ࿩ 2019/11/02 ࣾ಺ษڧձ
2. ΞδΣϯμ • JavaScriptʹ͍ͭͯ • ϑϨʔϜϫʔΫɺϥΠϒϥϦ • React΍Vue.jsͷಛ௃ • ։ൃ؀ڥ • ࣗ෼Ͱ࡞ͬͨ΋ͷ
3. ΰʔϧ • JavaScriptͷجૅతͳཧղ • React΍Vue.jsͷಛ௃ͷ೺Ѳ • ։ൃ؀ڥߏஙͷछྨΛ஌Δ
4. JavaScriptʹ͍ͭͯ
5. ྺ࢙ʢུ֓ʣ • 1995೥ ஀ੜ • Netscape͕Netscape Navigatorʢϒϥ΢βʣʹ౥ࡌ • ։ൃ౰࣌͸LiveScriptͱ͍͏ݺশ • Java͕ਓؾ͔ͩͬͨΒɺ͔ͦ͜Β໊લΛ͍ͨͩ͘ • ౰࣌͸ϒϥ΢β͝ͱʹJavaScriptͷΑ͏ͳ΋ͷΛ։ൃ • ϒϥ΢βؒͷޓ׵ੑͷͨΊඪ४Խ͢Δ • Ecma International͕ECMA-262ͱ͍͏ن֨൪߸Ͱඪ४Խ • ͦΕ͕ECMAScriptʢ1997೥ʹॳ൛͕Ͱ͖Δʣ • ECMAScript + α ͕JavaScript
6. ྺ࢙ʢ࢓༷ʣ • 1998೥ ECMA-262 ୈ2൛ • 1999೥ ECMA-262 ୈ3൛ • ͜͜·Ͱ͸͏·͍͍ͬͯͨ͘ • ୈ4൛ ࢓༷ࡦఆ1ճ໨ʢ2000೥ʙ2003೥͝Ζʣ • ୈ4൛ ࢓༷ࡦఆ2ճ໨ʢ2007೥ʙ2008೥͝Ζʣ • ECMA-262 ୈ4൛Ͱ·ͱ·Βͣ͜ͷόʔδϣϯ͸ഁغ͞ΕΔ • 2009೥ ECMA-262 ୈ5൛ ʢES5ʣ • 2015೥ ECMA-262 ୈ6൛ʢES2015ɺES6ʣ • 2016೥ ECMA-262 ୈ7൛ʢES2016ʣ • 2017೥ ECMA-262 ୈ8൛ʢES2017ʣ
7. ྺ࢙ʢൃలʣ • 2005೥ AjaxʢAsynchronous JavaScript + XMLʣ ͕GoogleͰ࢖ΘΕΔ • 2005೥ Prototype.jsʢRuby on Railsͷඪ४ϥΠϒϥϦͱͯ͠࡞ΒΕͨʁʣ • 2006೥ jQueryʢ2011೥~2017೥ Ruby on Railsͷඪ४ϥΠϒϥϦʣ • 2008೥ Google Chrome஀ੜ • V8Λ౥ࡌɻଞͷϒϥ΢βʹൺ΂JavaScriptͷ࣮ߦ͕଎͔ͬͨʁ • 2009೥ Node.jsϦϦʔεɺCommonJSͱ͍͏ϓϩδΣΫτൃ଍ • 2010೥ npmϦϦʔε • 2012೥ Backbone.js • 2014೥ npmʹ6to5ʢBABELͷલ਎ʣ ͕ొ৔ɺReact • 2015೥ webpack
8. ಛ௃ • ΠϯλϓϦλݴޠ • ϓϩτλΠϓϕʔε • ϒϥ΢βͰಈ͘ • ಈతܕ෇͚ݴޠ
9. ಛ௃ • ΠϯλϓϦλݴޠ • ϓϩτλΠϓϕʔε • ϒϥ΢βͰಈ͘ • ಈతܕ෇͚ݴޠ ΠϯλϓϦλݴޠͱ͸ɺιʔείʔυΛղऍ͠ͳ͕Β࣮ߦ͢Δݴޠͷ͜ͱɻ ͭ·ΓɺJavaScript͸ιʔείʔυΛίϯύΠϥͰม׵͠ͳͯ͘΋ɺίϯϐϡʔλ ͰίʔυΛ࣮ߦͰ͖·͢ɻJavaScriptͷଞʹ΋ɺPerlɺPHPɺRubyɺPythonͳͲ΋ ΠϯλϓϦλݴޠʹͳΓ·͢ɻ ίϯύΠϧݴޠͷΑ͏ʹػցޠʹίϯύΠϧ͞Εͨ΋ͷΛ࣮ߦͤ͞ΔΑΓ͕͔࣌ؒ ͔Γ·͢ɻ ରͯ͠ɺίϯύΠϧݴޠͱ͸ɺ࣮ߦͱ͸ผʹίϯύΠϥΛ௨ͯ͠ػցޠʹίϯύΠ ϧͨ͠΋ͷΛ࣮ߦ͢Δݴޠͷ͜ͱɻ
10. ಛ௃ • ΠϯλϓϦλݴޠ • ϓϩτλΠϓϕʔε • ϒϥ΢βͰಈ͘ • ಈతܕ෇͚ݴޠ JavaScriptʹ͸ɺݩʑΫϥεͱ͍͏΋ͷ͕ଘࡏ͠·ͤΜʢES5ʣɻ Array΍ObjectͳͲͷඪ४ϏϧτΠϯΦϒδΣΫτ΍ؔ਺ͳͲΛprototypeͱ͍͏΋ ͷͰ֦ு͍͖ͯ͠·͢ɻ ͪͳΈʹɺES2015(ES6)͔ΒΫϥεߏจ͕࢓༷ʹ௥Ճ͞ΕͨͷͰɺͦΕͰ͋Ε͹Ϋ ϥεϕʔεͰͷهड़΋ՄೳͰ͢ɻ
11. ಛ௃ ྫʣඪ४ϏϧτΠϯΦϒδΣΫτͷArrayͷ֦ு
12. ಛ௃ ྫʣࣗ෼Ͱఆٛͨؔ͠਺ͷ֦ு
13. ಛ௃ • ΠϯλϓϦλݴޠ • ϓϩτλΠϓϕʔε • ϒϥ΢βͰಈ͘ • ಈతܕ෇͚ݴޠ JavaScript͸ɺϒϥ΢βͷJavaScriptΤϯδϯͱ͍͏΋ͷͰղऍ͞Εɺ࣮ߦ͞Ε· ͢ɻͳͷͰɺͦͷϒϥ΢β͕ԿͷJavaScriptΤϯδϯΛ౥ࡌ͍ͯ͠Δͷ͔ʹΑͬͯɺ ಈ͍ͨΓಈ͔ͳ͔ͬͨΓ͢Δॻ͖ํ͕ଘࡏ͠·͢ɻ ࠓͰ͸React΍Vue.jsΛ࢖ͬͯ΄΅͢΂ͯͷHTMLཁૉΛඳը͢ΔΑ͏ʹͳΓ·ͨ͠ ͕ɺϒϥ΢β΍ϢʔβʔͷΞΫγϣϯ͕͖͔͚ͬͰɺίʔυ͕ධՁɾ࣮ߦ͞Εɺ HTMLʹखΛՃ͑ͨΓཁૉΛΞχϝʔγϣϯΛͤͨ͞Γ͢Δ͜ͱ͕Ͱ͖Δͷ͕େ͖ ͳಛ௃Ͱ͢ɻ
14. ಛ௃ • ΠϯλϓϦλݴޠ • ϓϩτλΠϓϕʔε • ϒϥ΢βͰಈ͘ • ಈతܕ෇͚ݴޠ ಈతܕ෇͚ݴޠͱ͸ɺม਺ͳͲʹͲΜͳܕͷ஋͕ೖͬͯ͘Δ͔͸༧Ίܾ·͓ͬͯΒ ͣɺॲཧ͞ΕΔλΠϛϯάͰೖ͍ͬͯΔ஋ʹΑͬͯࣗಈతʹܕͷఆ͕ٛߦΘΕΔϓ ϩάϥϛϯάݴޠʹͳΓ·͢ɻ ࠷ۙ࿩୊ͷTypeScript͸੩తܕ෇͚ݴޠͰ͢ɻ
15. JavaScript ͋ͱ͸ԼهΛࢀর͍ͯͩ͘͠͞ɻɻ JavaScript | MDN web docs
16. ϥΠϒϥϦɺϑϨʔϜϫʔΫ
17. jQuery • 2006೥ ϦϦʔεʢ࡞ऀ δϣϯɾϨγάʣ • ૉͷJSΑΓ΋༰қʹίʔυΛهड़Ͱ͖Δ • ݱࡏ v3.4.1 • Πϕϯτ؅ཧ • CSSૢ࡞ • Ξχϝʔγϣϯ • Ajax Ͱ͖Δ͜ͱ ϒϥ΢βؒͰͷڍಈͷҧ͍Λ ͋·Γߟ͑ͳͯ͘΋ ࢖͑ΔΑ͏ʹ࡞ͬͯ͋Δ
18. ͦͷଞ • GreenSockʢΞχϝʔγϣϯɺTween / Timelineʣ • swiper.jsʢεϥΠμʔʣ • slick.jsʢεϥΠμʔʣ • Hammer.jsʢλονδΣενϟʔʣ • highlight.jsʢιʔείʔυͷγϯλοΫεϋΠϥΠτʣ • chart.jsʢάϥϑදࣔʣ • pixi.jsʢ2Dඳըʣ • Three.jsʢ3Dඳըʣ • moment.jsʢ࣌ؒ / ೔࣌ʣ • js-cookieʢΫοΩʔ؅ཧʣ
19. React • Ϗϡʔʢݟͨ໨ʣߏஙͷͨΊͷϥΠϒϥϦ • Ծ૝DOMʢࠩ෼ϨϯμϦϯάʣ • એݴతͳView • ίϯϙʔωϯτϕʔε • JSXه๏ʢJSߏจͷ֦ுʣ • ΫϥΠΞϯτϧʔςΟϯάʢผ్ઃఆʣ
20. Vue.js • Ϗϡʔʢݟͨ໨ʣߏஙͷͨΊͷϥΠϒϥϦ • Ծ૝DOMʢࠩ෼ϨϯμϦϯάʣ • એݴతͳView • ίϯϙʔωϯτϕʔε • ςϯϓϨʔτߏจʁVueه๏ʁ • ΫϥΠΞϯτϧʔςΟϯάʢผ్ઃఆʣ
21. Reactͷॻ͖ํ React Simple Todo codepen.io/tkcco21
22. Vue.jsͷॻ͖ํ Vue.js Simple Todo codepen.io/tkcco21
23. React΍Vue.jsͷಛ௃
24. ಛ௃ • Ϗϡʔʢݟͨ໨ʣߏஙͷͨΊͷϥΠϒϥϦ • Ծ૝DOMʢࠩ෼ϨϯμϦϯάʣ • એݴతͳView • ίϯϙʔωϯτϕʔε
25. ಛ௃ • Ϗϡʔʢݟͨ໨ʣߏஙͷͨΊͷϥΠϒϥϦ • Ծ૝DOMʢࠩ෼ϨϯμϦϯάʣ • એݴతͳView • ίϯϙʔωϯτϕʔε
26. Ծ૝DOM DOMͱ͸ʁ ΢ΣϒϖʔδΛද͢ HTML ͷΑ͏ʹ — จॻͷߏ଄ΛϝϞϦ಺ʹදݱ͢Δ͜ͱ Ͱɺ΢ΣϒϖʔδͱεΫϦϓτ΍ϓϩάϥϛϯάݴޠΛ઀ଓ͢Δ΋ͷͰ͢ɻ υΩϡϝϯτΦϒδΣΫτϞσϧ (DOM) - Web API | MDN ϒϥ΢βͰwebϖʔδʢHTMLϑΝΠϧʣΛը໘ʹදࣔΛ͢Δͱ͖ʹɺHTML ཁૉΛπϦʔঢ়Ͱදͨ͠DOMπϦʔͱ͍͏΋ͷʹม׵͠·͢ɻ JavaScriptͰ͸ɺ͜ͷDOMπϦʔͷதͷҰͭҰͭʢϊʔυʣΛૢ࡞͠·͢ɻ
27. Ծ૝DOM Ծ૝DOMͱ͸ʁ DOMͱ͸ݴͬͯ΋Ծ૝తͳDOMͰɺ࣮ࡍͷDOMͬΆ͍΋ͷΛJavaScriptͷ ΦϒδΣΫτͰදݱͨ͠΋ͷɻ
28. Ծ૝DOM Ծ૝DOM͔ͩΒԿʁ Vue.js΍ReactͰ͸ɺͦͷԾ૝DOMʢJavaScriptͷΦϒδΣΫτͳΓʣ͔Βࠩ ෼͕͋Δͨͼʹɺͦͷࠩ෼Λ΋ͱʹϦΞϧͳDOMʹ൓өΛ͍ͯ͠·͢ɻ Vue.js΍ReactͰϦΞΫςΟϒͳ஋͕ॻ͖׵͑ΒΕΔͱɺԾ૝DOM͕࡞ΒΕ લճͷԾ૝DOMͱൺֱ͕͞Ε·͢ɻͦͷൺֱͷ݁Ռɺࠩ෼͕͋Ε͹ͦͷ෦෼ ͷΈͷDOMΛมߋ͢ΔΑ͏ʹͳ͍ͬͯ·͢ɻ ͳͷͰɺԾ૝DOMΛ࢖͍ࠩ෼Λࢉग़ͯ͠ϦΞϧͳDOMΛૢ࡞͢Δ͜ͱʹΑͬ ͯɺϦΞϧͳDOM͢΂ͯΛ࠶ੜ੒Λ͢Δ͜ͱͳ͘ɺมߋ͕ඞཁͳ෦෼ͷΈͷ DOMΛมߋ͠දࣔʹ൓ө͢ΔͷͰɺઃܭͱ଎͞ͰԸܙΛड͚ΒΕΔΑ͏ʹ ͳ͍ͬͯ·͢ɻ
29. ϦΞΫςΟϒͳ஋ ϦΞΫςΟϒͳ஋ʁ ઌ΄Ͳग़͖ͯͨʮϦΞΫςΟϒͳ஋ʯͱ͸ɺͦͷ஋Λॻ͖׵͑Δͱදࣔͷ࠶ ϨϯμϦϯάΛͯ͘͠ΕΔ஋ͷ͜ͱͰ͢ɻ ReactͰ͋Ε͹stateͱ͍͏ΦϒδΣΫτɺVue.jsͰ͋Ε͹dataͱ͍͏Φϒ δΣΫτʢ୯ҰϑΝΠϧίϯϙʔωϯτͰ͋Ε͹dataؔ਺͕ฦ͢ΦϒδΣΫ τʣɻ
30. ϦΞΫςΟϒͳ஋ ϦΞΫςΟϒͳ஋ͷมߋͰͷΈදࣔΛมߋ͢Δ ϦΞΫςΟϒͳ஋Λมߋ͢Δͱ࠶ϨϯμϦϯά͞ΕΔ͕ɺjQueryͰ΍͍ͬͯ ͨΑ͏ʹDOMΛऔಘ͖ͯͯ͠ॻ͖׵͑Δ͜ͱ΋ՄೳͰ͢ɻ ͔͠͠ɺͦΕ͸͝๏౓ɻ දࣔΛϦΞΫςΟϒͳ஋Λ΋ͱʹએݴతʹهड़͍ͯ͠ΔͷʹɺͦͷΑ͏ͳ DOMૢ࡞Λߦͬͯ͠·͏ͱએݴతʹهड़͍ͯ͠Δ΋ͷͱදࣔʹᴥᴪΛ͖ͨ͢ ͚ͩͰͳ͘ɺDOMʹඥ෇͚͍ͯͨΠϕϯτ΋ͳ͘ͳͬͯ͠·͏Մೳੑ͕͋Γ ·͢ɻ
31. ಛ௃ • Ϗϡʔʢݟͨ໨ʣߏஙͷͨΊͷϥΠϒϥϦ • Ծ૝DOMʢࠩ෼ϨϯμϦϯάʣ • એݴతͳView • ίϯϙʔωϯτϕʔε
32. એݴతͳView / એݴతͳهड़ ϦΞΫςΟϒͳ஋Λ࢖ͬͯએݴతʹهड़ ͜ͷஈ֊Ͱʮએݴతʯͱฉ͍ͯɺͦΕ͕Ͳ͏͍͏΋ͷͳͷ͔૝૾Ͱ͖ͳ͍ͱ ࢥ͍·͢ɻ ݴ༿Ͱͬ͘͟Γઆ໌͢Δͱɺએݴతͱ͸දࣔ͞ΕΔίʔυ্ʹʮ͜͜ʹ͜ͷ ஋දࣔ͢ΔΑʔʂʯͱهड़͢Δ͜ͱͰ͢ɻ jQueryͰ͸ɺʮͿͪࠐΉʯͱ͍͏දݱ͕ͬ͘͠Γ͘Δ͘Β͍ɺԿͷલ৮Ε΋ ͳ͘දࣔ͞ΕΔίʔυͷத਎Λॻ͖׵͍͑ͯ·ͨ͠ɻ ͭ·ΓɺϦΞΫςΟϒͳ஋ͱViewΛඥ෇͚͓ͯ͘͜ͱͰɺͦͷ෦෼ʹͲ͏͍ ͏஋͕ೖΔ͔͕Θ͔ΔΑ͏ʹهड़Ͱ͖·͢ɻ
33. ಛ௃ • Ϗϡʔʢݟͨ໨ʣߏஙͷͨΊͷϥΠϒϥϦ • Ծ૝DOMʢࠩ෼ϨϯμϦϯάʣ • એݴతͳView • ίϯϙʔωϯτϕʔε
34. ίϯϙʔωϯτ ίϯϙʔωϯτͬͯʁ ίϯϙʔωϯτͱ͸෦඼ͱͳΔύʔπͷ͜ͱͰ͢ɻ React΍Vue.jsͰ͸ϖʔδͰඞཁͳίϯϙʔωϯτΛ࢖͍ϖʔδΛ࡞Γ·͢ɻ ύʔπͱݴͬͯ΋େখ͸͞·͟·ͰɺϖʔδࣗମΛද͢ίϯϙʔωϯτ΋͋ Ε͹ɺϘλϯ΍୯७ͳςΩετΛද͢ίϯϙʔωϯτ΋͋Γ·͢ɻ
35. ίϯϙʔωϯτ ίϯϙʔωϯτͰϖʔδΛߏங͢ΔԸܙ ΢Σϒϖʔδ͸େখ͞·͟·ͳύʔπͷدͤूΊͩͱݴ͏͜ͱ͸ཧղͰ͖Δ ͱࢥ͍·͢ɻ·ͨɺ΢ΣϒϖʔδͰදࣔ͞Ε͍ͯΔཁૉʹ͸ɺͦΕͧΕʮ΍ Δ͜ͱʯͱ͍͏΋ͷ͕ଘࡏ͠·͢ɻ ίϯϙʔωϯτͰߏங͢Ε͹ɺύʔπΛڞ௨Ͱ࢖͍ճͤΔΑ͏ʹͳΓɺͦͷ ίϯϙʔωϯτͰى͖Δ͜ͱ͸ͦͷίϯϙʔωϯτ಺Ͱ׬݁ͤ͞Δ͜ͱ͕Մ ೳͰ͢ɻͭ·Γɺ • ίϯϙʔωϯτͷ࢖͍ճ͕͠Մೳ • ίϯϙʔωϯτ͝ͱʹΠϕϯτ͕ى͖ͨͱ͖ͷॲཧͳͲͷهड़͕Մೳ • CSSΛ௥͏ͱ͖ʹؾʹ͢Δ͜ͱ͕গͳ͘ͳΔ
36. ίϯϙʔωϯτ ίϯϙʔωϯτઃܭ ίϯϙʔωϯτઃܭͱ͸ɺ੹຿ͷ෼୲ + CSSͷׂΓ౰ͯͰ͢ɻ ੹຿ͷ෼୲ͱ͸ɺͦͷίϯϙʔωϯτ಺Ͱඞཁͳॲཧ͸ͦͷίϯϙʔωϯτ ಺Ͱ׬݁ͤ͞Δͱ͍͏͜ͱͰ͢ɻ CSSͷׂΓ౰ͯͱ͸ɺίϯϙʔωϯτͰಠཱͨ͠CSSΛ͚ͭΔͱ͍͏͜ͱͰ ͢ɻ
37. ։ൃ؀ڥ
38. ։ൃ؀ڥ Vue.js ։ൃ؀ڥ͸େ͖͘෼͚ͯ3ͭ React • Vue.jsͷຊମϑΝΠϧͷಡΈࠐΈ • CLIʢVue CLI / Nuxt.jsʣ • όϯυϥʔʢwebpack / Parcel / RollupʣͰ؀ڥΛࣗ෼Ͱ࡞Δ • React / ReactDOMͷຊମϑΝΠϧͷಡΈࠐΈ • CLIʢCreate React App / Next.jsʣ • όϯυϥʔʢwebpack / Parcel / RollupʣͰ؀ڥΛࣗ෼Ͱ࡞Δ
39. ։ൃ؀ڥ ͦΕͧΕͷ։ൃ؀ڥͰԿ͕ҧ͏ͷ͔ ʲຊମϑΝΠϧͷಡΈࠐΈʳ දࣔ͢ΔHTMLϑΝΠϧʹVue.js΍ReactͷϑΝΠϧΛಡΈࠐΉscriptλάΛ ॻ͘ํ๏ɻίϯύΠϧɾτϥϯεύΠϧ͕ඞཁͳه๏͸Ͱ͖·ͤΜɻ ʲCLIʢVue CLI / Nuxt.js / Create React App / Next.jsʣʳ ίϚϯυҰͭͰίϯύΠϧɾτϥϯεύΠϧΛউखʹͯ͘͠ΕΔ؀ڥΛ࡞ͬͯ ͘Ε·͢ɻϑΥϧμɾϑΝΠϧͷ਽ܗ΋࡞ͬͯ͘Ε·͢ɻ࢓૊ΈΛཧղ͢Δ͜ ͱ΍ࣗ෼ͳΓʹ֦ு͢Δ͜ͱ͸ॳΊͯͷਓʹͱͬͯ͸೉͍͠ɻ ʲόϯυϥʔʢwebpack / Parcel / Rollupʣʳ ίϯύΠϧɾτϥϯεύΠϧΛͯ͘͠ΕΔ؀ڥΛࣗ෼Ͱ࡞ΔɻϑΥϧμɾϑΝ Πϧ΋ࣗ෼Ͱߟ͑ߏ੒͢Δඞཁ͕͋Γ·͢ɻઃఆϑΝΠϧΛॻ͍ͨΓɺBabel ͷઃఆΛͨ͠Γ͕େมͰ٧·Γ͕ͪɻ
40. ։ൃ؀ڥ Ͱ͖Δ͜ͱɾͰ͖ͳ͍͜ͱ جຊతͳ
    ॻ͖ํ &4Ҏ߱ͷ
    ه๏ +49
    
    4'$ ϑΥϧμߏ੒
    ͷ֦ு ։ൃ؀ڥͷ
    ཧղͱ֦ு ຊମϑΝΠϧ
    ಡΈࠐΈ ˓ ˚ º º º $-* ˓ ˓ ˓ ˚ º όϯυϥʔ ˓ ˓ ˓ ˓ ˚
    XFCQBDLͳΒ˓
41. ։ൃ؀ڥ Vue.jsͰͷ։ൃ࣌ʹ͢Δ͜ͱ .vue .js .vue .js .scss .sass ߏจνΣοΫ JavaScriptͷίʔυ΁ม׵ ʢର৅ϒϥ΢βͰಡΈࠐΊΔ΋ͷʣ ES6Ҏ߱ͷίʔυΛ ର৅ϒϥ΢βͰಡΈࠐΊΔΑ͏ʹม׵ cssʹม׵ cssϑΝΠϧΛు͖ग़͢ headλάʹૠೖ
42. ։ൃ؀ڥ ॳஈ͸Parcel͕ݸਓతʹ͓͢͢Ί ॳֶऀʹͱͬͯ͸ɺCLIͰͷ؀ڥߏங͸͔ͳΓෳࡶʹײ͡Δͱࢥ͍·͢ɻ Parcelͱ͍͏όϯυϥʔΛ࢖ָͬͯʹ؀ڥߏங͢Δ͜ͱ͕Ͱ͖·͢ɻ CLIʢVue CLI/Create React AppʣΛ࢖͏ͱɺόϯυϧɾτϥϯεύΠϧͯ͠ ͘ΕΔ؀ڥΛ؆୯ʹ࡞ͬͯ͘ΕΔ͕ɺϑΥϧμߏ੒ͳͲͷ਽ܗ΋Ͱ͖ͯ͠· ͍ɺͲͷϑΥϧμɾϑΝΠϧ͕Կͷ໾ׂΛ͍ͯ͠Δͷ͔ͳͲΛཧղͰ͖ͳ͍ ͜ͱ͕ଟ͍Ͱ͢ɻ ParcelΛ࢖ͬͨ৔߹ʹ͸ɺόϯυϧɾτϥϯεύΠϧ͢ΔͨΊͷઃఆ͸΄΅ ॻ͔ͣʢBabelͷઃఆ͸ॻ͘ʣͰɺϑΥϧμɾϑΝΠϧߏ੒͸ࣗ෼ͷ޷͖ʹͰ ͖·͢ɻ
43. ։ൃ؀ڥ ParcelͰVue.jsͷ։ൃ؀ڥΛߏங͢Δʁ
44. ։ൃ؀ڥ ۀ຿Ͱ͸webpackΛ࢖͏͜ͱ͕ଟ͍ ࠷ۙͰ͸ɺVue.jsͰ͋Ε͹Nuxt.jsΛ࢖͏͜ͱ΋ଟ͘ͳ͍ͬͯΔ͕ɺ΍͸Γ webpackͰ؀ڥΛ࡞͍ͬͯΔ͜ͱ΋·ͩଟ͍ͷͰɺwebpackͷ஌ࣝ͸͋ͬͨ ΄͏͕͍͍ɻ ΋͠ɺ͕ͬͭΓJSϑϨʔϜϫʔΫΛ࢖ͬͨϑϩϯτΤϯυʹؔΘΓ͍ͨͷͰ ͋Ε͹Parcel => webpackͰਐΊΕ͹ɺஈ֊తʹϑϨʔϜϫʔΫࣗମͱ։ൃ ؀ڥͷ஌͕ࣝͭ͘ͱࢥ͏ɻ
45. ࣗ෼Ͱ࡞ͬͨ΋ͷ
46. First Vue ಡΜͩຊΛ؅ཧ͢ΔΞϓϦέʔγϣϯ First Vue
47. Ξϯέʔτ