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.9k
Nuxt.js + firebaseでハマったこと
フロントエンドLT会 vol.1 -2020夏祭り-
Logy
August 26, 2020
Tweet
Share
More Decks by Logy
See All by Logy
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
630
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
500
WebAPI Usecase for my home
nologyance
0
600
変わりゆくAPI連携仕様との付き合い方 / Good practice of using API
nologyance
1
1.3k
戦略的情報収集のすゝめ
nologyance
0
790
自己学習を支えるInoreader + Notionのその後
nologyance
0
990
自己学習を支える Inoreader + Notion
nologyance
3
17k
Other Decks in Programming
See All in Programming
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
480
Learn CPU architecture with Assembly
akkeylab
1
1.3k
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
1
420
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
310
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
220
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
880
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.5k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
880
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Documentation Writing (for coders)
carmenintech
75
5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
The Language of Interfaces
destraynor
162
25k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Making Projects Easy
brettharned
118
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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