Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native x Firebaseの メリットとTips5選

takahi5
February 02, 2021

React Native x Firebaseの メリットとTips5選

2020/2/2開催「PORT Firebase × React Native」の発表資料です。

takahi5

February 02, 2021
Tweet

More Decks by takahi5

Other Decks in Programming

Transcript

  1. 自己紹介
 - stand.fmのエンジニア (2021.1〜) 
 - React Native, Firebaseで複数のアプリを開発 


    - 2020 Firebase ハッカソン 最優秀賞 
 - UdemyでReact Native x Firebaseのコース 
 和田 崇彦 @takahi5
 2
  2. 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
  3. 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
  4. 1. Firebaseのライブラリについて 
 Firebase JavaScript SDK react-native-firebase Firebase JavaScript SDK

    Expoあり Expo - Managed workflow Expoなし Vanilla React Native Expo - Bare workflow Firebaseのフル機能 ネイティブ実装でパフォーマンス◎ 8
  5. 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
  6. 例: データの抽出が複雑&更新頻度が少ない処理 
 - 例: ニュースアプリの人気記事リスト 
 collections(“articles”) .where(“like”, “>”,

    “10”) .where(“view” “>” “50”) …. フロントの検索条件で頑張る 
 articles popularArticles Firestore Functions 6:00 予め人気記事のコレクションを作っておく 
 15
  7. 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
  8. まとめ
 - React NativeとFirebaseの相性よい! 
 - Tips
 - Firebaseのライブラリについて 


    - モノレポで型を共有
 - Functionでバックエンドと適切に役割分担 
 - onSnapShotは更新頻度に注意 
 - Firebaseに関わる層を分ける 
 19