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
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
Red Hat OpenStack Services on OpenShift
Avatar for Tatsuya Amemiya tamemiya
0
130
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
10k
ランサムウェア対策としてのpnpm導入のススメ
Avatar for Satoru Ishikawa ishikawa_satoru
0
220
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
Avatar for nihonbuson nihonbuson
PRO
2
330
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
2
400
2026年、サーバーレスの現在地 -「制約と戦う技術」から「当たり前の実行基盤」へ- /serverless2026
Avatar for Serverless Operations slsops
2
260
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.2k
日本の85%が使う公共SaaSは、どう育ったのか
Avatar for たけだ taketakekaho
1
240
FinTech SREのAWSサービス活用/Leveraging AWS Services in FinTech SRE
Avatar for maaaato maaaato
0
130
SREじゃなかった僕らがenablingを通じて「SRE実践者」になるまでのリアル / SRE Kaigi 2026
Avatar for AEON aeonpeople
6
2.5k
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
360
1,000 にも届く AWS Organizations 組織のポリシー運用をちゃんとしたい、という話
Avatar for kazzpapa3 kazzpapa3
0
140

Featured

See All Featured
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
55
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
0
350
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.7k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
290
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k

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