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
Nuxtとfirebaseでwebサービスをつくってみた
Search
yusuke_yamashita
May 21, 2019
Technology
0
270
Nuxtとfirebaseでwebサービスをつくってみた
Nuxtとfirebaseを使ったwebサービスを個人で開発してみました。
その際の内容に関して、LTとして登壇した際の資料をアップしておきます。
yusuke_yamashita
May 21, 2019
Tweet
Share
More Decks by yusuke_yamashita
See All by yusuke_yamashita
NuxtとFirebaseでSSRのWebアプリを作ってみた
hand12_k
6
1.2k
Other Decks in Technology
See All in Technology
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Janus
bkuhlmann
1
490
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
230
MapLibreとAmazon Location Service
dayjournal
1
150
JAWS-UG Bedrock Claude Night
yamahiro
3
570
Azureの基本的な権限管理の勉強会
yhana
0
240
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
150
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Navigating Team Friction
lara
178
13k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
The Cult of Friendly URLs
andyhume
74
5.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
How to train your dragon (web standard)
notwaldorf
73
5.2k
A Tale of Four Properties
chriscoyier
151
22k
Code Review Best Practice
trishagee
55
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Transcript
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε NuxtͱfirebaseΛͬͯ webαʔϏεΛ࡞ͬͯΈͨ גࣜձࣾLivesense ࢁԼ ༔հ / @hand12_k
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͢͜ͱ ͭͬͨ͘ͷ ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͢͜ͱ ͭͬͨ͘ͷ ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ͭͬͨ͘ͷ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε https://withruit.com
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε https://withruit.com
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͭͬͨ͘ͷ ߦ͖͍ͨॴʹରͯ͠ͷಉߦऀΛืू͢ΔαʔϏε
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͭͬͨ͘ͷ ϥΠϒʹҰॹʹདྷ ͯ͘ΕΔਓେืूʂ ҰਓͰߦ͖ͮΒ͍ɺʓʓ ͷϥΠϒʹҰॹʹདྷͯ͘ Ami Watanabe Tick
Ticket ͕ࣗߦ͖͍ͨॴΛߘ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͭͬͨ͘ͷ ͕ࣗߦ͖͍ͨͱࢥͬͨϓϥϯʹϦΫΤετΛૹΔ ϥΠϒʹҰॹʹདྷ ͯ͘ΕΔਓେืूʂ ҰਓͰߦ͖ͮΒ͍ɺʓʓ ͷϥΠϒʹҰॹʹདྷͯ͘ Ami Watanabe
ϦΫΤετΛૹΔ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ػೳҰཡ • ϩάΠϯػೳ • ߘػೳ • ίϝϯτػೳ •
νϟοτػೳ • Ԡืػೳ • ը૾Ξοϓϩʔυػೳ • ͓͍߹Θͤػೳ • ϝʔϧ௨ػೳ ͭͬͨ͘ͷ • OGPλάߋ৽
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͢͜ͱ ͭͬͨ͘ͷ ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ٕͬͨज़
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ٕͬͨज़
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Vue ΞϓϦέʔγϣϯΛ࡞͢ΔϑϨʔϜϫʔΫ αʔόʔαΠυͱΫϥΠΞϯταΠυͷUIϨϯμϦϯά ʹؔ͢ΔػೳΛओʹఏڙ͍ͯ͠Δ Nuxt ٕͬͨज़
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε • Vue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱʢ*.vueʣ • αʔόʔαΠυϨϯμϦϯά • ੩తϑΝΠϧͷ৴ •
ES6/ES7 ͷτϥϯεύΠϨʔγϣϯ • <head> ཁૉʢ<title>ɺ<meta> ͳͲʣͷཧ • ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά • ϓϦϓϩηοα: Sass, Less, Stylus ͳͲ Nuxt ٕͬͨज़
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Vue ٕͬͨज़ <template> <h1 class=“title”> {{ text }}
</h1> </template> <script> data() { return { text: “Hello World” } } </script> <style> .title { color: Red; } </style> Hello World • ίϯϙʔωϯτ୯ҐͰ ϑΝΠϧΛׂ • ֎෦ʹӨڹ͠ͳ͍CSS Λهड़Մೳ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Google͕ఏڙ͍ͯ͠ΔΫϥυαʔϏε αʔόʔσʔλϕʔεͳͲͷΠϯϑϥपΓػೳ͔Βɺ ϢʔβʔೝূϝοηʔδͳͲόοΫΤϯυͷػೳΛఏ ڙ͍ͯ͠Δ firebase ٕͬͨज़
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ٕͬͨज़ firebase
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ػೳҰཡ • ϩάΠϯػೳ • ߘػೳ • ίϝϯτػೳ •
νϟοτػೳ • Ԡืػೳ • ը૾Ξοϓϩʔυػೳ • ͓͍߹Θͤػೳ • ϝʔϧ௨ػೳ ͭͬͨ͘ͷ • OGPλάߋ৽
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ػೳҰཡ • ϩάΠϯػೳ • ߘػೳ • ίϝϯτػೳ •
νϟοτػೳ • Ԡืػೳ • ը૾Ξοϓϩʔυػೳ • ͓͍߹Θͤػೳ • ϝʔϧ௨ػೳ ͭͬͨ͘ͷ • OGPλάߋ৽ Authentication Realtime Database Realtime Database Realtime Database Realtime Database Realtime Database Cloud Functions Cloud Storage Cloud Functions
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Authentication ٕͬͨज़ • firebase͕ఏڙ͍ͯ͠ΔϩάΠϯػೳ • Ϣʔβͷ৽نొϩάΠϯཧͷػೳΛఏ ڙ͍ͯ͠Δ •
facebook, googleೝূͷػೳఏڙ͞Ε͓ͯΓɺ tokenཧͳͲͷػೳSDKͰ༻ҙ͞Ε͍ͯΔ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Authentication ٕͬͨज़
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Realtime Database ٕͬͨज़ • ϦΞϧλΠϜʹσʔλΛอଘɾಉظͰ͖ΔΫ ϥυϗετܕͷNoSQLܗࣜσʔλϕʔε • ΦϑϥΠϯʹͳͬͯɺϩʔΧϧʹσʔλΛ
อ࣋͠ɺΦϯϥΠϯʹͳͬͨλΠϛϯάͰಉ ظ։࢝
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Cloud Storage ٕͬͨज़ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾ಈըͳͲ ͷίϯςϯπΛอଘ͢Δ͜ͱ͕Ͱ͖ΔετϨʔ δαʔϏε
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Cloud Functions ٕͬͨज़ • Node.jsͷؔΛ࣮ߦͰ͖Δػೳ • firebaseͷ༷ʑͳΠϕϯτΛτϦΨʔʹɺؔ Λ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ
• Authentication • Realtime Database • Cloud Storage • …
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ٕͬͨज़ ϩάΠϯ facebookೝূ Authentication Ϣʔβใͷอଘॲཧ Cloud Functions Ϣʔβใͷอଘ
Realtime DB ߘ ਃ͠ࠐΈ ߘσʔλͷอଘ Realtime DB ը૾Ξοϓϩʔυ Cloud Storage ϝʔϧૹ৴ Cloud Functions ਃ͠ࠐΈใΛอଘ Realtime DB
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ٕͬͨज़ ௨ OGPλάߋ৽ OGPλάΛੜ͠HTMLΛฦ͢ Cloud Functions ͓͍߹Θͤ ϦΫΤετΛFunctionsʹྲྀ͢
Hosting Slackͷ௨ Cloud Functions ͓͍߹Θͤσʔλͷอଘ Realtime DB มߋΛݕ͠௨ॲཧΛߦ͏ Cloud Functions ରͷσʔλ͕อଘ Realtime DB
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͢͜ͱ ͭͬͨ͘ͷ ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ϚʔέςΟϯά
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά • ͔ͤͬ͘࡞ΔͷͰ͋Εɺͨ͘͞ΜͷਓʹͬͯΒ͍͍ͨ • ͋ΘΑ͘ɺΞϑΣϦΤΠτͰऩӹ͍ͩͨ͠ • λʔήοτϢʔβʔΛ໌֬ʹ͠ɺ͞Δૌٻจ͕ඞཁ •
ϦϦʔε࣌ͰɺҰఆͷߘσʔλ͕ඞཁ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά ॳظϢʔβͱͯ͠ɺ20݅ߘσʔλΛ֫ಘ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά 6ϲ݄ҎԼͷຢ 100ສԁҎԼͷേۚ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͢͜ͱ ͭͬͨ͘ͷ ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ·ͱΊ
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ·ͱΊ • webαʔϏε࡞Γָ͍͠ʂʂʂ • webαʔϏεʢಛʹݸਓʣͷϋʔυϧ͕͔ͳΓ͘ͳͬͨ • ϢʔβʔूΊ͍͠ •
๏తͳॲཧͳͲɺௐͳ͖Ό͍͚ͳ͍͜ͱ͕ଟ͘ൈ͚ ࿙Ε͍͢͠
ʲwithruitʳ ߦ͖͍ͨॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε