※Claude Codeを使用して記事を作成しています。
シリーズ：Claude Codeで実務Androidアプリ開発
- 第1回：ログイン機能を作ろう
- 第2回：Firebaseでユーザー認証
- 第3回：クラウドにデータを保存しよう ← 今回
はじめに
ログイン機能が完成したので、いよいよアプリの本体であるメモ機能を実装します。
今回はメモのデータをスマホ内だけでなくFirestoreというクラウドデータベースに保存します。
Firestoreを使うと次のことができます。
- 機種変更してもデータが消えない
- 複数のスマホで同じデータを見られる
- リアルタイムでデータの変更が反映される
今回実装する内容
| 機能 | 内容 |
|---|---|
| メモ一覧画面 | 自分のメモをリストで表示 |
| メモ作成 | タイトル・本文を入力して保存 |
| メモ削除 | 不要なメモを削除する |
| リアルタイム同期 | 追加・削除が即座に一覧に反映される |
事前準備：Firestoreを有効化する
- Firebaseコンソールの左メニューから 「Firestore Database」 を選択
- 「データベースを作成」 をクリック
- 「テストモードで開始」 を選択（開発中はこれでOK）
- リージョンは
asia-northeast1（東京）を選択 - 「完了」 をクリック
⚠️ テストモードについて：
テストモードは誰でも読み書きできる設定です。
本番リリース前にはセキュリティルールを設定する必要があります（第8回で対応します）。
Step 1：Firestoreライブラリを追加する
✍️ Claude Codeへの指示例：
FirebaseのFirestoreライブラリをプロジェクトに追加してください。
libs.versions.tomlを使ったバージョン管理で追加してください。
Step 2：メモのデータ構造を設計する
✍️ Claude Codeへの指示例：
メモアプリのデータ構造を設計してください。
メモ1件のデータは以下の項目を持つようにしてください。
・メモのID（自動生成）
・タイトル（文字列）
・本文（文字列）
・作成日時
・最終更新日時
・作成したユーザーのID（ログイン中のユーザーに紐づける）
Firestoreのコレクション名は「memos」にしてください。Step 3：メモ一覧画面を作る
✍️ Claude Codeへの指示例：
メモ一覧画面を作ってください。
・ログイン中のユーザーのメモだけをFirestoreから取得して一覧表示する
・各メモはタイトルと作成日時を表示する
・メモが0件のときは「メモがありません。右下のボタンから作成してください。」と表示する
・右下に「＋」のFloatingActionButtonを置いて、押すとメモ作成画面に遷移する
・Firestoreの変更をリアルタイムで反映する（追加・削除が即座に一覧に反映される）Step 4：メモ作成・編集画面を作る
✍️ Claude Codeへの指示例：
メモの作成・編集画面を作ってください。
・タイトルの入力欄（1行）
・本文の入力欄（複数行、画面の大半を使う）
・右上に「保存」ボタン
新規作成のとき：
・「保存」を押すとFirestoreに新しいメモを追加して、一覧画面に戻る
既存メモの編集のとき：
・一覧から選択すると既存の内容が入力欄に表示される
・「保存」を押すと内容を更新して一覧に戻るStep 5：メモ削除機能を追加する
✍️ Claude Codeへの指示例：
メモ一覧で各メモを長押しすると「削除」の選択肢が表示されて、
選択すると「このメモを削除しますか？」という確認ダイアログが出て、
「削除する」を押すとFirestoreからそのメモを削除するようにしてください。
動作確認チェックリスト
- [ ] メモを作成すると一覧に即座に表示される
- [ ] メモをタップすると編集画面が開き、内容を変更して保存できる
- [ ] メモを長押しすると削除できる
- [ ] アプリを再起動してもメモが残っている
- [ ] Firebaseコンソールの「Firestore」にデータが保存されているのが確認できる
- [ ] 別のデバイスや別のアカウントのメモは表示されない
まとめ
| 学んだこと | ポイント |
|---|---|
| Firestoreの有効化 | テストモードで開始し、本番前にルールを設定する |
| データ構造の設計 | ユーザーIDを持たせてデータをユーザーごとに分離する |
| リアルタイム同期 | 「即座に反映される」と指示するだけでClaude Codeが対応してくれる |
| CRUD操作 | 作成・読み取り・更新・削除をセットで実装する |
