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.8k
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
460
WebAPI Usecase for my home
nologyance
0
590
変わりゆくAPI連携仕様との付き合い方 / Good practice of using API
nologyance
1
1.3k
戦略的情報収集のすゝめ
nologyance
0
780
自己学習を支えるInoreader + Notionのその後
nologyance
0
970
自己学習を支える Inoreader + Notion
nologyance
3
17k
Other Decks in Programming
See All in Programming
Discover Metal 4
rei315
2
130
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
480
技術同人誌をMCP Serverにしてみた
74th
1
630
Is Xcode slowly dying out in 2025?
uetyo
1
260
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
510
効率的な開発手段として VRTを活用する
ishkawa
0
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
630
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
430
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
230
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
120
Featured
See All Featured
Scaling GitHub
holman
459
140k
How GitHub (no longer) Works
holman
314
140k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Thoughts on Productivity
jonyablonski
69
4.7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Typedesign – Prime Four
hannesfritz
42
2.7k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Bash Introduction
62gerente
614
210k
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