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
290
0

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

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

Avatar for yusuke_yamashita

yusuke_yamashita

May 21, 2019

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
Databricks 月刊サービスアップデート 2026年05月号
Avatar for ちょし tyosi1212
0
210
Agentic ERPをどう設計するか ー 受発注エージェントを動かす、現場の知見と設計思想ー
Avatar for 株式会社リチェルカ recerqainc
1
1.7k
製造業のクラウド活用最適解〜AI，DXを加速するデータ基盤の作り方〜
Avatar for 濱田孝治 hamadakoji
0
400
10倍の生産性を実現するAI駆動並列エージェントのすべて
Avatar for 熊井悠 kumaiu
4
800
運用を見据えたAIエージェント設計実践
Avatar for amacbee amacbee
1
3.1k
AI-DLCを活用した高品質・安全なAI駆動開発実践 / AI Driven Development
Avatar for 吉田真吾 yoshidashingo
1
380
「コーディング」しない人のための Claude Code 入門　ChatGPT の次の一歩 — 業務に組み込む 育成・共有・自動化
Avatar for ふくだ（fukuda ryu） rfdnxbro
2
1.2k
AgentGatewayを試してみたかった
Avatar for t-kikuchi tkikuchi
0
110
Diagnosing performance problems without the guesswork
Avatar for Elena Tanasoiu elenatanasoiu
0
170
Djangoユーザが知っ得なPostgreSQL機能 - 設計の選択肢を増やす / Djang-use-PostgreSQL
Avatar for soudai sone soudai
PRO
0
200
GoとSIMDとWasmの今。
Avatar for asuka askua
3
510
Terraformモジュールは、なぜ「魔境」化するのか
Avatar for hayama hayama17
1
200

Featured

See All Featured
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
240
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
1.4k
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
160
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
380
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
Avatar for Ines Montani inesmontani
PRO
0
400
Darren the Foodie - Storyboard
Avatar for Kevinho.art khoart
PRO
3
3.4k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
220
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
220
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
2
1.5k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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ʳ ߦ͖͍ͨ৔ॴʹɺҰॹʹߦ͘૬ख͕ݟ͔ͭΔαʔϏε