【Flutter】Masamuneで超速アプリ開発②「Firestoreへの簡単接続」

こんにちは。広瀬マサルです。

Flutterでアプリケーションを安定して高速に開発することのできるMasamuneフレームワークを紹介しました。

https://zenn.dev/mathru/articles/dcd9a52bcf3e94

その魅力と使い方を知っていただくためにこれから数回に分けて紹介記事を書きたいと思います。

Masamuneフレームワークを使いこなすことで超高速・安定・高品質なアプリを開発することができるでしょう。

前回は「プロジェクトの作成」についてお話しました。

https://qiita.com/mathru/items/f66cfb7e52503de1d811

第２回は「**Firestoreへの簡単接続**」です。

# Firestoreの作成

まずはFirestoreを利用できるようにしましょう。

Firebaseのコンソールからプロジェクト作成を行います。

https://console.firebase.google.com/

ここで一緒に作成される`プロジェクトID`を覚えておきます。

今回は`masamune-test`で作成します。

![](https://storage.googleapis.com/zenn-user-upload/266c7ed6fae7-20230630.png)

GoogleAnalyiticsはご自由にどうぞ。

![](https://storage.googleapis.com/zenn-user-upload/d4038800da3d-20230630.png)

プロジェクトが作られます。

![](https://storage.googleapis.com/zenn-user-upload/3ca57b1d7953-20230630.png)

Firestoreを新しく作成します。

![](https://storage.googleapis.com/zenn-user-upload/25b756d2eee5-20230630.png)

モードは`TestMode`にしておきます。

![](https://storage.googleapis.com/zenn-user-upload/59a3a398eaa9-20230630.png)

`リージョン`を指定してください。

ここで指定した`リージョン`は覚えておきます。

ここでは`asia-northeast1`を指定します。

![](https://storage.googleapis.com/zenn-user-upload/b0167b4bb396-20230630.png)

Firestoreが作成されました。

![](https://storage.googleapis.com/zenn-user-upload/a005f7750986-20230630.png)

# FlutterプロジェクトでのFirebase設定

[前回](https://qiita.com/mathru/items/f66cfb7e52503de1d811)作成したFlutterプロジェクトに戻りFirebaseの設定を反映させます。

`katana.yaml`を開きます。

`project_id`に先程作成したFirebaseプロジェクトIDを記述し`firestore`の`enable`を`true`に設定します。

```yaml
# katana.yaml

# This section contains information related to Firebase.
# Firebase関連の情報を記載します。
firebase:
  # Set the Firebase project ID.
  # FirebaseのプロジェクトIDを設定します。
  project_id: masamune-test

  # Enable Firebase Firestore.
  # Set [generate_rules_and_indexes] to `true` to automatically generate Firestore security rules and indexes.
  # If [primary_remote_index] is set to `true`, indexes on the console are prioritized and automatic index import is enabled.
  # Firebase Firestoreを有効にします。
  # [generate_rules_and_indexes]を`true`にするとFirestoreのセキュリティルールとインデックスを自動生成します。
  # [primary_remote_index]を`true`にするとコンソール上のインデックスが優先されるため、インデックスの自動インポートが有効になります。
  firestore:
    enable: true # false -> true
    generate_rules_and_indexes: false
    primary_remote_index: false
```

ターミナルを開きFirebaseのプロジェクトを作成したアカウントにログインします。

※違うアカウントにログインしていたときは一旦ログアウトして再度ログインしてください。

```bash
firebase login
```

最後に`katana apply`のコマンドを実行します。

```bash
katana apply
```

これによりFirebaseプロジェクト内にプラットフォームに対応した設定が作成され、自動でFirebaseに接続するための設定がFlutterプロジェクト内に作成されます。

# アダプターの入れ替え

`adapter.dart`を書き換えます。

`modelAdapter`を`LocalModelAdapter`から`FirestoreModelAdapter`に`DefaultFirebaseOptions.currentPlatform`を指定して入れ替えます。

```dart
import 'firebase_options.dart'; // 追加

~~~~~

final modelAdapter = FirestoreModelAdapter(
  options: DefaultFirebaseOptions.currentPlatform,
);
// final modelAdapter = LocalModelAdapter();
// final modelAdapter = RuntimeModelAdapter();
```

デバッグしてみるとカウンターアプリが立ち上がります。

![](https://storage.googleapis.com/zenn-user-upload/1761bef925df-20230630.png)

カウントアップしてみるとFirestoreに保存されているデータが変更されてるのがわかります。

![](https://storage.googleapis.com/zenn-user-upload/dccf186ca8e9-20230630.png)

前回、データモデルで`ModelCounter`の型のフィールドを利用していることを説明しました。

`ModelCounter`を`FirestoreModelAdapter`で利用する場合、値を増減すると内部で`FieldValue.increment`が利用されます。

そのため、多数のユーザーが同じフィールドにアクセスした場合でも不整合なく値を増減することができます。

# おわりに

わずか数行の変更で簡単にFirestoreへと接続することができました。

このようにMasamuneフレームワークはDart外の設定もコマンド一発で簡単に設定することができ、Dart内もアダプターを入れ替えることで簡単に設定を切り替えることが可能です。

次回から実際のアプリ開発を進めていこうと思います。お楽しみに！

https://qiita.com/mathru/items/7845249de007b9e4727c

Masamuneフレームワークは[こちら](https://github.com/mathrunet/flutter_masamune)にソースを公開しています。issueやPullRequestをお待ちしてます！

また仕事の依頼等ございましたら、私の[Twitter](https://twitter.com/mathru)や[Webサイト](https://mathru.net)で直接ご連絡をお願いいたします！

https://mathru.net/ja/contact

# GitHub Sponsors

スポンサーを随時募集してます。ご支援お待ちしております！

https://github.com/sponsors/mathrunet