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
170
20201202発表 Vue.jsを使ったProgressiveな新規サービス開発
doyaaaaaken
November 29, 2020
Tweet
Share
More Decks by doyaaaaaken
See All by doyaaaaaken
コンパウンドスタートアップの“疎結合すぎない”チーム設計
doyaaaaaken
5
1.3k
スマートラウンドで試してみた ChatGPT活用成功/失敗事例8選!
doyaaaaaken
3
4.2k
Kotlin製自作OSSの普及戦略 ~kotlin-csvの実例を元に~ @Kotlin Fest 2022
doyaaaaaken
2
700
20220721 小規模フルリモート組織における入社者オンボーディング設計
doyaaaaaken
0
310
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
340
プラットフォーム型SaaSにおけるマルチテナント設計
doyaaaaaken
5
2.7k
考えることを仕組み化する
doyaaaaaken
1
630
プルリクへのセルフコメントという小技
doyaaaaaken
0
560
先取りKtor2.0
doyaaaaaken
1
570
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Statistics for Hackers
jakevdp
794
220k
Writing Fast Ruby
sferik
623
60k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Ruby is Unlike a Banana
tanoku
96
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Design by the Numbers
sachag
277
19k
Automating Front-end Workflow
addyosmani
1365
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
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