CONTENT
ここから
第12章：よくある失敗を知ろう
Flutterアプリとデータベース連携入門｜アプリのデータを残す仕組み
この章で学ぶこと
この章では、Flutterアプリとデータベース連携で起こりやすい失敗を学びます。
最初に覚えることは、これだけです。
失敗の多くは、保存・読み込み・ユーザー区別・削除確認で起きる
Todoアプリでよくある失敗は、次の5つです。
保存したつもりなのに消える
同じデータが何度も追加される
誰のデータか分からなくなる
読み込み中の画面がない
削除してはいけないデータを消してしまう
エラーが起きたときに大切なのは、慌ててコードを全部書き直さないことです。
まずは、どこで問題が起きているのかを分けて考えます。
画面の問題？
処理の問題？
データベースの問題？
ログインの問題？
12-1. 保存したつもりなのに消える
よくある失敗の1つ目は、保存したつもりなのに、アプリを開き直すとデータが消えていることです。
Todoアプリで考えると、次のような状態です。
Todoを追加した
↓
画面には表示された
↓
アプリを閉じた
↓
もう一度開いたら消えている
これは、画面だけ更新して、データベースに保存できていない可能性があります。
よくある原因
データベースへの保存処理を書いていない
保存処理はあるが、エラーで失敗している
保存後に読み込み直していない
ローカルの変数だけに追加している
Flutterの画面上では追加されたように見えても、データベースに保存されていなければ、再読み込みしたときに消えます。
確認すること
保存できていないときは、次の順番で確認します。
1. 保存ボタンは押されているか
2. 保存処理は呼ばれているか
3. データベースに追加されているか
4. エラーが出ていないか
5. 保存後に一覧を読み込み直しているか
特に大事なのは、データベース側を確認することです。
Supabaseなら、Table Editorで本当に行が増えているか確認します。
Firebaseなら、Firestoreのデータ画面で本当にドキュメントが追加されているか確認します。
考え方
画面に表示された = 保存できた
とは限りません。
正しくは、こう考えます。
データベースに入った = 保存できた
まずは、画面ではなく保存先を確認する習慣をつけましょう。
12-2. 同じデータが何度も追加される
よくある失敗の2つ目は、同じTodoが何度も追加されることです。
例えば、1回だけ保存したつもりなのに、一覧に同じ内容が何個も出る場合です。
□ レポートを書く
□ レポートを書く
□ レポートを書く
これは、保存処理が何度も動いている可能性があります。
よくある原因
保存ボタンを何回も押せてしまう
保存中なのにボタンが有効なまま
画面を開くたびに追加処理が走っている
データ読み込みと追加処理を混ぜている
特に初心者がやりやすいのは、保存中にもボタンを連打できる状態です。
防ぐ考え方
保存中は、保存ボタンを押せないようにします。
保存ボタンを押す
↓
保存中にする
↓
ボタンを無効にする
↓
保存が終わったら戻す
画面では、次のように表示すると親切です。
保存中...
確認すること
同じデータが増えるときは、次を確認します。
保存ボタンを連打していないか
onPressedが複数回呼ばれていないか
画面表示時に追加処理を呼んでいないか
保存処理と読み込み処理を分けているか
保存処理は、基本的に「保存ボタンを押したとき」だけ動かします。
12-3. 誰のデータか分からなくなる
よくある失敗の3つ目は、誰のデータか分からなくなることです。
ログイン機能があるアプリでは、特に大事です。
例えば、Aさんがログインしているのに、BさんのTodoが見えてしまうと問題です。
Aさんの画面
↓
BさんのTodoが表示される
これは、データに user_id が付いていない、または user_id で絞り込めていない可能性があります。
よくある原因
Todoにuser_idを保存していない
ログイン中のユーザーIDを取得していない
全員のTodoを読み込んでいる
アプリ側だけで分けようとしている
ユーザーごとのデータを扱う場合は、データベース側にも「誰のデータか」を保存します。
正しい考え方
Todoテーブルには、user_id を入れます。
| id | user_id | title | is_done |
|---|---|---|---|
| ---: | --- | --- | --- |
| 1 | user_a | レポートを書く | false |
| 2 | user_b | 買い物に行く | false |
| 3 | user_a | 英単語を覚える | true |
Aさんがログインしているなら、user_a のTodoだけ表示します。
user_id = user_a のデータだけ取得する
FirebaseとSupabaseでの考え方
Firebaseでは、ログイン中のユーザーIDを uid として扱うことがあります。
Firebase Authentication
↓
uidを取得
↓
Firestoreのデータにuidを保存
↓
uidが一致するデータだけ表示
Supabaseでは、ログイン中のユーザー情報から user.id を取得して使います。
Supabase Auth
↓
user.idを取得
↓
todosテーブルのuser_idに保存
↓
user_idが一致するデータだけ表示
サービス名は違っても、考え方は同じです。
ログイン中のユーザーIDを取得する
↓
データにユーザーIDを付ける
↓
自分のデータだけ表示する
12-4. 読み込み中の画面がない
よくある失敗の4つ目は、読み込み中の画面がないことです。
データベースからデータを読み込むには、少し時間がかかることがあります。
その間、画面が真っ白だと、ユーザーは不安になります。
止まっている？
壊れた？
押せていない？
必要な状態
データを表示する画面では、次の状態を考えます。
読み込み中
データあり
データなし
エラー
この4つを分けると、分かりやすいアプリになります。
表示例
| 状態 | 表示例 |
|---|---|
| 読み込み中 | 読み込み中です... |
| データあり | Todo一覧を表示 |
| データなし | まだTodoがありません |
| エラー | データを読み込めませんでした |
特に、データなしとエラーは分けて考えます。
データなしは、問題ではありません。
まだデータがないだけです。
エラーは、通信や権限などに問題がある状態です。
実装の考え方
読み込み中なら、読み込み中を表示
エラーなら、エラーを表示
データが空なら、空のメッセージを表示
データがあれば、一覧を表示
コードの考え方は、こうです。
if (isLoading) {
return const Text('読み込み中です...');
}
if (errorMessage != null) {
return Text(errorMessage!);
}
if (todos.isEmpty) {
return const Text('まだTodoがありません。');
}
return ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
final todo = todos[index];
return ListTile(
title: Text(todo.title),
);
},
);
最初は、コードを暗記しなくて大丈夫です。
大事なのは、状態によって表示を変えることです。
12-5. 削除してはいけないデータを消してしまう
よくある失敗の5つ目は、削除してはいけないデータを消してしまうことです。
削除は、取り返しがつかないことがあります。
例えば、次のようなデータは慎重に扱います。
予約情報
注文履歴
ユーザー情報
仕事の記録
大切なメモ
Todoアプリでも、間違えて削除すると困ることがあります。
よくある原因
削除前の確認がない
どのデータを削除するか間違えている
idを使わずに削除している
削除ボタンが押しやすい位置にある
特に危ないのは、id を使わずに削除することです。
同じタイトルのTodoがあると、間違ったデータを消す可能性があります。
削除前に確認する
削除前には、確認画面を出すと安全です。
このTodoを削除しますか？
キャンセル
削除する
確認画面があると、間違えて削除ボタンを押したときに止められます。
削除の基本ルール
削除では、次のルールを守ると安全です。
idで対象を指定する
削除前に確認する
重要なデータはすぐ消さない設計も考える
削除後に一覧を読み込み直す
重要なデータでは、すぐに完全削除せず、deleted_at のようなカラムを使って「削除済み」にする方法もあります。
これは、あとから復元できるようにするためです。
よくある失敗チェックリスト
実装中に迷ったら、このチェックリストを使います。
| チェック | 確認すること |
|---|---|
| 保存できない | データベースに本当に入っているか |
| 同じデータが増える | 保存処理が何回も動いていないか |
| 他人のデータが見える | user_idで絞り込んでいるか |
| 画面が真っ白 | 読み込み中・空・エラー表示があるか |
| 間違って削除する | 削除前確認とid指定があるか |
エラーが起きたら、まずこの表を見て確認しましょう。
インストールや準備について
この章では、新しいインストール作業はありません。
実装に進む場合は、これまでと同じ準備を使います。
Flutter SDK
Visual Studio Code
Supabase
supabase_flutter
Firebase
参考URLです。
Flutter公式インストール
https://docs.flutter.dev/install
Flutter × VS Code
https://docs.flutter.dev/tools/vs-code
Supabase Flutter Quickstart
https://supabase.com/docs/guides/getting-started/quickstarts/flutter
supabase_flutter
https://pub.dev/packages/supabase_flutter
Firebase for Flutter
https://firebase.google.com/docs/flutter
この章では、まず「どんな失敗が起きやすいか」を知ることが目的です。
失敗パターンを知っていると、エラーが起きても落ち着いて確認できます。
12-6. この章のまとめ
この章では、Flutterアプリとデータベース連携でよくある失敗を整理しました。
よくある失敗は、次の5つです。
保存したつもりなのに消える
同じデータが何度も追加される
誰のデータか分からなくなる
読み込み中の画面がない
削除してはいけないデータを消してしまう
大切なのは、エラーが起きたときに原因を分けて考えることです。
画面の問題
処理の問題
データベースの問題
ログインの問題
保存したつもりなのに消える場合は、データベースに本当に保存されているか確認します。
同じデータが何度も追加される場合は、保存処理が複数回動いていないか確認します。
誰のデータか分からなくなる場合は、user_id を使っているか確認します。
読み込み中の画面がない場合は、読み込み中・空・エラー・データありの状態を分けます。
削除では、id で対象を指定し、削除前に確認します。
失敗を知ることは、上達の近道です。
次の章では、小さなアプリを完成させるために、必要な画面・データ・処理をつなげて考えます。