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
180
20201202発表 Vue.jsを使ったProgressiveな新規サービス開発
doyaaaaaken
November 29, 2020
Tweet
Share
More Decks by doyaaaaaken
See All by doyaaaaaken
コンパウンドスタートアップの“疎結合すぎない”チーム設計
doyaaaaaken
5
1.6k
スマートラウンドで試してみた ChatGPT活用成功/失敗事例8選!
doyaaaaaken
3
4.4k
Kotlin製自作OSSの普及戦略 ~kotlin-csvの実例を元に~ @Kotlin Fest 2022
doyaaaaaken
3
850
20220721 小規模フルリモート組織における入社者オンボーディング設計
doyaaaaaken
0
380
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
410
プラットフォーム型SaaSにおけるマルチテナント設計
doyaaaaaken
5
2.8k
考えることを仕組み化する
doyaaaaaken
1
700
プルリクへのセルフコメントという小技
doyaaaaaken
0
630
先取りKtor2.0
doyaaaaaken
1
650
Featured
See All Featured
Docker and Python
trallard
45
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Faster Mobile Websites
deanohume
308
31k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
RailsConf 2023
tenderlove
30
1.2k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Cult of Friendly URLs
andyhume
79
6.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Into the Great Unknown - MozCon
thekraken
40
1.9k
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