Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt.jsとFirebaseでリアルタイムチャットアプリを開発した話
Search
Takayuki
August 17, 2019
Programming
0
2.7k
Nuxt.jsとFirebaseでリアルタイムチャットアプリを開発した話
Nuxt.jsとFirebaseでリアルタイムチャットアプリを開発した話
Takayuki
August 17, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
地方カンファレンス主催のススメ
bumptakayuki
1
110
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
360
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
380
沖縄観光、名物を一挙紹介!
bumptakayuki
2
400
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
1k
flutterでイベントアプリを作ってみた
bumptakayuki
0
91
オフショア開発の辛みと学んだ事
bumptakayuki
0
310
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
130
ChatGPTに記事を書かせてみた
bumptakayuki
1
200
Other Decks in Programming
See All in Programming
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
530
Site Reliability Engineering for GMO
pyama86
8
1k
Elm 0.19.0 Changes
bkuhlmann
0
490
Git Lint
bkuhlmann
4
750
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
今、知っておきたい! 生成AIエージェントの世界
elith
3
350
Code Reviews
bkuhlmann
4
890
VS Code をプロダクトにどう取り込むか
onomax
1
360
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
640
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
Featured
See All Featured
Unsuck your backbone
ammeep
663
57k
Designing with Data
zakiwarfel
96
4.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Designing for Performance
lara
601
67k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
Side Projects
sachag
451
41k
Navigating Team Friction
lara
178
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Transcript
Nuxt.jsͱFirebaseͰ ϦΞϧλΠϜνϟοτΞϓϦ ։ൃͨ͠
1 ࣗݾհɾ ձࣾհ Agenda 3 Firebase Realtime Databaseͱ 4 νϟοτͷ࡞Γํ
5 ࣮ɾσϓϩΠํ๏ 6 DEMO 7 ։ൃҊ݅Ͱͷಋೖࣄྫ 2 Firebaseͱ
1 ࣗݾհɾձࣾհ
4 ࣗݾհ ԭೄ ԭೄ͔Βདྷ·ͨ͠ʂ
5 ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹϑϦʔϥ
ϯεΛͬͨޙʹ201711݄ʹԭೄͰىۀɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ ઓ ◆Twitter @kanbo0605
Copyright Re:Build.inc All Rights Reserved. 1.ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 6໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ ΤϯδχΞืूதͰ͢ʂ
7 ։ൃνʔϜߏ Suzuki Takayuki ਖ਼ࣾһ (ि5ۈ) Kakazu Yuki (ਖ਼ࣾһ) Ϛωδϝϯτ&։ൃ
։ൃ ϑϦʔϥϯε (ि2ۈ) ϑϦʔϥϯε (ि2ۈ) ϑϦʔϥϯε (ि2ۈ) ϑϦʔϥϯε (ि1ۈ) ཁ݅ఆٛ UI/UX ਖ਼ࣾһ (ि5ۈ) ෭ۀ (ि1ۈ) ͜ͷϙδγϣϯΛ ͬͯ·͢ʂ
8 ࣗࣾWebαʔϏεͷ։ൃ ɾαʔϏε໊ Tadoru https://tadoru.work/ ɾγεςϜ֓ཁ ΤϯδχΞಛԽܕͷ ϦϑΝϥϧ Ϋϥυιʔγϯά
Re:Build اۀͷ୲ऀ͕ ΤʔδΣϯτΛબͿ ΤʔδΣϯτ͕ࣗͷܨ ͕Γͷ͋ΔΤϯδχΞ· ͨνʔϜʹΛ͔͚Δ ΤʔδΣϯτ ࣄલʹ৹੍ࠪ ϫʔΧʔ ΤʔδΣϯτ
اۀ ϏδωεϞσϧ ࠾༻ใु εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ εΩϧ ܦݧ Քಇঢ়گ ࣄΛհ͢Δ ˕ ̋ ̋ × ˕ ̋ × ̋ ̋
2 Firebaseͱ
11 Firebaseͱ https://www.topgate.co.jp/firebase01-what-is-firebase Firebase Google ͕ఏڙ͍ͯ͠ΔϞόΠϧ͓Αͼ Web ΞϓϦέʔ γϣϯͷόοΫΤϯυαʔϏεͰ͢ɻΫϥυαʔϏεͷܗଶͰ
BaaS ʹҐஔ͚͞Ε·͢ɻ Firebase Λ͏͜ͱͰɺ։ൃऀΞϓϦ έʔγϣϯͷ։ൃʹઐ೦Ͱ͖ɺόοΫΤϯυͰಈ͘αʔϏεΛ࡞͢ Δඞཁཧ͢Δඞཁ͋Γ·ͤΜɻ
1 2 BaaSͱ http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 BaaSʢBackend as a serviceʣͱɺϞόΠϧΞ ϓϦͷόοΫΤϯυػೳΛఏڙ͢ΔΫϥυαʔ ϏεͰ͢ɻ
- IaaS(Infrastructure as a Service) Amazon EC2,GMOΫϥυ,PublicχϑςΟΫϥ υ - PaaS(Platform as a Service) Heroku,OpenShift,DotCloudͳͲ ΦϯϓϨϛε ΞϓϦέʔγϣϯ ϑΝΠΞΥʔϧ σʔλ ωοτϫʔΫ OS ԾԽ ϋʔυΣΞ Iaas ΞϓϦέʔγϣϯ ϑΝΠΞΥʔϧ σʔλ ωοτϫʔΫ OS Paas ΞϓϦέʔγϣϯ ϑΝΠΞΥʔϧ σʔλ ωοτϫʔΫ Baas/MBaas ΞϓϦέʔγϣϯ σʔλ
1 3 Firebaseͷػೳ http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 BaaS ʹɺಠࣗͷϏδωεϩδοΫΛΈࠐΉ͜ͱͰ͖·ͤ ΜɻͦͷͨΊɺଟ͘ͷ BaaS ʹɺσʔλϕʔεػೳҎ֎ʹɺ SNS
࿈ܞ Android ɺ iOS ͷ SDK ͳͲ͕ఏڙ͞Ε͍ͯ·͢ɻ
1 4 Cloud Firestore http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 ɾNoSQLܕͷσʔλϕʔε ɾߴػೳͳΫΤϦॲཧ ɾϦΞϧλΠϜΞοϓσʔτ ɾΦϑϥΠϯॲཧ
1 5 Firebase Authentication http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 ɾগͳ͍ૢ࡞Ͱߴ࣭ͳೝূػೳ ɾೝূใΛར༻ͯ͠ɺ ɹɹଞϓϩμΫτͱͷ࿈ܞ͕Մೳ ɾϑΣσϨʔγϣϯIDϓϩόΠμ ɹͱͷ౷߹͕Մೳ
ɹྫɿTwitter,Facebook …etc
1 6 Realtime Database http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 Firebase ʹݩ͔Βؚ·Ε͍ͯΔΦϒδΣΫτܕ ͷσʔλϕʔεͰ͢ɻϦΞϧλΠϜͰΫϥΠΞ ϯτશମͷঢ়ଶΛಉظͤ͞Δ͜ͱ͕Ͱ͖ɺΦϑ ϥΠϯͰಈ࡞͢Δͱ͖σʔλΛΩϟογϡ͠
ͯΦϯϥΠϯʹͳͬͨ࣌ʹࣗಈతʹσʔλΛಉ ظ͠·͢ɻ
1 7 Google Cloud Functions for Firebase http://furandon-pig.hatenablog.com/entry/2014/06/04/215727 Cloud Functions
for Firebase Λ͏͜ͱͰɺΠ ϕϯτυϦϒϯͳΞϓϦέʔγϣϯΛ࡞͢Δ ͜ͱ͕Ͱ͖·͢ɻ SMS ϝοηʔδͷૹ৴ͳͲ ͷॲཧͷΑ͏ͳ֎෦αʔϏε࿈ܞͳͲΛߦ͏͜ ͱ͕ՄೳʹͳΓ·͢ɻ·ͨɺΫϥΠΞϯτΞϓ Ϧέʔγϣϯʹ࣮ͤ͞Δʹॏͨ͗͢ΔΑ͏ ͳॲཧΛ Cloud Functions for Firebase ʹҕͶ Δ͜ͱ͕Ͱ͖·͢ɻ
1 8 NoSQLσʔλϕʔε Id name email password 1 ླ suzuki@gm
ail.com xxxxxx 2 ాத tanaka@gm ail.com xxxxxx 3 ෦ yabe@gmail .com xxxxxx 4 େਿ osugi@gmai l.com xxxxxx ϦϨʔγϣφϧσʔλϕʔε NoSQL(ίϨΫγϣϯ/υΩϡϝϯτ) υΩϡϝϯτ ίϨΫγϣϯ
1 9 NoSQLσʔλϕʔε ίϨΫγϣϯ/υΩϡϝϯτ || σΟϨΫτϦπϦʔ (ϑΥϧμͱϑΝΠϧͱத)
2 0 NoSQLσʔλϕʔε
2 1 Firebaseͷར༻γʔϯ ɾWebΞϓϦͷҰ෦ͰϦΞϧλΠϜνϟοτΛಋೖ ɾWebΞϓϦͷೝূ෦͚ͩ͏ ɾωΠςΟϒΞϓϦͷσʔλϕʔεΘΓͱͯ͠͏ ͳͲ
3 Firebase Realtime Databaseͱ
2 3 Firebase Realtime Databaseͱ https://firebase.google.com/docs/database/?hl=ja NoSQL Ϋϥυ σʔλϕʔεͰσʔλͷอͱಉظΛߦ͏͜ͱ͕Ͱ ͖·͢ɻ
σʔλͯ͢ͷΫϥΠΞϯτʹΘͨͬͯϦΞϧλΠϜͰಉظ͞Εɺ ΞϓϦ͕ΦϑϥΠϯʹͳͬͯҾ͖ଓ͖༻Ͱ͖·͢ɻ ΫϥυϗετܕσʔλϕʔεͰ͢ɻ σʔλ JSON ͱͯ͠อଘ͞Εɺଓ͞Ε͍ͯΔͯ͢ͷΫϥΠΞϯ τͱϦΞϧλΠϜͰಉظ͞Ε·͢ɻ
2 4 Firebase Realtime Databaseͱ ֊ߏͰݟΕΔ
2 5 Firebase Realtime Databaseͱ
4 Firebase Hostingͱ
2 7 Firebase Hostingͱ https://firebase.google.com/docs/hosting/ Firebase Hosting ɺΣϒΞϓϦɺ੩తίϯςϯπɺಈతίϯςϯ π͚ͷߴͰ҆શੑͷߴ͍ϗεςΟϯάΛఏڙ͠·͢ɻ Firebase
Hosting σϕϩούʔ͚ͷɺຊ൪ڥϨϕϧͷΣϒ ί ϯςϯπ ϗεςΟϯάͰ͢ɻ
2 8 Firebase Hostingͱ https://firebase.google.com/docs/hosting/
5 ࣮ɾσϓϩΠํ๏
3 0 FirebaseͷηοτΞοϓ https://cr-vue.mio3io.com/tutorials/firebase.html ϓϩδΣΫτΛ࡞͢Δ ϓϩδΣΫτ໊Λೖྗͯ͠ɺ ຊϦʔδϣϯΛબ͢Δ
3 1 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ࠓճTwiterೝূΛબ
3 2 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html ίʔϧόοΫURLΛίϐʔ ͢Δ
3 3 FirebaseͷAuth(Twitterͷઃఆ) https://cr-vue.mio3io.com/tutorials/firebase.html Twitterͷ։ൃը໘ͰίʔϧόοΫ URLΛઃఆ͢Δ
3 4 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html $ npm install firebase import firebase
from ‘firebase' Ͱ ಡΈࠐΉ
3 5 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html Firebase ͷʮAuthenticationʯϖʔδͰ࣍ͷΑ͏ͳίʔυ͕දࣔ͞ΕΔͷͰɺషΓ͚Δ JSΛίϐʔ͢Δ
3 6 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html
3 7 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html main.js
3 8 Vue.jsͰFirebaseΛ͏ https://cr-vue.mio3io.com/tutorials/firebase.html App.vue
3 9 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
4 0 σϓϩΠ https://qiita.com/gupuru/items/25a6722f6f802d3a5250
6 DEMO
4 2 ߏ ϩάΠϯ Firebase Hosting Firebase Auth ϩάΠϯ RealTimeDB
ϝοηʔδΛૹ৴
4 3 DEMO https://myfirstfirebase-21fa3.firebaseapp.com/
7 ։ൃҊ݅Ͱͷಋೖࣄྫ
4 5 બఆٕͨ͠ज़ ▪ٕज़ཁ݅ ɾαʔόαΠυ PHP(Laravel5.8) ɾϑϩϯτΤϯυ JavaScript(Vue.js,Nuxt.js) ɾςετ PHPUnit,Cypress
ɾ੩తղੳ ESlint,PHPStan ɾΠϯϑϥ AWS(EC2,S3,RDS(mariadb)) ɾ։ൃڥ php7,nginx,mariadb,docker,webpack ɾͦͷଞ gitlab,gitlabCI(ࣗಈσϓϩΠͳ Ͳ),Slack,phpStorm
ϑϩϯτΤϯυ αʔόαΠυ શମߏ Gitlab CI ϥΠϒϥϦͳͲ Firebase ϥΠϒϥϦͳͲ
νϟοτػೳͷ࣮ݱํ๏Λٞ WebSocketɺϩϯάϙʔϦϯάɺFirebaseͷͲΕΛ͏͔ʁ ɾஅج४ - ࣮қ͕ͦ͜·Ͱߴ͘ͳ͍ɻ͋͘·Ͱεϐʔυॏࢹɻ - ϝϯςφϯείετ͕͍ɻ - ޙʑɺϝοηʔδͷจݴΛղੳͯ͠ੳ͢ΔՄೳੑ͋Γɻ -
࠾༻ͷϦʹͳΔΑ͏ͳٕज़ͩͱঘྑ͍ɻ
ٞͷ݁Ռ Firebaseʹܾఆʂʂ ɾબఆཧ༝ - αϯϓϧΛ࡞ͬͯΈͨ࣌ʹ͘Β͍Ͱ࣮Ͱ͖ͨɻ - ผҊ݅Ͱ࡞ͬͨϝοηʔδػೳ͕1ਓ݄΄Ͳ͔͚࣮͕ͯͨ͠ɺ όά͕ଟ͘ϝϯςφϯείετΛԼ͔͛ͨͬͨɻ - LaravelEcho(Websocket)ϩϯάϙʔϦϯάͰ
࣮ͨ͠Β͚ͬ͜͏͕͔͔Γͦ͏ͩͬͨɻ - ࠾༻ͷϦʹͳΓͦ͏ɻ
FirebaseͰͷݒ೦ - Firebase্ͷDatabaseͷແྉ͕1GB͔͠ͳ͍ҝɺ ελʔτΞοϓاۀͰ՝ۚ͞Ε·͘ΔͷΩπΠɻ - ίϨΫγϣϯؒͰ֎෦ΩʔΛ࣋ͨͤΒΕͳ͍ɻ - ݕࡧ݅ʹҰ෦ɺ੍ݶ͋Γɻ
FirebaseΛͬͨνϟοτػೳͷશମߏ(ఆ) ϩάΠϯ Token͕ฦ٫͞ΕΔ /message αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ tokenΛൃߦɻ νϟοτΛߦ͏ ϑϩϯτΤϯυ /login
ϒϥβ͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ ϦΞϧλΠϜͰϝοηʔδͷΓͱΓ ఆظతʹDBʹϝοηʔδσʔ λΛॻ͖ࠐΈʹ͍͘ eyJ0eXAiOiJKV1QiLCJhbGci OiJIUzI1NiJ9.eyJpc3MiOiJod HRwOlwvXC9sb2NhbGhvc3 RcL2FwaVwvdjFcL2xvZ2luIiw iaWF0IjoxNTQxMzk3NDAyLC JleHAiOjE1NDE0MDEwMDIs Im5iZiI6MTU0MTM5NzQwMi wianRpIjoiSGx1eUVXRU5Jc TdWRHZ6ZyIsInN1YiI6MSwi cHJ2IjoiMWFiMTVlMTVhNG NiODBjOWY3MTJkZTQ3OD ViMmIyMDk4ZGFlMjhjMyJ9. Qkbo7Mf4kMlTbWT- r4L6GhSUUlTUE7p7OHPdob FEXiI Tokenͷྫ { "users": { "user_01": { "user_id": 23, "company_id": 43 "rooms": ["room01", "room02"] }, }, "rooms": { "room01": { "last_message": "͜Μʹͪʂ", "created_at": datetime }, "room02": { ... } }, } αʔόαΠυ
ίϨΫγϣϯجຊతʹҰͭʹ·ͱΊͯɺ෦ͰϦϨʔγϣϯΛ࣋ͨͤΔ ίϨΫγϣϯͷJSONߏྫ FirebaseͷDatabaseྫ
ߏ LaravelଆͰ ϩάΠϯࡁΈ
ը໘Πϝʔδ
ը໘Πϝʔδ
ը໘Πϝʔδ ͜ͷ෦ VueComponent
ը໘Πϝʔδ
࣮ࡍɺӡ༻ͯ͠ΈͯͲ͏͔ͩͬͨʁ - LaravelଆͰϩάΠϯͯ͠ɺFirebaseଆͰϩάΠϯ͢Δͱ͍͏ গ͠ෳࡶͳ࣮ʹͳͬͨɻ - Componentͱͯ͠Γग़֤ͯ͠ը໘ʹ࣮Ͱ͖Δͷศར - ࢥͬͨΑΓόά͕ଟ͍ - ϢʔβλΠϓ͕̏छྨ͋ͬͯɺϝοηʔδͰ͖ΔਓͷϑΟϧ
λϦϯάͳͲ্͕ख͍ͬͯ͘ͳ͍ࣄ͕͋Δɻ
5 8 ࠂ 10/12 PHPΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂ https://phpcon.okinawa.jp