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.5k
スマートラウンドで試してみた ChatGPT活用成功/失敗事例8選!
doyaaaaaken
3
4.3k
Kotlin製自作OSSの普及戦略 ~kotlin-csvの実例を元に~ @Kotlin Fest 2022
doyaaaaaken
3
820
20220721 小規模フルリモート組織における入社者オンボーディング設計
doyaaaaaken
0
360
エンジニアによる事業指標計測のススメ
doyaaaaaken
1
390
プラットフォーム型SaaSにおけるマルチテナント設計
doyaaaaaken
5
2.8k
考えることを仕組み化する
doyaaaaaken
1
680
プルリクへのセルフコメントという小技
doyaaaaaken
0
610
先取りKtor2.0
doyaaaaaken
1
630
Featured
See All Featured
Optimizing for Happiness
mojombo
377
70k
Agile that works and the tools we love
rasmusluckow
328
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.5k
Fireside Chat
paigeccino
37
3.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Documentation Writing (for coders)
carmenintech
69
4.7k
What's in a price? How to price your products and services
michaelherold
245
12k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Pragmatic Product Professional
lauravandoore
33
6.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
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