ReactNative × FirestoreでiOSアプリを作成する手順とまとめ

# ■概要

## CloudFirestoreとは

Firebaseが提供している、NoSQLベースのデータベースのうちの一つ（MBaasの一つ）

RealtimeDatabase　→　CloudFirestoreに進化！

Q、何が改善されてる？
A、データモデルの改善、クエリ強化されている。

## Firebaseの機能とデータベース

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586262/29c5ff60-81fd-af34-eb6b-5255e75d28ec.png)


# ■準備

- Firebaseプロジェクトのセットアップ

    Firebase公式ページからコンソール画面に移動して、新規アプリ作成。

    プロジェクトIDとロケーションは**後で変更が出来ない**ので、注意！

    ※国内向けサービスの場合、asia-northeast1（東京）or asia-northeast2（大阪）

    

- バックエンド側のセットアップ
    - Firebase CLIをインストールする。これを使うと、Firebaseを使った開発がより効率的になる。

    ```bash
    npm install firebase-tools
    ```

    - デプロイを可能にするためにセットアップする。

    ```bash
    npm firebase login
    ```

- Firestoreをセットアップ

    最初はテストモードで開始。

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586262/380441d7-ca8f-8d3d-0b6a-e40578d61633.png)


- npmモジュールの追加

    ```bash
    npm install @react-native-firebase/app
    ```

- iOSアプリ開発環境のセットアップ
    - CocoaPods経由でFirebaseをインストール。

    Finderで、「プロジェクト名」→「ios」→「podfile」を開く。podfile内にテキストで以下を記述する。

    ```bash
    target 'Project' do
      pod 'Firebase/Core'
      pod 'Firebase/Auth'
      pod 'Firebase/Firestore'
      pod 'Firebase/Functions'
    end
    ```

    iosアプリにFirebaseを作成するページで以下の流れに沿って進める。



    - pod install

    ```bash
    cd ios/ && pod install
    ```

- Firebase SDKのセットアップ

    ```bash
    npm install @react-native-firebase/app
    npm install @react-native-firebase/auth
    npm install @react-native-firebase/firestore
    ```

# ■実装（データの操作）

- CollectionとDocumentの取得、追加

    ```jsx
    import firestore from '@react-native-firebase/firestore';

    // 'Users'というCollectionの、'KHarada'というDocumentを指定
    const userDocument = firestore()
      .collection('Users')
      .doc('kHarada');
    	// 取得
    	.get()
    	// 追加
    	.set()
    ```

- AuthenticationアカウントとFirestoreドキュメントの作成

    新規登録画面で入力されたメールアドレス等をfirestoreドキュメントにぶちこむ。

    ```jsx
    handleSubmit = async () => {
        try {
    			// メールアドレス認証
          let res = await auth()
            .createUserWithEmailAndPassword(this.state.email, this.state.password)
            .catch((err) => {
              console.log(err);
            });
    				
    				// ドキュメント内に保存するフィールド
            let userData = {
              uid: res.user.uid,
              email: this.state.email,
            };
    				
    				// userDataを保存する
            await firestore()
              .collection('users')
              .doc(res.user.uid)
              .set(userData);
              
              console.log('email login success');
              this.props.navigation.navigate('App');
          }

        } catch (e) {
          console.log(e.message);
        }
      };
    ```

- クエリの機能と種類

    クエリを使いこなすことで、firestore内に保存されているデータを制御し、自在に操作することが可能

    - 条件制限

        where

        Ex, 18歳以上のみ取得したいとき

        ```jsx
        firestore()
          .collection('Users')
          // 18歳以上のみ
          .where('age', '>=', 18)
          .get()
        ```

    - 件数制限

        limit

        ドキュメントの数を制限したいとき

        ```jsx
        firestore()
          .collection('Users')
          // 18歳以上のみ
          .where('age', '>=', 18)
          // ドキュメントを20こまで
          .limit(20)
          .get()
        ```

    - 並べ替え

        order By

        ```jsx
        firestore()
          .collection('Users')
          // 降順で並べ替え
          .orderBy('age', 'desc')
          .get()
        ```

    - 特定のポイントから開始/終了

        start At / end At

        ```jsx
        firestore()
          .collection('Users')
          .orderBy('age', 'desc')
        	// 18歳から30歳まで
          .startAt(18)
          .endAt(30)
          .get()
        ```

        ↓実際に使う場面はこんなとき！

        startAtでリロード後の追加データをどのポイントから取得するのか指定する。


# ■Firestoreの課題

- マイグレーション

    マイグレーション：ソフトウェアやシステム、データなどを別の環境に移転したり、新しい環境に切り替えたりすること。

    データのエクスポートが出来ない。バックアップする方法がない。

    （このデメリットはさほど気にならない気もする・・）

- データベース設計

    データの形式が自由なだけあって、フィールドに書き込んだデータの型がわからなかったりする。

    チーム内でのドキュメント作成と共有が重要。

- 検索

    ネイティブインデックスの作成やドキュメント内のテキストフィールドの検索をサポートしていないので、Algoliaという検索APIを使って、検索周りはそっちに任せる。

[Firebaseでバックエンドエンジニア不在のアプリ開発　クックパッドが体感した、メリットと課題 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！](https://employment.en-japan.com/engineerhub/entry/2018/08/30/110000)

[全文検索 | Firebase](https://firebase.google.cn/docs/firestore/solutions/search?hl=ja)

# ■Firestoreを今まで触ってみて思ったこと

- プロジェクトの規模にもよるが、とにかく機能が充実していて、あまり不便さを感じていない。なので、RDBの必要性が見えてこない。
- Authenticationは多くのSNSと連携することが可能なので、モダンなプロダクトにはもってこい
- 多くの企業が利用しているせいか、日本語の記事が多い印象。初心者に優しい。

# 参考ページ

[Cloud Firestore | React Native Firebase](https://rnfirebase.io/firestore/usage)

[実践Firestore (技術の泉シリーズ（NextPublishing）)](https://www.amazon.co.jp/%E5%AE%9F%E8%B7%B5Firestore-%E6%8A%80%E8%A1%93%E3%81%AE%E6%B3%89%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89-%E7%A6%8F%E7%94%B0-%E9%9B%84%E8%B2%B4/dp/484437852X)