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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
JavaScript 研修 (2026)
Avatar for Recruit recruitengineers
PRO
2
600
認知負荷をGemini で溶かす — GKE 基盤「Orbit」における AI エージェントの実践
Avatar for SansanTech sansantech
PRO
1
320
AIペネトレーションテスト・ セキュリティ検証「AgenticSec」紹介資料
Avatar for Sho Nakatani laysakura
2
9.1k
老害フォレンジッカーはAI羊の夢を見るか？
Avatar for tadmaddad tadmaddad
0
340
Software Supply Chain Attackからクラウド環境を守るためにできること
Avatar for LHazy lhazy
2
270
Data Hubグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
3.2k
侵入は突然に 〜 IoTマルウェアと悪用される家庭の機器 ～ / When Intrusion Strikes: IoT Malware and the Abuse of Home Devices
Avatar for NTT docomo Business nttcom
0
5.9k
その“隠したつもり”が命取り ── 自前と平文をやめて「正解」に委ねる
Avatar for kuroneko kuroneko13
0
130
Kiro Crew入門 - 常駐エージェントの仕組みと使いどころ / Intro to Kiro Crew
Avatar for Kazuki Adachi k_adachi_01
1
310
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
7
20k
AIのためのEthernet技術動向 (SerDes)
Avatar for Masayuki Kobayashi markunet
1
160
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
24
430k

Featured

See All Featured
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
460
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
270
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
340
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
7k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.4k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
790
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
250

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