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
React Native x Firebaseの メリットとTips5選
Search
takahi5
February 02, 2021
Programming
1
2.1k
React Native x Firebaseの メリットとTips5選
2020/2/2開催「PORT Firebase × React Native」の発表資料です。
takahi5
February 02, 2021
Tweet
Share
More Decks by takahi5
See All by takahi5
仮説検証フェーズの開発 with React Native
takahi5
0
120
React Nativeでアニメーションを頑張る- React Native Meetup #11
takahi5
4
1.5k
怖くないexpo eject - TECH STAND #2
takahi5
0
2k
React Native パフォーマンス最適化 - 2020-10-15 RN Tech Blog
takahi5
1
97
リリースから1年経った React Nativeアプリの リファクタリング
takahi5
0
700
リモートワーク×副業 が中心のチームづくり
takahi5
0
1.2k
React Native + Expoなアプリを リリースして1年を”5分”で振り返る
takahi5
1
300
Other Decks in Programming
See All in Programming
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
820
CursorはMCPを使った方が良いぞ
taigakono
0
140
エラーって何種類あるの?
kajitack
5
270
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
280
XSLTで作るBrainfuck処理系
makki_d
0
210
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
0
100
TypeScript LSP の今までとこれから
quramy
1
510
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
1.9k
エンジニア向け採用ピッチ資料
inusan
0
140
生成AIで日々のエラー調査を進めたい
yuyaabo
0
620
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Writing Fast Ruby
sferik
628
61k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Become a Pro
speakerdeck
PRO
28
5.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Music & Morning Musume
bryan
46
6.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Thoughts on Productivity
jonyablonski
69
4.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Transcript
React Native x Firebaseの メリットとTips5選 stand.fm 和田崇彦 (@takahi5) React Native
Firebase
自己紹介 - stand.fmのエンジニア (2021.1〜) - React Native, Firebaseで複数のアプリを開発
- 2020 Firebase ハッカソン 最優秀賞 - UdemyでReact Native x Firebaseのコース 和田 崇彦 @takahi5 2
今日話すこと React Native x Firebaseの メリットとTips 3
メリット JavaScript (TypeScript) で全部書ける! Function 管理画面 Web版 アプリ React
Native React React Native for Web 4
Tips • Firebaseのライブラリについて • モノレポで型を共有 • Functionでバックエンドと適切に役割分担 • onSnapShotは更新頻度に注意
• Firebaseに関わる層を分ける 5
1. Firebaseのライブラリについて Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK
Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow 参考: Expoあるなしについて https://speakerdeck.com/takahi5/bu-kunaiexpo-eject-tech-stand-number-2?slide=5 6
1. Firebaseのライブラリについて Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK
Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow https://firebase.google.com/support/guides/environments_js-sdk Expoではこれのみ 使える機能が限られる expo-firebase-analytics使える 7
1. Firebaseのライブラリについて Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK
Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow Firebaseのフル機能 ネイティブ実装でパフォーマンス◎ 8
JSスレッドとNativeスレッド Main (Native) Thread JavaScript Thread Bridge UI ビジネス ロジック
9
1. Firebaseのライブラリについて Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK
Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow React Native for Webで そのまま使えるメリット 10
2. モノレポで型を共有 TypeScriptの型 モノレポにして シンボリックリンクで共有が楽 app admin functions types
types types アプリ 管理画面 Cloud Functions 11
3. Functionでバックエンドと適切に役割分担 サーバーレス ≠ フロントだけ書けば良い バックエンド(Cloud Function)と役割分担を
React Native 12
バックエンド側でやったほうがよい処理 - 非同期でも構わない処理 - 複雑で時間がかかる処理 13
例: 画像のリサイズ - Cloud Storageの保存トリガー - 公式のエクステンションがある Storage Function Cloud
Storage Trigger 14
例: データの抽出が複雑&更新頻度が少ない処理 - 例: ニュースアプリの人気記事リスト collections(“articles”) .where(“like”, “>”,
“10”) .where(“view” “>” “50”) …. フロントの検索条件で頑張る articles popularArticles Firestore Functions 6:00 予め人気記事のコレクションを作っておく 15
4. onSnapShotは更新頻度に注意 ユーザー増で予想外のstate更新頻度↑ レンダリング負荷でパフォーマンス低下 Firestore onSnapShot
リアルタイム更新 16
onSnapShotの更新頻度が高すぎる場合 - 改善アイデア 一定時間ごとに取得 レンダリングの最適化 不要な部分のレンダリング防ぐ React.memoの利用 Firestore ポーリング
適当に 散らして表示 17
5. Firebaseに関わる層を分ける - なるべくFireStoreのオブジェクトを隠蔽する - アプリケーション内ではdocument.data()を展 開したものを扱う const snapshot
= await firebase .firestore() .collection("articles") .get(); return snapshot.docs.map( (doc) => ( { ...doc.data(), id: doc.id } as Article) ); firebase.js 18
まとめ - React NativeとFirebaseの相性よい! - Tips - Firebaseのライブラリについて
- モノレポで型を共有 - Functionでバックエンドと適切に役割分担 - onSnapShotは更新頻度に注意 - Firebaseに関わる層を分ける 19