CONTENT
ここから
この章で学ぶこと
この章では、Flutterアプリとデータベースが、それぞれ何を担当しているのかを整理します。
最初に覚えることは、これだけです。
Flutter = 画面を作る
データベース = データを保存する
アプリは、画面だけでも動いているように見えます。
でも、メモ・Todo・予約・ランキングのように、データをあとから使いたい場合は、データベースと連携する必要があります。
4-1. Flutterは画面を作る役割
Flutterは、アプリの画面を作るための道具です。
例えば、次のようなものを作れます。
文字
ボタン
入力フォーム
一覧表示
カードUI
画面切り替え
Todoアプリなら、Flutterはこのような画面を作ります。
タスク入力欄
保存ボタン
Todo一覧
完了チェック
削除ボタン
つまり、Flutterはユーザーが見る部分・触る部分を担当します。
ユーザーが見る画面
ユーザーが押すボタン
ユーザーが入力するフォーム
↓
Flutterの役割
4-2. データベースはデータを保存する役割
データベースは、アプリで使う情報を保存する場所です。
Todoアプリなら、次のようなデータを保存します。
タスク名
完了状態
作成日時
誰のタスクか
例えば、データベースにはこのような形で保存されます。
| id | タスク名 | 完了状態 | 作成日 |
|---|---|---|---|
| 1 | レポートを書く | 未完了 | 2026-06-04 |
| 2 | 買い物に行く | 完了 | 2026-06-04 |
Flutterが画面を作り、データベースが中身を保存します。
Flutter
↓
見た目を作る
データベース
↓
情報を保存する
4-3. アプリからデータベースへ送る流れ
ユーザーがアプリで入力した内容は、データベースに送って保存します。
Todoアプリで考えると、流れはこうです。
1. ユーザーがタスク名を入力する
2. 保存ボタンを押す
3. Flutterが入力内容を受け取る
4. データベースへ送る
5. データベースに保存される
例えば、ユーザーがこう入力します。
レポートを書く
保存ボタンを押すと、データベースに保存されます。
タスク名：レポートを書く
状態：未完了
作成日：今日
これで、アプリを閉じてもデータを残せます。
保存のイメージ
Flutterの入力フォーム
↓
保存ボタン
↓
データベースへ送信
↓
保存完了
難しく考えなくて大丈夫です。
最初は、
画面で入力した内容を、保存場所に送る
と考えればOKです。
4-4. データベースからアプリへ読み込む流れ
保存したデータは、あとから読み込んで画面に表示します。
Todoアプリなら、流れはこうです。
1. アプリを開く
2. Flutterがデータベースに問い合わせる
3. データベースからTodo一覧を受け取る
4. Flutterが画面に表示する
例えば、データベースに次のデータがあるとします。
レポートを書く
買い物に行く
英単語を覚える
Flutterは、このデータを読み込んで、画面に一覧表示します。
□ レポートを書く
□ 買い物に行く
□ 英単語を覚える
読み込みのイメージ
データベース
↓
保存済みデータを取り出す
↓
Flutterに渡す
↓
画面に表示する
アプリを開いたときに前のデータが表示されるのは、この読み込み処理があるからです。
4-5. 画面・処理・保存場所を分けて考える
アプリ開発では、3つに分けて考えると分かりやすいです。
画面
処理
保存場所
それぞれの役割はこちらです。
| 役割 | 内容 | 例 |
|---|---|---|
| 画面 | ユーザーが見る部分 | 入力欄、ボタン、一覧 |
| 処理 | データをどう扱うか | 保存する、読み込む、削除する |
| 保存場所 | データを残す場所 | データベース |
Todoアプリなら、このようになります。
画面
↓
タスク入力欄、保存ボタン、Todo一覧
処理
↓
入力内容を受け取る、保存する、一覧を読み込む
保存場所
↓
Todoテーブル
この分け方が大事な理由
画面・処理・保存場所を分けて考えると、エラーが起きたときに原因を探しやすくなります。
例えば、Todoが表示されない場合です。
画面の問題？
↓
表示するコードが間違っているかも
処理の問題？
↓
読み込み処理が動いていないかも
保存場所の問題？
↓
データベースにデータが入っていないかも
このように、どこで問題が起きているかを分けて考えられます。
Flutterとデータベース連携の全体像
全体の流れは、とてもシンプルです。
ユーザーが入力する
↓
Flutterが受け取る
↓
データベースに保存する
↓
必要なときに読み込む
↓
Flutterが画面に表示する
図で考えると、こうです。
ユーザー
↓
Flutterアプリ
↓
データベース
↓
Flutterアプリ
↓
ユーザーに表示
つまり、Flutterとデータベースはセットで動きます。
具体例：Todoを追加する場合
Todoを追加する場合の流れです。
1. ユーザーが「レポートを書く」と入力
2. 保存ボタンを押す
3. Flutterが文字を受け取る
4. データベースに保存する
5. 保存後、Todo一覧を更新する
このとき、Flutterだけではデータを長く残せません。
データベースに保存することで、次にアプリを開いても表示できます。
具体例：Todo一覧を表示する場合
Todo一覧を表示する場合の流れです。
1. アプリを開く
2. Flutterがデータベースに「Todoをください」と聞く
3. データベースがTodo一覧を返す
4. FlutterがListViewなどで表示する
画面に出ている一覧は、データベースから読み込んだデータです。
よく使う言葉
この章で出てくる大事な言葉です。
| 言葉 | 意味 |
|---|---|
| 保存 | データを残すこと |
| 読み込み | 保存したデータを取り出すこと |
| 送信 | Flutterからデータベースへ送ること |
| 取得 | データベースからFlutterへ受け取ること |
| 表示 | データを画面に出すこと |
まずは、これだけで十分です。
インストールや準備について
この章では、まだインストール作業はしません。
ただし、今後の実装では、以下を使います。
| 目的 | 使うもの |
|---|---|
| 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
この章では、まだ登録やインストールをしなくて大丈夫です。
まずは、Flutterとデータベースの役割分担を理解しましょう。
4-6. この章のまとめ
この章では、Flutterアプリとデータベースの関係を整理しました。
Flutterは、画面を作る役割です。
データベースは、データを保存する役割です。
Flutter
↓
ユーザーが見る画面を作る
データベース
↓
あとから使うデータを保存する
アプリからデータベースへ送ると、データを保存できます。
データベースからアプリへ読み込むと、保存したデータを画面に表示できます。
最後に、アプリは次の3つに分けて考えると分かりやすいです。
画面
処理
保存場所
この考え方が分かると、Todoアプリ、メモアプリ、予約アプリ、在庫管理アプリなど、いろいろなアプリに応用できます。