Tweet
Tweet

Slide 1

Slide 1 text

Vue.jsΛ࢖ͬͨProgressiveͳ ৽نαʔϏε։ൃ 2020/12/02 খࢁ݈ଠ(Kenta Koyama) @doyaaaaaaken

Slide 2

Slide 2 text

ࣗݾ঺հ • גࣜձࣾsmartround CTO • ૑ۀ͔࣌ΒؔΘΓθϩ͔ΒαʔϏε্ཱͪ͛͠2೥ • ϑϩϯτɾόοΫΤϯυɾΠϯϑϥ͚ͩͰͳ͘Figma΍GoogleAnalytics౳΋ • લ৬͸BizReachͰHRMOSͱ͍͏SaaSͷ্ཱͪ͛ • OSS׆ಈ͸Kotlinܥ͕ϝΠϯ • KtorɾExposed΁ͷίϯτϦϏϡʔτ • kotlin-csvΛࣗ࡞ʢStar਺200΄Ͳʣ

Slide 3

Slide 3 text

smartroundͱ͸ • αʔϏε • ʰελʔτΞοϓɾ౤ࢿՈؒͷσʔλڞ༗ϓϥοτϑΥʔϜʱSaaS • ελʔτΞοϓʹ͸גओ૯ձɾࢿຊ੓ࡦαʔϏε౳Λఏڙ • ౤ࢿՈʹ͸౤ࢿઌ؅ཧαʔϏεΛఏڙ • ٕज़ελοΫ • ϑϩϯτVue.js×TypescriptɺαʔόαΠυKotlinɺΠϯϑϥAWS • ʰsmartroundΛࢧ͑Δٕज़ʱͱ͍͏ٕज़঺հࢿྉ΋ެ։͍ͯ͠·͢

Slide 4

Slide 4 text

͜ͷൃදͰ఻͍͑ͨ͜ͱ ʰVue.js͸”Progressive”ͳࢥ૝ͷϑϨʔϜϫʔΫͰ ৽نαʔϏε։ൃʹ͸ͱͯ΋࢖͍΍͍͢ʱ ※࣮ࡍʹsmartroundͰ࢖ΘΕͨ ۩ମతػೳ΍ઃܭύλʔϯʹ͍ͭͯ঺հ͠·͢

Slide 5

Slide 5 text

Vue.jsͷ”Progressive Framework”ͷࢥ૝ • ΠϯΫϦϝϯλϧͳಋೖ͕Մೳ • ίΞ෦෼͸ViewϨΠϠͷػೳͷΈ • ଞͷπʔϧ΍ϥΠϒϥϦͱ ૊Έ߹ΘͤΔ͜ͱͰ ϞμϯͳSPA΋ߏஙՄೳ Vue.jsެࣜυΩϡϝϯτΑΓ

Slide 6

Slide 6 text

։ൃ࠷ॳظ͸͜ͷ-FWFMͷػೳ͕ ଟ͔͕ͬͨࠓ͸΄΅ແ͠ smartroundͰ΋ػೳϨϕϧʹԠͯ͡ઃܭΛ࢖͍෼͚͍ͯͨ -FWFM 7VFKTΛ࢖Θͳ͍ -FWFM 7VFKTͷجຊػೳ ͷΈར༻ -FWFM ͪΐͬͱϦονͳ ը໘ʹ • ػೳɿෳࡶ • ޻਺ɿେ • ػೳɿ୯७ • ޻਺ɿগ Ұ෦ͷෳࡶͳػೳݶఆ -FWFM 7VFYʹΑΔ ঢ়ଶ؅ཧ

Slide 7

Slide 7 text

Level0. Vue.jsΛ࢖Θͳ͍ɿྫ %&.0

Slide 8

Slide 8 text

Level0. Vue.jsΛ࢖Θͳ͍ɿ࢓૊Έ • ॲཧ • αʔόଆͰHTMLΛߏங͠ฦ͢ • HTML಺Ͱ͸Vue.jsΛ࢖Θͣɺ୯ͳΔformλάͳͲ͕࢖ΘΕ͍ͯΔ • Ϣʔεέʔε • ຊ౰ʹ։ൃॳظͰٸ͍Ͱ͍Δͱ͖

Slide 9

Slide 9 text

Level1. Vue.jsͷجຊػೳͷΈར༻ɿྫ %&.0

Slide 10

Slide 10 text

Level1. Vue.jsͷجຊػೳͷΈར༻ɿ࢓૊Έ • ॲཧ • HTMLͷdata-attributeʹඳը͍ͨ͠σʔλΛJSONͱͯ͠ೖΕ͓͖ͯɺ ͦΕΛར༻͢ΔܗͰVue.jsͰը໘ඳը • Ϣʔεέʔε • v-if, v-forͳͲVue.jsͷը໘ඳըܥػೳ͚ͩར༻͍ͨ͠έʔε • ڞ௨తͳίϯϙʔωϯτΛVueComponentԽ͠࠶ར༻͍ͨ͠έʔε

Slide 11

Slide 11 text

Level2. ͪΐͬͱϦονͳը໘ʹɿྫ %&.0

Slide 12

Slide 12 text

Level2. ͪΐͬͱϦονͳը໘ʹɿ࢓૊Έ • Ϧονͳը໘Λ࡞Δͷʹ൐͍৭ʑͳVue.jsؔ࿈ػೳΛ࢖͍࢝ΊΔ • VueRouterΛ࢖͍ɺҰ෦ͷϖʔδ܈͚ͩSPAతͳڍಈʹͨ͠Γ… • mixinΛ࢖ͬͯɺڞ௨ॲཧΛ੾Γग़ͨ͠Γ… • event busΛ࢖ͬͯɺ਌ࢠؔ܎ͷແ͍ίϯϙʔωϯτؒͰͷΠϕϯτ఻೻Λͨ͠ Γ… • mixin΍event bus͸γϯϓϧͰ࢖͍΍͍͢Ͱ͕͢ ػೳͷෳࡶੑ͕ߴ͘ͳΔͱϝϯςφϯεੑ͕௿͍ͷͰVuexΛ࢖͏

Slide 13

Slide 13 text

Level3. VuexʹΑΔঢ়ଶ؅ཧɿྫ %&.0

Slide 14

Slide 14 text

Level3. VuexʹΑΔঢ়ଶ؅ཧɿ࢓૊Έ • Fluxࢥ૝͔Β࡞ΒΕͨVue.js༻ঢ়ଶ؅ཧϥΠϒϥϦɻৄࡉ͸ׂѪɻ • Ϣʔεέʔε • ͋ΔίϯϙʔωϯτͰͷૢ࡞͕ผίϯϙʔωϯτʹ೾ٴ͢ΔΑ͏ͳෳࡶͳը໘ • ※ Vuexಋೖ͢Δ͚ͩͰͳ͘ϑϩϯτͷςετίʔυॻ͘ͱ͔ผ్޻෉΋

Slide 15

Slide 15 text

ʢ͓·͚ʣNuxt.jsͷར༻ɿྫ %&.0

Slide 16

Slide 16 text

ʢ͓·͚ʣNuxt.jsͷར༻ɿ࢓૊Έ • Nuxt.js͸Vue.jsΛϕʔεʹͨ͠ϑϧελοΫϑϨʔϜϫʔΫ • Vue.jsϓϩδΣΫτΛ؆୯ʹ࡞ΕΔπʔϧ • σΟϨΫτϦ෼͚͕σϑΥϧτͰ͞Ε͍ͯΔ • ֤छؔ࿈ϥΠϒϥϦʢྫɿVueRouterʣͷΠϯετʔϧ͕༧ΊߦΘΔ • ͦͷଞ։ൃʹศརͳπʔϧؚ͕·Ε͍ͯΔ • ※ଞͷํͷൃදςʔϚʹͳ͍ͬͯΔͷͰɺৄࡉ͸ׂѪ͠·͢

Slide 17

Slide 17 text

·ͱΊ • Vue.js͸࡞Γ͍ͨػೳͷϨϕϧʹԠͯ͡࢖͍෼͚΍͍͢ • ؆୯ͳը໘ɾ೉͍͠ը໘ͰશવҧͬͨઃܭʹͰ͖Δ • ·ͨ”Progressive”ʹʢஈ֊తʹʣϨϕϧΛ্͍͛ͯ͘͜ͱ͕Ͱ͖Δ • ։ൃॳظʹ͓͍ͯ͸ϨϕϧΛԼ࣮͛ͨ૷ʹͰ͖Δ ৽نαʔϏεͷ্ཱͪ͛ʹ࢖͏ͷ͸Φεεϝ

Slide 18

Slide 18 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @doyaaaaaken