Todoアプリでデータベース連携を考えようは医療関係者向けだけの内容ですか。

医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。

AI初心者でも読めますか。

はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。

サムネイル画像は必ず表示されますか。

はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。

Flutterアプリケーション開発概論のほかの章も読めますか。

はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。

Todoアプリでデータベース連携を考えよう | Flutterアプリとデータベース連携入門｜アプリのデータを残す仕組み | Flutterアプリケーション開発概論・生成AIオンライン教材

項目	内容
教材名	Flutterアプリケーション開発概論
章	Flutterアプリとデータベース連携入門｜アプリのデータを残す仕組み
節	Todoアプリでデータベース連携を考えよう
カテゴリ	Flutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
学習内容	生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

この章で学ぶこと

この章では、Todoアプリを例にして、データベース連携を考えます。

最初に覚えることは、これだけです。

Todoアプリ = データベース連携の練習にちょうどいい

なぜなら、Todoアプリにはアプリ開発の基本が全部入っているからです。

追加する
表示する
完了にする
削除する

この4つができると、メモアプリ、予約アプリ、在庫管理アプリ、日報アプリにも応用できます。

5-1. Todoアプリに必要なデータ

Todoアプリとは、「やること」を管理するアプリです。

例えば、次のようなものを登録します。

レポートを書く
買い物に行く
英単語を覚える
バイトのシフトを確認する

これらは、すべてデータです。

Todoアプリでは、最低限この情報が必要です。

データ	意味
タスク名	やることの内容
完了状態	終わったかどうか
作成日時	いつ作ったか

最初は、この3つだけで十分です。

Todoアプリで保存したい情報

例えば、1つのTodoはこのような形です。

タスク名：レポートを書く
完了状態：未完了
作成日時：2026-06-04 10:00

これをデータベースに保存すると、アプリを閉じてもあとから見られます。

5-2. タスク名・完了状態・作成日時を考える

Todoアプリでは、まず保存したい情報を決めます。

タスク名

タスク名は、やることの内容です。

レポートを書く
買い物に行く
英単語を覚える

Flutterでは、入力フォームに文字を入れて保存します。

TextFieldに入力
↓
保存ボタンを押す
↓
データベースに保存

完了状態

完了状態は、そのタスクが終わったかどうかです。

未完了
完了

プログラムでは、次のように考えることが多いです。

false = 未完了
true = 完了

例えば、

レポートを書く：false
買い物に行く：true

のように保存できます。

作成日時

作成日時は、そのTodoをいつ作ったかです。

2026-06-04 10:00

作成日時があると、あとから並び替えができます。

新しい順に表示
古い順に表示
今日作ったTodoだけ表示

Todoアプリを少し便利にするために、作成日時は入れておくと良いです。

5-3. Todoテーブルを設計してみよう

データベースでは、Todoを保存するための表を作ります。

この表を、Todoテーブルと呼びます。

テーブル名は、例えばこうです。

todos

todos は、Todoを複数保存する場所です。

最低限のTodoテーブル

最初は、この形で十分です。

カラム名	役割	例
`id`	データを見分ける番号	`1`
`title`	タスク名	`レポートを書く`
`is_done`	完了状態	`false`
`created_at`	作成日時	`2026-06-04 10:00`

データベースでは、1つのTodoが1行になります。

id	title	is_done	created_at
1	レポートを書く	false	2026-06-04 10:00
2	買い物に行く	true	2026-06-04 11:00
3	英単語を覚える	false	2026-06-04 12:00

この表を作ることで、Todoを保存できます。

idは何のためにある？

id は、データを見分けるための番号です。

例えば、同じ名前のタスクが2つある場合です。

レポートを書く
レポートを書く

名前だけでは、どちらを削除するのか分かりにくいです。

そこで、id を使います。

id: 1 のレポートを書く
id: 2 のレポートを書く

このように、id があると1件ずつ正確に扱えます。

5-4. 追加・表示・更新・削除の流れ

Todoアプリの基本操作は、4つです。

追加
表示
更新
削除

この4つをまとめて、CRUDと呼ぶことがあります。

難しい言葉ですが、意味はシンプルです。

操作	意味	Todoアプリの例
Create	追加する	Todoを作る
Read	読み込む	Todo一覧を見る
Update	更新する	完了状態にする
Delete	削除する	Todoを消す

Todoアプリは、この4つの練習にぴったりです。

追加する流れ

ユーザーがTodoを追加する流れです。

1. 入力欄にタスク名を書く
2. 保存ボタンを押す
3. Flutterが入力内容を受け取る
4. データベースに保存する
5. 一覧を更新する

例です。

入力：レポートを書く
↓
保存
↓
todosテーブルに追加

データベースには、次のように保存されます。

id	title	is_done
1	レポートを書く	false

表示する流れ

保存したTodoを画面に表示する流れです。

1. アプリを開く
2. Flutterがデータベースに問い合わせる
3. Todo一覧を受け取る
4. ListViewなどで表示する

画面には、このように表示されます。

□ レポートを書く
□ 英単語を覚える
☑ 買い物に行く

データベースから読み込むことで、アプリを閉じてもTodoが残ります。

更新する流れ

完了状態を変える流れです。

1. チェックボックスを押す
2. FlutterがどのTodoか確認する
3. is_doneをtrueに変える
4. データベースを更新する
5. 画面も更新する

例えば、

is_done: false

を、

is_done: true

に変えます。

これで、未完了から完了になります。

削除する流れ

Todoを削除する流れです。

1. 削除ボタンを押す
2. FlutterがどのTodoか確認する
3. idを使ってデータベースから削除する
4. 一覧から消える

削除するときに大事なのは、id です。

id: 3 のTodoを削除する

のように指定します。

同じ名前のTodoがあっても、id があれば正確に削除できます。

Todoアプリの全体像

Todoアプリとデータベースの関係は、次のようになります。

ユーザー
↓
Flutterの画面で入力
↓
保存ボタンを押す
↓
todosテーブルに保存
↓
Flutterが読み込む
↓
画面に一覧表示

この流れを理解できると、データベース連携の基本がかなり見えてきます。

画面とデータの対応

Todoアプリでは、画面とデータがつながっています。

画面	データ
入力欄	`title`
チェックボックス	`is_done`
Todo一覧	`todos` テーブル
削除ボタン	`id` を使って削除
作成日表示	`created_at`

アプリの画面を見たときに、

これはどのデータとつながっているのか？

と考えると、理解しやすくなります。

インストールや準備について

この章では、まだインストール作業はしません。

ただし、実装に進むときは以下を使います。

目的	使うもの
Flutterアプリ開発	Flutter SDK
コードを書く	Visual Studio Code
データベース	Supabase
FlutterからSupabaseへ接続	`supabase_flutter`

準備するときは、以下の公式ページを使うのがおすすめです。

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

この章では、Todoアプリに必要なデータを考えることが目的です。

まだインストールしなくて大丈夫です。

よくある勘違い

Todoの文字だけ保存すればよい？

最初は文字だけでも動きます。

でも、実際には完了状態や作成日時も必要になることが多いです。

title
is_done
created_at

この3つを入れておくと、Todoアプリとして使いやすくなります。

idはなくてもよい？

基本的には、id は必要です。

理由は、1件ずつ正確に扱うためです。

編集する
削除する
完了にする

こうした処理では、どのTodoかを区別する必要があります。

いきなり複雑なテーブルにするべき？

最初はシンプルで大丈夫です。

id
title
is_done
created_at

まずは、この4つで十分です。

あとから必要になったら、カラムを増やしていきます。

5-5. この章のまとめ

この章では、Todoアプリを例にして、データベース連携を考えました。

Todoアプリに必要な最低限のデータは、次の4つです。

id
title
is_done
created_at

Todoアプリの基本操作は、追加・表示・更新・削除です。

追加する
表示する
完了にする
削除する

この4つは、多くのアプリに共通する基本です。

Todoアプリでデータベース連携を学ぶと、メモアプリ、予約アプリ、在庫管理アプリなどにも応用できます。

Todoアプリでデータベース連携を考えよう

この節で学べること

目次

ここから