Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxtとfirebaseでwebサービスをつくってみた

Avatar for yusuke_yamashita yusuke_yamashita
May 21, 2019
Technology
0
290

 Nuxtとfirebaseでwebサービスをつくってみた

Nuxtとfirebaseを使ったwebサービスを個人で開発してみました。
その際の内容に関して、LTとして登壇した際の資料をアップしておきます。

Avatar for yusuke_yamashita

yusuke_yamashita

May 21, 2019
Tweet

More Decks by yusuke_yamashita

See All by yusuke_yamashita
NuxtとFirebaseでSSRのWebアプリを作ってみた
Avatar for yusuke_yamashita hand12_k
6
1.3k

Other Decks in Technology

See All in Technology
隙間ツール開発のすすめ / PHP Conference Fukuoka 2025
Avatar for meihei meihei3
0
180
日本のソブリンAIを支えるエヌビディアの生成AIエコシステム
Avatar for Murakami Mana acceleratedmu3n
0
130
こんな時代だからこそ！ 想定しておきたい アクセスキー漏洩後のムーブ
Avatar for Takuya Yonezawa takuyay0ne
3
340
LLM APIを2年間本番運用して苦労した話
Avatar for 株式会社IVRy（社員登壇資料） ivry_presentationmaterials
11
10k
AIエージェントを導入する [ 社内ナレッジ活用編 ] / Implement AI agents
Avatar for Akira Maeda glidenote
1
270
QAEが生成AIと越える、ソフトウェア開発の境界線
Avatar for Masaya Hayashi rinchsan
0
760
從裝潢設計圖到 Home Assistant：打造智慧家庭的實戰與踩坑筆記
Avatar for Kewang kewang
0
140
Snowflake Marketplaceには”PODB”という便利なオープンデータがあってAI Ready対応してるらしいよ/the-snowflake-marketplace-has-a-useful-open-data-source-called-PODB-that-is-apparently-AI-ready
Avatar for shinyaa31 shinyaa31
0
220
InsightX 会社説明資料/ Company deck
Avatar for InsightX insightx
0
210
CLIPでマルチモーダル画像検索 →とても良い
Avatar for Motoi Washida wm3
3
820
コミュニティと共に変化する 私とFusicの8年間
Avatar for MasayaYoshino ayasamind
0
320
CloudComposerによる大規模ETL 「制御と実行の分離」の実践
Avatar for Tech Leverages leveragestech
0
190

Featured

See All Featured
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
269
13k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
359
30k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
2
290
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k

Transcript

  1. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε NuxtͱfirebaseΛ࢖ͬͯ webαʔϏεΛ࡞ͬͯΈͨ גࣜձࣾLivesense ࢁԼ ༔հ / @hand12_k

  2. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࿩͢͜ͱ ͭͬͨ͘΋ͷ ࢖ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά

  3. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࿩͢͜ͱ ͭͬͨ͘΋ͷ ࢖ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ͭͬͨ͘΋ͷ

  4. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε https://withruit.com

  5. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε https://withruit.com

  6. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͭͬͨ͘΋ͷ ߦ͖͍ͨ৔ॴʹରͯ͠ͷಉߦऀΛืू͢ΔαʔϏε

  7. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͭͬͨ͘΋ͷ ϥΠϒʹҰॹʹདྷ ͯ͘ΕΔਓେืूʂ ҰਓͰߦ͖ͮΒ͍ɺʓʓ ͷϥΠϒʹҰॹʹདྷͯ͘ Ami Watanabe Tick

    Ticket ࣗ෼͕ߦ͖͍ͨ৔ॴΛ౤ߘ

  8. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ͭͬͨ͘΋ͷ ࣗ෼͕ߦ͖͍ͨͱࢥͬͨϓϥϯʹϦΫΤετΛૹΔ ϥΠϒʹҰॹʹདྷ ͯ͘ΕΔਓେืूʂ ҰਓͰߦ͖ͮΒ͍ɺʓʓ ͷϥΠϒʹҰॹʹདྷͯ͘ Ami Watanabe

    ϦΫΤετΛૹΔ

  9. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ػೳҰཡ • ϩάΠϯػೳ • ౤ߘػೳ • ίϝϯτػೳ •

    νϟοτػೳ • Ԡืػೳ • ը૾Ξοϓϩʔυػೳ • ͓໰͍߹Θͤػೳ • ϝʔϧ௨஌ػೳ ͭͬͨ͘΋ͷ • OGPλάߋ৽

  10. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࿩͢͜ͱ ͭͬͨ͘΋ͷ ࢖ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ࢖ٕͬͨज़

  11. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࢖ٕͬͨज़

  12. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Vue ΞϓϦέʔγϣϯΛ࡞੒͢ΔϑϨʔϜϫʔΫ αʔόʔαΠυͱΫϥΠΞϯταΠυͷUIϨϯμϦϯά ʹؔ͢ΔػೳΛओʹఏڙ͍ͯ͠Δ Nuxt ࢖ٕͬͨज़

  13. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε • Vue ϑΝΠϧͰهड़Ͱ͖Δ͜ͱʢ*.vueʣ • αʔόʔαΠυϨϯμϦϯά • ੩తϑΝΠϧͷ഑৴ •

    ES6/ES7 ͷτϥϯεύΠϨʔγϣϯ • <head> ཁૉʢ<title>ɺ<meta> ͳͲʣͷ؅ཧ • ։ൃϞʔυʹ͓͚ΔϗοτϦϩʔσΟϯά • ϓϦϓϩηοα: Sass, Less, Stylus ͳͲ Nuxt ࢖ٕͬͨज़

  14. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Vue ࢖ٕͬͨज़ <template> <h1 class=“title”> {{ text }}

    </h1> </template> <script> data() { return { text: “Hello World” } } </script> <style> .title { color: Red; } </style> Hello World • ίϯϙʔωϯτ୯ҐͰ ϑΝΠϧΛ෼ׂ • ֎෦ʹӨڹ͠ͳ͍CSS Λهड़Մೳ

  15. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Google͕ఏڙ͍ͯ͠ΔΫϥ΢υαʔϏε αʔόʔ΍σʔλϕʔεͳͲͷΠϯϑϥपΓػೳ͔Βɺ Ϣʔβʔೝূ΍ϝοηʔδͳͲόοΫΤϯυͷػೳΛఏ ڙ͍ͯ͠Δ firebase ࢖ٕͬͨज़

  16. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࢖ٕͬͨज़ firebase

  17. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ػೳҰཡ • ϩάΠϯػೳ • ౤ߘػೳ • ίϝϯτػೳ •

    νϟοτػೳ • Ԡืػೳ • ը૾Ξοϓϩʔυػೳ • ͓໰͍߹Θͤػೳ • ϝʔϧ௨஌ػೳ ͭͬͨ͘΋ͷ • OGPλάߋ৽

  18. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ػೳҰཡ • ϩάΠϯػೳ • ౤ߘػೳ • ίϝϯτػೳ •

    νϟοτػೳ • Ԡืػೳ • ը૾Ξοϓϩʔυػೳ • ͓໰͍߹Θͤػೳ • ϝʔϧ௨஌ػೳ ͭͬͨ͘΋ͷ • OGPλάߋ৽ Authentication Realtime Database Realtime Database Realtime Database Realtime Database Realtime Database Cloud Functions Cloud Storage Cloud Functions

  19. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Authentication ࢖ٕͬͨज़ • firebase͕ఏڙ͍ͯ͠ΔϩάΠϯػೳ • Ϣʔβͷ৽نొ࿥΍ϩάΠϯ؅ཧͷػೳΛఏ ڙ͍ͯ͠Δ •

    facebook, googleೝূͷػೳ΋ఏڙ͞Ε͓ͯΓɺ token؅ཧͳͲͷػೳ΋SDKͰ༻ҙ͞Ε͍ͯΔ

  20. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Authentication ࢖ٕͬͨज़

  21. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Realtime Database ࢖ٕͬͨज़ • ϦΞϧλΠϜʹσʔλΛอଘɾಉظͰ͖ΔΫ ϥ΢υϗετܕͷNoSQLܗࣜσʔλϕʔε • ΦϑϥΠϯʹͳͬͯ΋ɺϩʔΧϧʹσʔλΛ

    อ࣋͠ɺΦϯϥΠϯʹͳͬͨλΠϛϯάͰಉ ظ։࢝

  22. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Cloud Storage ࢖ٕͬͨज़ • Ϣʔβʔ͕Ξοϓϩʔυͨ͠ը૾΍ಈըͳͲ ͷίϯςϯπΛอଘ͢Δ͜ͱ͕Ͱ͖ΔετϨʔ δαʔϏε

  23. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε Cloud Functions ࢖ٕͬͨज़ • Node.jsͷؔ਺Λ࣮ߦͰ͖Δػೳ • firebase಺ͷ༷ʑͳΠϕϯτΛτϦΨʔʹɺؔ ਺Λ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ

    • Authentication • Realtime Database • Cloud Storage • …

  24. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࢖ٕͬͨज़ ϩάΠϯ facebookೝূ Authentication Ϣʔβ৘ใͷอଘॲཧ Cloud Functions Ϣʔβ৘ใͷอଘ

    Realtime DB ౤ߘ ਃ͠ࠐΈ ౤ߘσʔλͷอଘ Realtime DB ը૾Ξοϓϩʔυ Cloud Storage ϝʔϧૹ৴ Cloud Functions ਃ͠ࠐΈ৘ใΛอଘ Realtime DB

  25. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࢖ٕͬͨज़ ௨஌ OGPλάߋ৽ OGPλάΛੜ੒͠HTMLΛฦ͢ Cloud Functions ͓໰͍߹Θͤ ϦΫΤετΛFunctionsʹྲྀ͢

    Hosting Slack΁ͷ௨஌ Cloud Functions ͓໰͍߹Θͤσʔλͷอଘ Realtime DB มߋΛݕ஌͠௨஌ॲཧΛߦ͏ Cloud Functions ର৅ͷσʔλ͕อଘ Realtime DB

  26. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࿩͢͜ͱ ͭͬͨ͘΋ͷ ࢖ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ϚʔέςΟϯά

  27. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά • ͔ͤͬ͘࡞ΔͷͰ͋Ε͹ɺͨ͘͞Μͷਓʹ࢖ͬͯ΋Β͍͍ͨ • ͋ΘΑ͘͹ɺΞϑΣϦΤΠτͰऩӹ͍ͩͨ͠ • λʔήοτϢʔβʔΛ໌֬ʹ͠ɺࢗ͞Δૌٻจ͕ඞཁ •

    ϦϦʔε࣌఺ͰɺҰఆ਺ͷ౤ߘσʔλ͕ඞཁ

  28. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά

  29. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά ॳظϢʔβͱͯ͠ɺ20݅౤ߘσʔλΛ֫ಘ

  30. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά

  31. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ϚʔέςΟϯά 6ϲ݄ҎԼͷ௄໾ຢ͸ 100ສԁҎԼͷേۚ

  32. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ࿩͢͜ͱ ͭͬͨ͘΋ͷ ࢖ٕͬͨज़ ·ͱΊ ϚʔέςΟϯά ·ͱΊ

  33. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε ·ͱΊ • webαʔϏε࡞Γ͸ָ͍͠ʂʂʂ • webαʔϏεʢಛʹݸਓʣͷϋʔυϧ͕͔ͳΓ௿͘ͳͬͨ • ϢʔβʔूΊ೉͍͠ •

    ๏຿తͳॲཧͳͲɺௐ΂ͳ͖Ό͍͚ͳ͍͜ͱ͕ଟ͘ൈ͚ ࿙Ε΋͠΍͍͢

  34. ʲwithruitʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε