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

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

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