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
Logy
August 26, 2020
Programming
0
7.5k
Nuxt.js + firebaseでハマったこと
フロントエンドLT会 vol.1 -2020夏祭り-
Logy
August 26, 2020
Tweet
Share
More Decks by Logy
See All by Logy
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
260
WebAPI Usecase for my home
nologyance
0
500
変わりゆくAPI連携仕様との付き合い方 / Good practice of using API
nologyance
1
1.1k
戦略的情報収集のすゝめ
nologyance
0
720
自己学習を支えるInoreader + Notionのその後
nologyance
0
860
自己学習を支える Inoreader + Notion
nologyance
3
16k
Other Decks in Programming
See All in Programming
A New Era of Testing
mannodermaus
2
490
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
140
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
760
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
970
Developer Joy == Developer Productivity (really!)
hollycummins
1
180
GoのIteratorに詳しくなってしまう
inatonix
1
200
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
100
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
150
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
330
Architecture Decision Record (ADR)
nearme_tech
PRO
1
680
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Building Adaptive Systems
keathley
36
2.1k
Ruby is Unlike a Banana
tanoku
96
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
BBQ
matthewcrist
83
9.2k
A Tale of Four Properties
chriscoyier
155
22k
Why Our Code Smells
bkeepers
PRO
334
56k
Rails Girls Zürich Keynote
gr2m
93
13k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
Scaling GitHub
holman
458
140k
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Automating Front-end Workflow
addyosmani
1365
200k
Transcript
Nuxt.js+firebaseͰϋϚͬͨ ͜ͱ ϑϩϯτΤϯυLTձ vol.1 -2020ՆࡇΓ- ଠా
ࣗݾհ • ଠా • גࣜձࣾϥΫε • HRTechྖҬͷ։ൃ • Nuxt.js,Firebaseॳ৺ऀ,ॳLT 2
࣍ • Nuxt.js+firebaseΛ৮Ζ͏ͱࢥ͖͔͚ͬͨͬ • ϋϚͬͨ͜ͱᶃ currentUserೖͬͯͳ͍ • ϋϚͬͨ͜ͱᶄ ίϯιʔϧΤϥʔࠈ •
͓ΘΓʹ 3
Nuxt.js+firebaseΛ৮Ζ͏ͱࢥͬͨ ͖͔͚ͬ 4
Nuxt.js+firebaseΛ৮Ζ͏ͱࢥ͖͔͚ͬͨͬ • ϑϩϯτΤϯυྗͷఈ্͛ • ؆୯ͳTODOΞϓϦΛ࡞Δ • όοΫΤϯυۃྗؾʹͨ͘͠ͳ͍͚Ͳɺೝূػೳ͘Β͍࡞Γ͍ͨ - FirebaseΛ͑ͤʹͳΕΔͱ͍͏ᷚΛࣖʹ͢Δ 5
Firebase
ϋϚͬͨ͜ͱᶃ currentUserೖͬͯͳ͍ 7
currentUserೖͬͯͳ͍ • Γ͔ͨͬͨ͜ͱ - ϢʔβʔͷϩάΠϯঢ়ଶΛνΣοΫ͔ͨͬͨ͠ - firebase.auth().currentUserΛ͑ྑ͍Β͍͠ • ެࣜυΩϡϝϯτ௨Γʹ࣮ͯ͠ϩάΠϯͯ͠Έͯɺͳ͔ͥ firebase.auth().currentUser͕͍ͭnullͰฦͬͯ͘Δ
8
currentUserೖͬͯͳ͍ • ಉ͡ηΫγϣϯͷ͙͢Լʹҙॻ͖Λൃݟ - authΦϒδΣΫτͷॳظԽ͕ऴΘ͍ͬͯͳ͍ͱnull͕ฦͬͯ͘Δ • ΘΓʹobserverʢonAuthStateChangedϝιουʣΛ͏͜ͱͰղܾ 9
currentUserೖͬͯͳ͍ • ڭ܇ - ެࣜυΩϡϝϯτͪΌΜͱಡΈ·͠ΐ͏ 10
ϋϚͬͨ͜ͱᶄ ίϯιʔϧΤϥʔࠈ 11
ίϯιʔϧΤϥʔࠈ • Γ͔ͨͬͨ͜ͱ - firebase authenticationͰϩάΠϯ͍ͯ͠ΔϢʔβʔใΛvuexͰอଘ͔ͨͬͨ͠ - onAuthStateChangedͷίʔϧόοΫͰऔಘͰ͖ΔUserΦϒδΣΫτΛ͑ྑ ͍Β͍͠ -
औಘͨ͠UserΦϒδΣΫτΛͦͷ··vuexʹ֨ೲ 12
ίϯιʔϧΤϥʔࠈ • Chrome͕ݻ·Δ͍Ͱ૿͑ଓ͚ΔΤϥʔ… - Error: [vuex] Do not mutate vuex
store state outside mutation handlers. • mutationϝιουܦ༝Ͱ͔͠࿔ͬͯͳ͍ͣͳͷʹͳͥ…ʁ 13
ίϯιʔϧΤϥʔࠈ • ಉ͡ࣄʹ͍ͭͯॻ͔Εͨͱ͋ΔهࣄΛൃݟ - Firebase AuthenticationͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ • UserΦϒδΣΫτʹϦεφʔΒ͕ੜ͍͑ͯͯɺݟ͑ͳ͍ͱ͜Ζ͔Β มߋ͕Ճ͑ΒΕ͍ͯΔՄೳੑେ •
Α͘Α͘ݟΔͱΤϥʔϝοηʔδfirebaseଆͷιʔε ʮauth.esm.jsʙʯ͔Βग़ྗ͞Ε͍ͯΔ༷ࢠ 14
ίϯιʔϧΤϥʔࠈ • هࣄʹॻ͔Ε͍ͯͨΑ͏ʹɺҰผͷมʹ֨ೲͯͦͪ͠ΒΛӬଓԽ ͢ΔΑ͏ʹ͢Δͱແࣄղܾ • ͦͦUserΦϒδΣΫτશମΛӬଓԽ͢Δඞཁͳ͍ͷͰɺඞཁͳ ͚ͩ٧Ίସ͑Δͷ͕ྑ͛͞ 15
ίϯιʔϧΤϥʔࠈ • ڭ܇ - ΤϥʔϝοηʔδͪΌΜͱಡΈ·͠ΐ͏ 16
͓ΘΓʹ 17
͓ΘΓʹ • ׳Εͳ͍ٕज़Ͱ͋ͬͯجຊʹཱͪฦΔʢެࣜυΩϡϝϯτΛಡΉɺ ΤϥʔϝοηʔδΛಡΉʣ͜ͱ͕τϥϒϧղফͷۙಓ • ଟগϋϚͬͨͷͷɺೝূػೳ͙͢ʹ࣮Ͱ͖ͨ - Nuxt.js + firebase࠷ߴʂ
18
ࢀߟ • kuntalog.hatenablog.jp/entry/2019/01/07/Firebase_Authentication ͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ 19