Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Yu Watanabe
December 03, 2019
Technology
1.4k
4
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
バックエンドをFirebaseにし、アプリをReact Nativeで作ると通常作るよりも簡単にできるのかについての発表となります。
Yu Watanabe
December 03, 2019
More Decks by Yu Watanabe
See All by Yu Watanabe
依存ライブラリを薄くするために車輪を再開発してもいいんだよ🛞
watanabeyu
0
170
Bolt 🤝 Expo
watanabeyu
0
450
npm packageとリリースとモノレポ
watanabeyu
0
95
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
1k
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.2k
gandhの紹介です
watanabeyu
0
58
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
730
react-native-unimodulesのススメ
watanabeyu
1
6.8k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.2k
Other Decks in Technology
See All in Technology
What Is JetBrains Air
x5gtrn
PRO
0
140
生成AI時代、PMは事業責任者に進化するともっと面白い〜PMだからこそ事業構造を動かせる時代に〜
kakehashi
PRO
0
280
Optunaの最新リリースv5.0について
pfn
PRO
0
140
LLM Content Moderationを支える評価・改善ループの実践
suikabar
2
300
20261017福岡devIO 「AIは"良いダッシュボード"を作れるか?
jtakeda
0
240
アカウント統制の健康診断
kenichinakamura
1
120
野良MCPサーバーを排除せよ!MCPサーバーのガバナンス
yukiogawa
1
150
Browser Spec: Testing Hotwire with Ruby
takahashim
1
160
[JAWS-UG彩の国埼玉#12]そろそろ準備する?re:Invent2026をやさしく解説 / reinvent2026-sainokuni
sh_fk2
1
390
freeeにおけるSoftware Factory
freee
PRO
0
280
Claude Code on Bedrock で統制をかける小ネタ集/claude-code-bedrock-governance-tips
emiki
1
160
ガチで放置できるClaude Code実行環境の作り方.pdf
lamaglama39
1
5.4k
Featured
See All Featured
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.5k
brightonSEO & MeasureFest 2025 - Winning Strategies for Black Friday CRO & PPC - Christian Goodrich
cargoodrich
3
870
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
400
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.5k
How to Ace a Technical Interview
jacobian
280
24k
Balancing Empowerment & Direction
lara
6
1.3k
How to Talk to Developers About Accessibility
jct
2
590
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.2k
Bootstrapping a Software Product
garrettdimon
PRO
306
120k
Code Reviewing Like a Champion
maltzj
529
40k
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
Darren the Foodie - Storyboard
khoart
PRO
4
4k
Transcript
2019/12/03 ΘͨͳΏ͏ FIREBASEΦϯϦʔ + REACT NATIVEͰ ΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ
▸ ࣗݾհ ▸ ؆୯ʹͳͬͨͳͱײͨ͡෦ ▸ ਏ͔ͬͨ෦ ▸ ͨ͠෦ ▸ Ͳ͏͍͏ΞϓϦʹ͍ͯΔ͔
▸ ·ͱΊ ֓ཁ
ࣗݾհ(1) ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
ࣗݾհ(2) ▸ https://www.gandh.jp ▸ 5໊(ΤϯδχΞ2ਓ)Ͱฏۉྸ30ͪΐ͍ͷձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸
ࠓ࡞͍ͬͯΔࣄۀ ▸ ετϦʔτμϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + firebase + TypeScript
FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͍͖ͳΓ͚ͩͲ݁ ͍ͩͿ؆୯ʹͳͬͨؾ͕͢Δ
Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(1) ʙೝূ෦ʙ ▸ AuthenticationΛ͏͜ͱͰϢʔβ෦Λ·Δ·ΔεΩοϓ ▸ ϝʔϧΞυϨε֬ೝػೳ ▸ ύεϫʔυมߋػೳ ▸ ࣗಈૹ৴ϝʔϧΛݴޠ͝ͱʹมߋՄೳ
Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(2) ʙσʔλ෦ʙ ▸ Firestore͔ΒσʔλΛऔಘ ▸ ϧʔϧͷมͱͯ͠authͳͲ͑ΔͷͰ੍ݶ͕؆୯ ▸ FirestoreΛτϦΨʔͱͯ͠FunctionsΛىಈͤͯ͞ͷσʔλཧ ▸ ΞϓϦweb΄΅΄΅ڞ௨Ͱσʔλऔಘ༻͕ؔॻ͚Δ
Ͳ͕͜؆୯ʹͳͬͨͷ͔ʁ(3) ʙͦͷଞʙ ▸ όοΫΤϯυΛ༻͍Δඞཁ͕ͳ͔ͬͨ ▸ ཧը໘͕ॆ࣮͍ͯ͠ΔͳͲͳͲ
FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͱ͍͑Ͳਏ͍෦͋Γ
Ͳ͕͜ਏ͔ͬͨͷ͔ʁ ▸ AuthenticationͰ࣋ͯΔใݶΒΕΔ ▸ id,email,displayName, photoUrl,emailVerified,֤छϓϩύΠμ ▸ FirestoreʹσʔλΛͦͷ··ೖΕΔ͜ͱ͕Ͱ͖ΔͷͰɺ ϑϩϯτଆͷόϦσʔγϣϯΛ͔ͬ͠Γͱ͠ͳ͍ͱ͍͚ͳ͍ ▸
ϧʔϧΛશһ͕ͪΌΜͱѲ͍ͯ͠Δ͔ ▸ Firestore͋͘·ͰNoSQLతͳ෦ྨͳͷͰݕࡧڧ͘ͳ͍ ▸ ίϨΫγϣϯ͕૿͑ΔͱτϦΨʔͷѲ͕໘ʹ ▸ ίϨΫγϣϯ͕૿͑Δͱ͍Δͷ͔͍Βͳ͍ͷ͔͕͘͠ͳΔ ▸ ෳϦϙδτϦʹލͬͨ߹ͷFunctionsͷཧํ๏ ▸ ͳͲͳͲ…
FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͜͏͍͏Λ͠·ͨ͠
Ͳ͏͍͏Λ͔ͨ͠ʁ(1) ▸ TypeScriptͰFirestoreͷίϨΫγϣϯͷܕΛͪΌΜͱཧ ▸ ݕࡧ݁ՌΛ͋Β͔͡Ίอଘ͓ͯ͘͠ ▸ HIPHOPʹؔ͢ΔϨοεϯΛอଘ͓ͯ͘͠υΩϡϝϯτΛ༻ҙͳͲ ▸ NoSQLͱ͍͏͜ͱΛ಄ʹೖΕͯίϨΫγϣϯͳͲΛ࡞ ▸
τϦΨʔͳͲؔ࿈ੑΛͪΌΜͱਤʹॻ͍ͯѲ
Ͳ͏͍͏Λ͔ͨ͠ʁ(2) ▸ AdminͰ͍͍ͨɺΞϓϦͰ͍͍ͨɺ WebͰ͍͍ͨΑ͏ͳ FunctionsͦΕͧΕͷϦϙδτϦʹׂͯ͠ཧ ▸ exports͢ΔؔΛΦϒδΣΫτʹ͢Δ $ firebase deploy
--only functions:admin exports.admin = { func1: require(“./func1”), func2: require(“./func2”), };
FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ͜͏͍ͬͨΞϓϦͩͱ࠾༻͠ͳ͔͔ͬͨ
͜͏͍͏ΞϓϦͩͱ࠾༻͠ͳ͔͔ͬͨ ▸ SNSͷΑ͏ͳϦϨʔγϣϯ͕ෳࡶʹབྷΈ߹͏Α͏ͳαʔϏε ▸ firestorefunctions͕ೖΓཚΕͯ͠·͏ͨΊ ▸ ݕࡧ͕݅ෳࡶͩͬͨΓ͢ΔΑ͏ͳαʔϏε ▸ ෳ߹ΠϯσοΫεશจݕࡧͷͨΊʹalgoliaಋೖͳͲ͕໘ ▸
ήʔϜͷΑ͏ͳεϐʔυΛॏཁࢹ͍ͨ͠αʔϏε ▸ τϥϯβΫγϣϯॻ͖ࠐΈ͕ωοΫͱͳΔͷͰ ͖ෆ͖͕͋ΔͷͰཁҙ
FIREBASEΦϯϦʔ + REACT NATIVEͰΞϓϦΛ࡞ΔͱՌͨͯ͠؆୯ʹͳΔͷ͔ʁ ·ͱΊ
·ͱΊ ▸ ඇSNSΞϓϦͰ؆୯ʹͳΔͷͰ͓͢͢Ί ▸ ୯७ʹίϨΫγϣϯ͔Βऔಘ͢ΔΑΓɺ ݕࡧ݁ՌΛ·ͱΊͨυΩϡϝϯτΛ༻ҙ͓ͯ͘͠ͱΤίͰָ ▸ τϦΨʔىಈͷFunctionsͳͲ͕େྔʹઃஔ͞ΕΔՄೳੑ͕ߴ͍ͷͰɺ ͔ͬ͠ΓͱؔੑΛཧͰ͖ΔΑ͏ͳֆΛඳ͘ ▸
ຊLTͰհ͍ͯ͠ͳ͍͕ɺFCMΞφϦςΟΫεͳͲΞϓϦΛ࡞Δ্ Ͱඞཁͳͷ͕શͯἧ͍ͬͯΔ ࡞Γ͍ͨͷʹΑΔ͕ গਓͰͺͺͬͱ։ൃΛ͢ΔͳΒ!
͓ΘΓ