フロントエンドLT会 vol.1 -2020夏祭り-
Nuxt.js+firebaseͰϋϚͬͨ͜ͱϑϩϯτΤϯυLTձ vol.1 -2020ՆࡇΓ-ଠా
View Slide
ࣗݾհ• ଠా• גࣜձࣾϥΫε• HRTechྖҬͷ։ൃ• Nuxt.js,Firebaseॳ৺ऀ,ॳLT2
࣍• 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 mutationhandlers.• 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