20201202発表 Vue.jsを使ったProgressiveな新規サービス開発

Transcript

1. Vue.jsΛ࢖ͬͨProgressiveͳ ৽نαʔϏε։ൃ 2020/12/02 খࢁ݈ଠ(Kenta Koyama) @doyaaaaaaken
2. ࣗݾ঺հ • גࣜձࣾsmartround CTO • ૑ۀ͔࣌ΒؔΘΓθϩ͔ΒαʔϏε্ཱͪ͛͠2೥ • ϑϩϯτɾόοΫΤϯυɾΠϯϑϥ͚ͩͰͳ͘Figma΍GoogleAnalytics౳΋ • લ৬͸BizReachͰHRMOSͱ͍͏SaaSͷ্ཱͪ͛ • OSS׆ಈ͸Kotlinܥ͕ϝΠϯ • KtorɾExposed΁ͷίϯτϦϏϡʔτ • kotlin-csvΛࣗ࡞ʢStar਺200΄Ͳʣ
3. smartroundͱ͸ • αʔϏε • ʰελʔτΞοϓɾ౤ࢿՈؒͷσʔλڞ༗ϓϥοτϑΥʔϜʱSaaS • ελʔτΞοϓʹ͸גओ૯ձɾࢿຊ੓ࡦαʔϏε౳Λఏڙ • ౤ࢿՈʹ͸౤ࢿઌ؅ཧαʔϏεΛఏڙ • ٕज़ελοΫ • ϑϩϯτVue.js×TypescriptɺαʔόαΠυKotlinɺΠϯϑϥAWS • ʰsmartroundΛࢧ͑Δٕज़ʱͱ͍͏ٕज़঺հࢿྉ΋ެ։͍ͯ͠·͢
4. ͜ͷൃදͰ఻͍͑ͨ͜ͱ ʰVue.js͸”Progressive”ͳࢥ૝ͷϑϨʔϜϫʔΫͰ ৽نαʔϏε։ൃʹ͸ͱͯ΋࢖͍΍͍͢ʱ ※࣮ࡍʹsmartroundͰ࢖ΘΕͨ ۩ମతػೳ΍ઃܭύλʔϯʹ͍ͭͯ঺հ͠·͢
5. Vue.jsͷ”Progressive Framework”ͷࢥ૝ • ΠϯΫϦϝϯλϧͳಋೖ͕Մೳ • ίΞ෦෼͸ViewϨΠϠͷػೳͷΈ • ଞͷπʔϧ΍ϥΠϒϥϦͱ ૊Έ߹ΘͤΔ͜ͱͰ ϞμϯͳSPA΋ߏஙՄೳ Vue.jsެࣜυΩϡϝϯτΑΓ
6. ։ൃ࠷ॳظ͸͜ͷ-FWFMͷػೳ͕
   ଟ͔͕ͬͨࠓ͸΄΅ແ͠ smartroundͰ΋ػೳϨϕϧʹԠͯ͡ઃܭΛ࢖͍෼͚͍ͯͨ -FWFM
   7VFKTΛ࢖Θͳ͍
   -FWFM
   7VFKTͷجຊػೳ
   ͷΈར༻ -FWFM
   ͪΐͬͱϦονͳ
   ը໘ʹ • ػೳɿෳࡶ • ޻਺ɿେ • ػೳɿ୯७ • ޻਺ɿগ
   Ұ෦ͷෳࡶͳػೳݶఆ -FWFM
   7VFYʹΑΔ
   ঢ়ଶ؅ཧ
7. Level0. Vue.jsΛ࢖Θͳ͍ɿྫ %&.0
8. Level0. Vue.jsΛ࢖Θͳ͍ɿ࢓૊Έ • ॲཧ • αʔόଆͰHTMLΛߏங͠ฦ͢ • HTML಺Ͱ͸Vue.jsΛ࢖Θͣɺ୯ͳΔformλάͳͲ͕࢖ΘΕ͍ͯΔ • Ϣʔεέʔε • ຊ౰ʹ։ൃॳظͰٸ͍Ͱ͍Δͱ͖
9. Level1. Vue.jsͷجຊػೳͷΈར༻ɿྫ %&.0
10. Level1. Vue.jsͷجຊػೳͷΈར༻ɿ࢓૊Έ • ॲཧ • HTMLͷdata-attributeʹඳը͍ͨ͠σʔλΛJSONͱͯ͠ೖΕ͓͖ͯɺ ͦΕΛར༻͢ΔܗͰVue.jsͰը໘ඳը • Ϣʔεέʔε • v-if, v-forͳͲVue.jsͷը໘ඳըܥػೳ͚ͩར༻͍ͨ͠έʔε • ڞ௨తͳίϯϙʔωϯτΛVueComponentԽ͠࠶ར༻͍ͨ͠έʔε
11. Level2. ͪΐͬͱϦονͳը໘ʹɿྫ %&.0
12. Level2. ͪΐͬͱϦονͳը໘ʹɿ࢓૊Έ • Ϧονͳը໘Λ࡞Δͷʹ൐͍৭ʑͳVue.jsؔ࿈ػೳΛ࢖͍࢝ΊΔ • VueRouterΛ࢖͍ɺҰ෦ͷϖʔδ܈͚ͩSPAతͳڍಈʹͨ͠Γ… • mixinΛ࢖ͬͯɺڞ௨ॲཧΛ੾Γग़ͨ͠Γ… • event busΛ࢖ͬͯɺ਌ࢠؔ܎ͷແ͍ίϯϙʔωϯτؒͰͷΠϕϯτ఻೻Λͨ͠ Γ… • mixin΍event bus͸γϯϓϧͰ࢖͍΍͍͢Ͱ͕͢ ػೳͷෳࡶੑ͕ߴ͘ͳΔͱϝϯςφϯεੑ͕௿͍ͷͰVuexΛ࢖͏
13. Level3. VuexʹΑΔঢ়ଶ؅ཧɿྫ %&.0
14. Level3. VuexʹΑΔঢ়ଶ؅ཧɿ࢓૊Έ • Fluxࢥ૝͔Β࡞ΒΕͨVue.js༻ঢ়ଶ؅ཧϥΠϒϥϦɻৄࡉ͸ׂѪɻ • Ϣʔεέʔε • ͋ΔίϯϙʔωϯτͰͷૢ࡞͕ผίϯϙʔωϯτʹ೾ٴ͢ΔΑ͏ͳෳࡶͳը໘ • ※ Vuexಋೖ͢Δ͚ͩͰͳ͘ϑϩϯτͷςετίʔυॻ͘ͱ͔ผ్޻෉΋
15. ʢ͓·͚ʣNuxt.jsͷར༻ɿྫ %&.0
16. ʢ͓·͚ʣNuxt.jsͷར༻ɿ࢓૊Έ • Nuxt.js͸Vue.jsΛϕʔεʹͨ͠ϑϧελοΫϑϨʔϜϫʔΫ • Vue.jsϓϩδΣΫτΛ؆୯ʹ࡞ΕΔπʔϧ • σΟϨΫτϦ෼͚͕σϑΥϧτͰ͞Ε͍ͯΔ • ֤छؔ࿈ϥΠϒϥϦʢྫɿVueRouterʣͷΠϯετʔϧ͕༧ΊߦΘΔ • ͦͷଞ։ൃʹศརͳπʔϧؚ͕·Ε͍ͯΔ • ※ଞͷํͷൃදςʔϚʹͳ͍ͬͯΔͷͰɺৄࡉ͸ׂѪ͠·͢
17. ·ͱΊ • Vue.js͸࡞Γ͍ͨػೳͷϨϕϧʹԠͯ͡࢖͍෼͚΍͍͢ • ؆୯ͳը໘ɾ೉͍͠ը໘ͰશવҧͬͨઃܭʹͰ͖Δ • ·ͨ”Progressive”ʹʢஈ֊తʹʣϨϕϧΛ্͍͛ͯ͘͜ͱ͕Ͱ͖Δ • ։ൃॳظʹ͓͍ͯ͸ϨϕϧΛԼ࣮͛ͨ૷ʹͰ͖Δ ৽نαʔϏεͷ্ཱͪ͛ʹ࢖͏ͷ͸Φεεϝ
18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @doyaaaaaken