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.9k
Nuxt.jsとFirebaseでリアルタイムチャットアプリを開発した話
Nuxt.jsとFirebaseでリアルタイムチャットアプリを開発した話
Takayuki
August 17, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
270
エンジニアのキャリア論
bumptakayuki
0
180
地方カンファレンス主催のススメ
bumptakayuki
1
200
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
640
沖縄観光、名物を一挙紹介!
bumptakayuki
2
640
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.6k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Programming
See All in Programming
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
700
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
690
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
220
エンジニア向け採用ピッチ資料
inusan
0
180
Team operations that are not burdened by SRE
kazatohiei
1
290
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
16
2.1k
NPOでのDevinの活用
codeforeveryone
0
700
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
460
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
100
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Statistics for Hackers
jakevdp
799
220k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Code Review Best Practice
trishagee
69
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Language of Interfaces
destraynor
158
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Gamification - CAS2011
davidbonilla
81
5.3k
The Cult of Friendly URLs
andyhume
79
6.5k
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