$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
Search
Yu Watanabe
December 03, 2019
Technology
4
1.3k
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
バックエンドをFirebaseにし、アプリをReact Nativeで作ると通常作るよりも簡単にできるのかについての発表となります。
Yu Watanabe
December 03, 2019
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
依存ライブラリを薄くするために車輪を再開発してもいいんだよ🛞
watanabeyu
0
110
Bolt 🤝 Expo
watanabeyu
0
360
npm packageとリリースとモノレポ
watanabeyu
0
67
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
970
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.2k
gandhの紹介です
watanabeyu
0
38
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
670
react-native-unimodulesのススメ
watanabeyu
1
6.6k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
shift_evolve
PRO
2
210
MLflowダイエット大作戦
lycorptech_jp
PRO
1
160
mairuでつくるクレデンシャルレス開発環境 / Credential-less development environment using Mailru
mirakui
5
580
[Data & AI Summit '25 Fall] AIでデータ活用を進化させる!Google Cloudで作るデータ活用の未来
kirimaru
0
150
半年で、AIゼロ知識から AI中心開発組織の変革担当に至るまで
rfdnxbro
0
120
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
yayoi_dd
0
580
ESXi のAIOps だ!2025冬
unnowataru
0
170
Amazon Bedrock Knowledge Bases × メタデータ活用で実現する検証可能な RAG 設計
tomoaki25
6
2k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
11
390k
障害対応訓練、その前に
coconala_engineer
0
150
Building Serverless AI Memory with Mastra × AWS
vvatanabe
0
200
Fashion×AI「似合う」を届けるためのWEARのAI戦略
zozotech
PRO
2
1.1k
Featured
See All Featured
Code Review Best Practice
trishagee
74
19k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
24
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
1
200
HDC tutorial
michielstock
0
260
Typedesign – Prime Four
hannesfritz
42
2.9k
What the history of the web can teach us about the future of AI
inesmontani
PRO
0
370
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.8k
Agile that works and the tools we love
rasmusluckow
331
21k
Navigating Team Friction
lara
191
16k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
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ΞφϦςΟΫεͳͲΞϓϦΛ࡞Δ্ Ͱඞཁͳͷ͕શͯἧ͍ͬͯΔ ࡞Γ͍ͨͷʹΑΔ͕ গਓͰͺͺͬͱ։ൃΛ͢ΔͳΒ!
͓ΘΓ