Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20201202発表 Vue.jsを使ったProgressiveな新規サービス開発
Search
doyaaaaaken
November 29, 2020
0
160
20201202発表 Vue.jsを使ったProgressiveな新規サービス開発
doyaaaaaken
November 29, 2020
Tweet
Share
More Decks by doyaaaaaken
See All by doyaaaaaken
コンパウンドスタートアップの“疎結合すぎない”チーム設計
doyaaaaaken
5
1.1k
スマートラウンドで試してみた ChatGPT活用成功/失敗事例8選!
doyaaaaaken
3
4.1k
Kotlin製自作OSSの普及戦略 ~kotlin-csvの実例を元に~ @Kotlin Fest 2022
doyaaaaaken
2
590
20220721 小規模フルリモート組織における入社者オンボーディング設計
doyaaaaaken
0
280
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
300
プラットフォーム型SaaSにおけるマルチテナント設計
doyaaaaaken
5
2.5k
考えることを仕組み化する
doyaaaaaken
1
610
プルリクへのセルフコメントという小技
doyaaaaaken
0
540
先取りKtor2.0
doyaaaaaken
1
500
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
288
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
Six Lessons from altMBA
skipperchong
20
3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
A designer walks into a library…
pauljervisheath
199
23k
The Cult of Friendly URLs
andyhume
74
5.7k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Thoughts on Productivity
jonyablonski
57
3.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Transcript
Vue.jsΛͬͨProgressiveͳ ৽نαʔϏε։ൃ 2020/12/02 খࢁ݈ଠ(Kenta Koyama) @doyaaaaaaken
ࣗݾհ • גࣜձࣾsmartround CTO • ۀ͔࣌ΒؔΘΓθϩ͔ΒαʔϏε্ཱͪ͛͠2 • ϑϩϯτɾόοΫΤϯυɾΠϯϑϥ͚ͩͰͳ͘FigmaGoogleAnalytics • લ৬BizReachͰHRMOSͱ͍͏SaaSͷ্ཱͪ͛
• OSS׆ಈKotlinܥ͕ϝΠϯ • KtorɾExposedͷίϯτϦϏϡʔτ • kotlin-csvΛࣗ࡞ʢStar200΄Ͳʣ
smartroundͱ • αʔϏε • ʰελʔτΞοϓɾࢿՈؒͷσʔλڞ༗ϓϥοτϑΥʔϜʱSaaS • ελʔτΞοϓʹגओ૯ձɾࢿຊࡦαʔϏεΛఏڙ • ࢿՈʹࢿઌཧαʔϏεΛఏڙ •
ٕज़ελοΫ • ϑϩϯτVue.js×TypescriptɺαʔόαΠυKotlinɺΠϯϑϥAWS • ʰsmartroundΛࢧ͑Δٕज़ʱͱ͍͏ٕज़հࢿྉެ։͍ͯ͠·͢
͜ͷൃදͰ͍͑ͨ͜ͱ ʰVue.js”Progressive”ͳࢥͷϑϨʔϜϫʔΫͰ ৽نαʔϏε։ൃʹͱ͍͍ͯ͢ʱ ※࣮ࡍʹsmartroundͰΘΕͨ ۩ମతػೳઃܭύλʔϯʹ͍ͭͯհ͠·͢
Vue.jsͷ”Progressive Framework”ͷࢥ • ΠϯΫϦϝϯλϧͳಋೖ͕Մೳ • ίΞ෦ViewϨΠϠͷػೳͷΈ • ଞͷπʔϧϥΠϒϥϦͱ Έ߹ΘͤΔ͜ͱͰ ϞμϯͳSPAߏஙՄೳ
Vue.jsެࣜυΩϡϝϯτΑΓ
։ൃ࠷ॳظ͜ͷ-FWFMͷػೳ͕ ଟ͔͕ͬͨࠓ΄΅ແ͠ smartroundͰػೳϨϕϧʹԠͯ͡ઃܭΛ͍͚͍ͯͨ -FWFM 7VFKTΛΘͳ͍ -FWFM 7VFKTͷجຊػೳ ͷΈར༻ -FWFM ͪΐͬͱϦονͳ
ը໘ʹ • ػೳɿෳࡶ • ɿେ • ػೳɿ୯७ • ɿগ Ұ෦ͷෳࡶͳػೳݶఆ -FWFM 7VFYʹΑΔ ঢ়ଶཧ
Level0. Vue.jsΛΘͳ͍ɿྫ %&.0
Level0. Vue.jsΛΘͳ͍ɿΈ • ॲཧ • αʔόଆͰHTMLΛߏங͠ฦ͢ • HTMLͰVue.jsΛΘͣɺ୯ͳΔformλάͳͲ͕ΘΕ͍ͯΔ • Ϣʔεέʔε
• ຊʹ։ൃॳظͰٸ͍Ͱ͍Δͱ͖
Level1. Vue.jsͷجຊػೳͷΈར༻ɿྫ %&.0
Level1. Vue.jsͷجຊػೳͷΈར༻ɿΈ • ॲཧ • HTMLͷdata-attributeʹඳը͍ͨ͠σʔλΛJSONͱͯ͠ೖΕ͓͖ͯɺ ͦΕΛར༻͢ΔܗͰVue.jsͰը໘ඳը • Ϣʔεέʔε •
v-if, v-forͳͲVue.jsͷը໘ඳըܥػೳ͚ͩར༻͍ͨ͠έʔε • ڞ௨తͳίϯϙʔωϯτΛVueComponentԽ͠࠶ར༻͍ͨ͠έʔε
Level2. ͪΐͬͱϦονͳը໘ʹɿྫ %&.0
Level2. ͪΐͬͱϦονͳը໘ʹɿΈ • Ϧονͳը໘Λ࡞Δͷʹ͍৭ʑͳVue.jsؔ࿈ػೳΛ͍࢝ΊΔ • VueRouterΛ͍ɺҰ෦ͷϖʔδ܈͚ͩSPAతͳڍಈʹͨ͠Γ… • mixinΛͬͯɺڞ௨ॲཧΛΓग़ͨ͠Γ… • event
busΛͬͯɺࢠؔͷແ͍ίϯϙʔωϯτؒͰͷΠϕϯτΛͨ͠ Γ… • mixinevent busγϯϓϧͰ͍͍͢Ͱ͕͢ ػೳͷෳࡶੑ͕ߴ͘ͳΔͱϝϯςφϯεੑ͕͍ͷͰVuexΛ͏
Level3. VuexʹΑΔঢ়ଶཧɿྫ %&.0
Level3. VuexʹΑΔঢ়ଶཧɿΈ • Fluxࢥ͔Β࡞ΒΕͨVue.js༻ঢ়ଶཧϥΠϒϥϦɻৄࡉׂѪɻ • Ϣʔεέʔε • ͋ΔίϯϙʔωϯτͰͷૢ࡞͕ผίϯϙʔωϯτʹٴ͢ΔΑ͏ͳෳࡶͳը໘ • ※
Vuexಋೖ͢Δ͚ͩͰͳ͘ϑϩϯτͷςετίʔυॻ͘ͱ͔ผ్
ʢ͓·͚ʣNuxt.jsͷར༻ɿྫ %&.0
ʢ͓·͚ʣNuxt.jsͷར༻ɿΈ • Nuxt.jsVue.jsΛϕʔεʹͨ͠ϑϧελοΫϑϨʔϜϫʔΫ • Vue.jsϓϩδΣΫτΛ؆୯ʹ࡞ΕΔπʔϧ • σΟϨΫτϦ͚͕σϑΥϧτͰ͞Ε͍ͯΔ • ֤छؔ࿈ϥΠϒϥϦʢྫɿVueRouterʣͷΠϯετʔϧ͕༧ΊߦΘΔ •
ͦͷଞ։ൃʹศརͳπʔϧؚ͕·Ε͍ͯΔ • ※ଞͷํͷൃදςʔϚʹͳ͍ͬͯΔͷͰɺৄࡉׂѪ͠·͢
·ͱΊ • Vue.js࡞Γ͍ͨػೳͷϨϕϧʹԠ͍͚͍ͯ͢͡ • ؆୯ͳը໘ɾ͍͠ը໘ͰશવҧͬͨઃܭʹͰ͖Δ • ·ͨ”Progressive”ʹʢஈ֊తʹʣϨϕϧΛ্͍͛ͯ͘͜ͱ͕Ͱ͖Δ • ։ൃॳظʹ͓͍ͯϨϕϧΛԼ࣮͛ͨʹͰ͖Δ ৽نαʔϏεͷ্ཱͪ͛ʹ͏ͷΦεεϝ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @doyaaaaaken