$30 off During Our Annual Pro Sale. View details »

Nuxt.js + firebaseでハマったこと

Logy
August 26, 2020
Programming
0
6.5k

Nuxt.js + firebaseでハマったこと

フロントエンドLT会 vol.1 -2020夏祭り-

Logy

August 26, 2020
Tweet

More Decks by Logy

See All by Logy
WebAPI Usecase for my home
nologyance
0
300
変わりゆくAPI連携仕様との付き合い方 / Good practice of using API
nologyance
0
580
戦略的情報収集のすゝめ
nologyance
0
560
自己学習を支えるInoreader + Notionのその後
nologyance
0
630
自己学習を支える Inoreader + Notion
nologyance
3
13k

Other Decks in Programming

See All in Programming
Navigating the Streaming Landscape
dunithd
0
220
AWSDevDay Japan 2022 Amazon Neptune and Serverless
curanosuke
0
120
Writing Greener Java Applications
hollycummins
0
850
Ship Faster With Feature Flags
davidodari
0
150
Rust meets Mobile
smileykeith
0
180
OMO Package of App Unity
appunity
0
390
Modern Web Apps with Spring Boot & Angular
toedter
12
15k
はてなブログ作成から投稿までをGitHub Actionsで自動化する
myamashii
1
340
AWS発デザインシステム「Cloudscape」を使ってUI爆速開発
j_3woo86
1
110
やさしく入門するOAuth2.0/easy-entry-oauth
marchin1989
2
410
AWS AppSync を利用したアプリ開発チーム視点の API 開発
sugiyu1234
0
120
JSConf JP 2022 introduce React Query
maminami373
0
390

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
aleyda
4
3.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
A Modern Web Designer's Workflow
chriscoyier
690
180k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
3
480
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
The Power of CSS Pseudo Elements
geoffreycrofte
51
4.2k
Bash Introduction
62gerente
599
210k

Transcript

  1. Nuxt.js+firebaseͰϋϚͬͨ ͜ͱ ϑϩϯτΤϯυLTձ vol.1 -2020ՆࡇΓ- ଠా୓໵

  2. ࣗݾ঺հ • ଠా୓໵ • גࣜձࣾϥΫε • HRTechྖҬͷ੡඼։ൃ • Nuxt.js,Firebaseॳ৺ऀ,ॳLT 2

  3. ໨࣍ • Nuxt.js+firebaseΛ৮Ζ͏ͱࢥ͖͔͚ͬͨͬ • ϋϚͬͨ͜ͱᶃ currentUserೖͬͯͳ͍໰୊ • ϋϚͬͨ͜ͱᶄ ίϯιʔϧΤϥʔ஍ࠈ •

    ͓ΘΓʹ 3

  4. Nuxt.js+firebaseΛ৮Ζ͏ͱࢥͬͨ ͖͔͚ͬ 4

  5. Nuxt.js+firebaseΛ৮Ζ͏ͱࢥ͖͔͚ͬͨͬ • ϑϩϯτΤϯυྗͷఈ্͛ • ؆୯ͳTODOΞϓϦΛ࡞Δ • όοΫΤϯυ͸ۃྗؾʹͨ͘͠ͳ͍͚Ͳɺೝূػೳ͘Β͍͸࡞Γ͍ͨ - FirebaseΛ࢖͑͹޾ͤʹͳΕΔͱ͍͏ᷚΛࣖʹ͢Δ 5

  6. Firebase

  7. ϋϚͬͨ͜ͱᶃ currentUserೖͬͯͳ͍໰୊ 7

  8. currentUserೖͬͯͳ͍໰୊ • ΍Γ͔ͨͬͨ͜ͱ - ϢʔβʔͷϩάΠϯঢ়ଶΛνΣοΫ͔ͨͬͨ͠ - firebase.auth().currentUserΛ࢖͑͹ྑ͍Β͍͠ • ެࣜυΩϡϝϯτ௨Γʹ࣮૷ͯ͠ϩάΠϯͯ͠Έͯ΋ɺͳ͔ͥ firebase.auth().currentUser͕͍ͭ΋nullͰฦͬͯ͘Δ

    8

  9. currentUserೖͬͯͳ͍໰୊ • ಉ͡ηΫγϣϯͷ͙͢Լʹ஫ҙॻ͖Λൃݟ - authΦϒδΣΫτͷॳظԽ͕ऴΘ͍ͬͯͳ͍ͱnull͕ฦͬͯ͘Δ • ୅ΘΓʹobserverʢonAuthStateChangedϝιουʣΛ࢖͏͜ͱͰղܾ 9

  10. currentUserೖͬͯͳ͍໰୊ • ڭ܇ - ެࣜυΩϡϝϯτ͸ͪΌΜͱಡΈ·͠ΐ͏ 10

  11. ϋϚͬͨ͜ͱᶄ ίϯιʔϧΤϥʔ஍ࠈ 11

  12. ίϯιʔϧΤϥʔ஍ࠈ • ΍Γ͔ͨͬͨ͜ͱ - firebase authenticationͰϩάΠϯ͍ͯ͠ΔϢʔβʔ৘ใΛvuexͰอଘ͔ͨͬͨ͠ - onAuthStateChangedͷίʔϧόοΫͰऔಘͰ͖ΔUserΦϒδΣΫτΛ࢖͑͹ྑ ͍Β͍͠ -

    औಘͨ͠UserΦϒδΣΫτΛͦͷ··vuexʹ֨ೲ 12

  13. ίϯιʔϧΤϥʔ஍ࠈ • Chrome͕ݻ·Δ੎͍Ͱ૿͑ଓ͚ΔΤϥʔ… - Error: [vuex] Do not mutate vuex

    store state outside mutation handlers. • mutationϝιουܦ༝Ͱ͔͠࿔ͬͯͳ͍͸ͣͳͷʹͳͥ…ʁ 13

  14. ίϯιʔϧΤϥʔ஍ࠈ • ಉ͡ࣄ৅ʹ͍ͭͯॻ͔Εͨͱ͋ΔهࣄΛൃݟ - Firebase AuthenticationͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ • UserΦϒδΣΫτʹϦεφʔ΍Β͕ੜ͍͑ͯͯɺݟ͑ͳ͍ͱ͜Ζ͔Β มߋ͕Ճ͑ΒΕ͍ͯΔՄೳੑେ •

    Α͘Α͘ݟΔͱΤϥʔϝοηʔδ͸firebaseଆͷιʔε ʮauth.esm.jsʙʯ͔Βग़ྗ͞Ε͍ͯΔ༷ࢠ 14

  15. ίϯιʔϧΤϥʔ஍ࠈ • هࣄʹॻ͔Ε͍ͯͨΑ͏ʹɺҰ౓ผͷม਺ʹ֨ೲͯͦͪ͠ΒΛӬଓԽ ͢ΔΑ͏ʹ͢Δͱແࣄղܾ • ͦ΋ͦ΋UserΦϒδΣΫτશମΛӬଓԽ͢Δඞཁ΋ͳ͍ͷͰɺඞཁͳ ෼͚ͩ٧Ίସ͑Δͷ͕ྑ͛͞ 15

  16. ίϯιʔϧΤϥʔ஍ࠈ • ڭ܇ - Τϥʔϝοηʔδ͸ͪΌΜͱಡΈ·͠ΐ͏ 16

  17. ͓ΘΓʹ 17

  18. ͓ΘΓʹ • ׳Εͳ͍ٕज़Ͱ͋ͬͯ΋جຊʹཱͪฦΔʢެࣜυΩϡϝϯτΛಡΉɺ ΤϥʔϝοηʔδΛಡΉʣ͜ͱ͕τϥϒϧղফ΁ͷۙಓ • ଟগϋϚͬͨ΋ͷͷɺೝূػೳ͸͙͢ʹ࣮૷Ͱ͖ͨ - Nuxt.js + firebase࠷ߴʂ

    18

  19. ࢀߟ • kuntalog.hatenablog.jp/entry/2019/01/07/Firebase_Authentication ͱVuexͷ߹ΘٕͤόάͰϋϚͬͨ 19