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
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
ニーリーにおけるプロダクトエンジニア
nealle
0
520
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
130
Cline指示通りに動かない? AI小説エージェントで学ぶ指示書の書き方と自動アップデートの仕組み
kamomeashizawa
1
580
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
370
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
320
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Benchmark
sysong
0
270
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
5つのアンチパターンから学ぶLT設計
narihara
1
120
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
How GitHub (no longer) Works
holman
314
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
How to Ace a Technical Interview
jacobian
277
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Designing for humans not robots
tammielis
253
25k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building an army of robots
kneath
306
45k
Practical Orchestrator
shlominoach
188
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
Adopting Sorbet at Scale
ufuk
77
9.4k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
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