CONTENT
ここから
この章で学ぶこと
この章では、ここまで学んだ内容をつなげて、小さなTodoアプリを完成させる考え方を整理します。
最初に覚えることは、これだけです。
画面を作る
↓
データを決める
↓
追加・表示・更新・削除をつなげる
↓
最後に動作確認する
この章の目的は、すごく大きなアプリを作ることではありません。
まずは、小さくても最後まで動くアプリを完成させることです。
13-1. 今回作るアプリの完成イメージ
今回作るアプリは、シンプルなTodoアプリです。
できることは、次の4つです。
Todoを追加する
Todo一覧を表示する
Todoを完了にする
Todoを削除する
これだけでも、データベース連携の基本をかなり練習できます。
完成イメージ
画面のイメージは、次のような形です。
Todoを入力
[ レポートを書く ] [追加]
Todo一覧
□ レポートを書く
☑ 買い物に行く
□ 英単語を覚える
チェックを押すと、未完了と完了を切り替えます。
削除ボタンを押すと、不要なTodoを削除します。
このアプリで学べること
この小さなアプリでは、次の基本が学べます。
入力フォーム
データ追加
一覧表示
状態の更新
データ削除
読み込み中の表示
空の状態の表示
エラー時の表示
最初は見た目を完璧にするよりも、データの流れを理解することを優先します。
13-2. 必要な画面を整理する
アプリを作る前に、必要な画面を整理します。
いきなりコードを書くと、途中で迷いやすくなります。
まずは、画面に必要なものを書き出します。
Todoアプリに必要な画面部品
今回のTodoアプリに必要なものは、次の通りです。
| 画面部品 | 役割 |
|---|---|
| 入力欄 | Todoのタイトルを入力する |
| 追加ボタン | 入力したTodoを保存する |
| Todo一覧 | 保存したTodoを表示する |
| チェックボックス | 完了状態を切り替える |
| 削除ボタン | Todoを削除する |
| 読み込み表示 | データ取得中であることを伝える |
| 空の表示 | Todoがまだないことを伝える |
このように、画面部品と役割をセットで考えると分かりやすくなります。
画面を分けすぎない
最初の練習では、画面を増やしすぎない方がよいです。
まずは、1画面で完成させます。
入力欄
追加ボタン
Todo一覧
この3つがあれば、基本のTodoアプリは作れます。
編集画面や設定画面は、あとから追加すれば大丈夫です。
13-3. 必要なデータを整理する
次に、保存するデータを整理します。
Todoアプリで必要なデータは、最初はシンプルで大丈夫です。
id
title
is_done
created_at
updated_at
ログインありにする場合は、user_id も追加します。
Todoテーブルの形
Todoを保存するテーブル名は、todos とします。
| カラム名 | 意味 | 例 |
|---|---|---|
| id | Todoを見分けるID | 1 |
| title | Todoの内容 | レポートを書く |
| is_done | 完了したかどうか | false |
| created_at | 作成日時 | 2026-06-04 10:00 |
| updated_at | 更新日時 | 2026-06-04 10:00 |
ログインありの場合は、次のカラムも入れます。
| カラム名 | 意味 |
|---|---|
| user_id | 誰のTodoかを示すID |
最初は小さく作る
最初からたくさんのカラムを入れすぎると、分かりにくくなります。
まずは、最低限で大丈夫です。
id
title
is_done
created_at
慣れてきたら、次のようなカラムを追加できます。
updated_at
user_id
priority
due_date
memo
最初は、小さく作ることが大切です。
13-4. 追加・表示・更新・削除をつなげる
Todoアプリの中心は、CRUDです。
Create：追加する
Read：表示する
Update：更新する
Delete：削除する
この4つをつなげると、アプリとして動きます。
追加する流れ
1. 入力欄にTodoを書く
2. 追加ボタンを押す
3. 入力内容を取得する
4. 空文字なら保存しない
5. データベースに保存する
6. 一覧を読み込み直す
7. 入力欄を空にする
ポイントは、保存したあとに一覧を更新することです。
保存しただけで画面が変わらないと、ユーザーは保存できたか分かりません。
表示する流れ
1. アプリを開く
2. データベースからTodo一覧を取得する
3. 読み込み中なら読み込み表示を出す
4. Todoが空なら空の表示を出す
5. TodoがあればListViewで表示する
データを表示するときは、4つの状態を考えます。
読み込み中
データあり
データなし
エラー
更新する流れ
1. チェックボックスを押す
2. 対象のTodoのidを確認する
3. is_doneを反対にする
4. データベースを更新する
5. 画面を更新する
is_done は、完了状態を表します。
false = 未完了
true = 完了
削除する流れ
1. 削除ボタンを押す
2. 確認画面を表示する
3. キャンセルなら何もしない
4. 削除するならidを使って削除する
5. 一覧を読み込み直す
削除するときは、必ずどのTodoを削除するかを確認します。
idで対象を指定する
同じタイトルのTodoがあっても、id があれば正しく削除できます。
13-5. 最後に動作確認する
アプリは、作ったら終わりではありません。
最後に、正しく動くか確認します。
動作確認をすると、ミスに気づけます。
最低限確認すること
次の操作を順番に確認します。
| 確認項目 | 見るポイント |
|---|---|
| Todoを追加できるか | 入力した内容が保存されるか |
| 一覧に表示されるか | 保存後に画面へ出るか |
| アプリを開き直しても残るか | データベースに保存されているか |
| 完了状態を切り替えられるか | falseとtrueが変わるか |
| 削除できるか | idで正しく削除できるか |
| 空のTodoを防げるか | 何も入力せず保存できないか |
| データが空のとき表示があるか | 真っ白にならないか |
| エラー時の表示があるか | 失敗した理由が分かるか |
この表を使って、1つずつ確認します。
動作確認のコツ
動作確認では、普通の使い方だけでなく、少し意地悪な使い方も試します。
空のまま追加ボタンを押す
同じTodoを何度も追加する
チェックを何回も押す
削除をキャンセルする
削除したあとに一覧を確認する
アプリを閉じて開き直す
このように確認すると、実際に使う人が困りそうな部分に気づけます。
エラーが出たときの考え方
エラーが出たら、まず分けて考えます。
画面の問題？
入力の問題？
保存処理の問題？
読み込み処理の問題？
データベースの問題？
ログインの問題？
全部を一気に直そうとすると混乱します。
まずは、どこで止まっているのかを確認します。
インストールや準備について
この章では、新しいインストール作業はありません。
実装に進む場合は、これまでと同じ準備を使います。
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
この章では、アプリを完成させるための考え方を整理することが目的です。
まずは、1画面・1テーブル・基本CRUDだけで完成させましょう。
13-6. この章のまとめ
この章では、小さなTodoアプリを完成させるための流れを整理しました。
アプリを作るときは、まず完成イメージを決めます。
何を入力するか
何を表示するか
何を保存するか
どんな操作ができるか
次に、必要な画面を整理します。
入力欄
追加ボタン
Todo一覧
チェックボックス
削除ボタン
そのあと、必要なデータを整理します。
id
title
is_done
created_at
updated_at
最後に、CRUDをつなげます。
追加する
表示する
更新する
削除する
小さくても最後まで動くアプリを作ると、アプリ開発の全体像が見えてきます。
まずは、完璧なアプリではなく、最後まで動く小さなアプリを完成させることを目標にしましょう。