CRUDを理解しよう

この章で学ぶこと

この章では、アプリとデータベース連携で必ず出てくる CRUD を学びます。

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

CRUD = データを扱う基本操作

CRUDは、次の4つの頭文字です。

英語	読み方	意味
Create	クリエイト	追加する
Read	リード	読み込む
Update	アップデート	更新する
Delete	デリート	削除する

Todoアプリで考えると、こうです。

Todoを追加する
Todo一覧を見る
Todoを完了にする
Todoを削除する

これがCRUDです。

---

6-1. CRUDとは何か

CRUDとは、データベースに対して行う基本操作です。

難しく聞こえますが、普段のアプリ操作とほとんど同じです。

投稿する
見る
編集する
消す

これもCRUDです。

例えば、SNSならこうです。

操作	SNSの例
Create	投稿する
Read	投稿を見る
Update	投稿を編集する
Delete	投稿を削除する

つまり、CRUDはアプリの基本中の基本です。

---

Todoアプリで考えるCRUD

Todoアプリでは、CRUDはこうなります。

CRUD	Todoアプリの操作
Create	新しいTodoを追加する
Read	Todo一覧を表示する
Update	Todoを完了にする、内容を変える
Delete	Todoを削除する

この4つができると、Todoアプリとしてかなり形になります。

---

6-2. Create：データを追加する

Createは、データを追加する操作です。

Todoアプリなら、新しいタスクを作ることです。

レポートを書く

というTodoを追加します。

---

Createの流れ

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

イメージはこうです。

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

データベースには、このように追加されます。

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

---

Createで大事なこと

Createで大事なのは、保存するデータを決めることです。

Todoなら、最低限これが必要です。

title：タスク名
is_done：完了状態
created_at：作成日時

最初は、タスク名だけ入力して、他は自動で入れる形でもOKです。

---

6-3. Read：データを読み込む

Readは、保存したデータを読み込む操作です。

Todoアプリなら、Todo一覧を表示することです。

---

Readの流れ

1. アプリを開く
2. Flutterがデータベースに問い合わせる
3. todosテーブルからデータを取得する
4. Flutterの画面に一覧表示する

画面では、こう見えます。

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

この一覧は、データベースから読み込んだデータです。

---

Readで大事なこと

Readでは、次のことを考えます。

どのデータを読み込むか
どんな順番で表示するか
読み込み中は何を表示するか
データが空のときは何を表示するか

例えば、Todoがまだ1件もない場合は、こう表示すると親切です。

まだTodoがありません。
追加ボタンから作成しましょう。

データがない状態も、アプリでは大事です。

---

6-4. Update：データを更新する

Updateは、すでにあるデータを変更する操作です。

Todoアプリなら、未完了を完了にすることです。

---

Updateの例

変更前です。

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

チェックを押すと、こうなります。

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

このように、データの一部を変える操作がUpdateです。

---

Updateの流れ

1. チェックボックスを押す
2. FlutterがどのTodoか確認する
3. idを使って対象のTodoを指定する
4. is_doneをtrueに変える
5. 画面を更新する

大事なのは、id を使って更新することです。

id: 1 のTodoを更新する

このように指定すると、どのデータを変えるのかが分かります。

---

内容を編集するのもUpdate

完了状態だけではなく、タスク名を変えるのもUpdateです。

例えば、

レポートを書く

を、

英語のレポートを書く

に変える場合もUpdateです。

---

6-5. Delete：データを削除する

Deleteは、データを削除する操作です。

Todoアプリなら、不要になったTodoを消すことです。

---

Deleteの流れ

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

例えば、次のTodoを削除します。

id	title	is_done
2	買い物に行く	false

削除後は、一覧から消えます。

---

Deleteで注意すること

削除は、元に戻せないことがあります。

そのため、実際のアプリでは確認画面を出すことがあります。

本当に削除しますか？

確認ボタンを押してから削除すると、安全です。

---

6-6. アプリのほとんどはCRUDでできている

CRUDは、Todoアプリだけではありません。

多くのアプリは、CRUDを組み合わせてできています。

---

メモアプリ

操作	内容
Create	メモを作る
Read	メモ一覧を見る
Update	メモを編集する
Delete	メモを削除する

---

予約アプリ

操作	内容
Create	予約を作る
Read	予約一覧を見る
Update	予約時間を変更する
Delete	予約をキャンセルする

---

在庫管理アプリ

操作	内容
Create	商品を登録する
Read	商品一覧を見る
Update	在庫数を変更する
Delete	商品を削除する

---

SNSアプリ

操作	内容
Create	投稿する
Read	投稿を見る
Update	投稿を編集する
Delete	投稿を削除する

このように、アプリの基本はCRUDです。

追加する
見る
変える
消す

この4つが分かると、アプリ開発の見方が変わります。

---

CRUDを画面で考える

Todoアプリの画面に当てはめると、こうです。

画面の部品	CRUD
入力欄と保存ボタン	Create
Todo一覧	Read
チェックボックス	Update
削除ボタン	Delete

画面を見るときは、

このボタンはCRUDのどれ？

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

---

よくある勘違い

CRUDは難しい専門用語？

言葉は難しく見えますが、中身はシンプルです。

Create = 作る
Read = 見る
Update = 変える
Delete = 消す

日本語で考えれば大丈夫です。

---

Readは保存すること？

違います。

Readは、保存したデータを読むことです。

保存する = Create
読み込む = Read

ここは混ざりやすいので注意しましょう。

---

Deleteは画面から消すだけ？

画面から消すだけではなく、データベースから消す必要があります。

画面だけ消しても、データベースに残っていると、次に読み込んだときにまた表示されることがあります。

---

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

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

ただし、実装に進むときは、次の準備を使います。

Flutter SDK
Visual Studio Code
Supabase
supabase_flutter

参考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

この章では、まずCRUDの考え方だけ理解できればOKです。

---

6-7. この章のまとめ

この章では、CRUDを学びました。

CRUDは、データを扱う基本操作です。

Create：追加する
Read：読み込む
Update：更新する
Delete：削除する

Todoアプリでは、次のようになります。

Todoを追加する
Todo一覧を見る
Todoを完了にする
Todoを削除する

多くのアプリは、このCRUDを組み合わせてできています。

メモアプリ、予約アプリ、在庫管理アプリ、SNSアプリも、基本は同じです。

CRUDが分かると、アプリの仕組みが一気に見えやすくなります。