CRUDは、アプリ開発でほぼ確実に出会うであろう「基本の4操作」をまとめた略語です。
Create / Read / Update / Delete の頭文字を取って CRUD と呼びます。
たとえば「ユーザー」や「投稿」や「商品」みたいな“データ”を扱うとき、
結局やりたいことはだいたいこの4つに収まると考えます。
CRUDとは？（Create / Read / Update / Delete）
CRUDは次の4つの操作を指します。
Create（作成する）
新しいデータを追加する操作です。
例
- 新しいユーザーを登録する
- 新しい投稿を作成する
- 商品データを登録する
Read（読み取る）
保存されているデータを取得して表示する操作です。
例
- ユーザー一覧を表示する
- 投稿の詳細ページを開く
- 商品情報を検索して表示する
Update（更新する）
すでに存在するデータの内容を変更する操作です。
例
- ユーザーのプロフィールを編集する
- 投稿内容を修正する
- 住所やパスワードを変更する
Delete（削除する）
不要になったデータを消す操作です。
例
- 投稿を削除する
- 退会してユーザー情報を削除する
- 商品を販売終了としてデータを消す（または非表示にする）
なぜCRUDが大事なのか
CRUDは「データを扱う機能の設計図」みたいなものです。
Webアプリでも業務システムでも、
画面やAPIを作るときに
この機能って、CRUDのどれ？
と整理できるようになると、
設計や実装の見通しが一気によくなると感じます。
CRUDとHTTPメソッドの関係
Webアプリでは、CRUDの各操作は HTTPメソッド とほぼ1対1で対応しています。
フロントエンドからサーバーに「何をしたいか」を伝えるのがHTTPメソッドです。
まずは対応関係をざっくり押さえると、次のようになります。
| CRUD | 操作内容 | 主に使われるHTTPメソッド |
|---|---|---|
| Create | 新しく作る | POST |
| Read | 読み取る | GET |
| Update | 更新する | PUT / PATCH |
| Delete | 削除する | DELETE |
この対応を知っているだけで、APIやネットワーク通信の意味がかなり読みやすくなります。
Create × POST
Create（作成）は、POSTメソッドで行うのが一般的です。
例
- ユーザー登録
- 新規投稿の作成
- フォーム送信でデータを保存する
POSTは「サーバーに新しいデータを送って、何かを生み出す」ためのメソッドです。
fetch("/api/posts", {
method: "POST",
body: JSON.stringify(newPost),
});
Read × GET
Read（読み取り）は、GETメソッドが使われます。
例
- 投稿一覧を取得する
- ユーザー詳細を表示する
- 検索結果を取得する
GETは「データを取得するだけ」の操作なので、
基本的にサーバー側のデータを変更しません。
fetch("/api/posts", {
method: "GET",
});
URLに ?id=1 のようなクエリを付けて条件を指定することもよくあると思います。
Update × PUT / PATCH
Update（更新）は、PUT または PATCH が使われます。
- PUT：データ全体を更新
- PATCH：一部だけ更新
fetch("/api/posts/1", {
method: "PATCH",
body: JSON.stringify({ title: "修正後タイトル" }),
});
Delete × DELETE
Delete（削除）は、そのまま DELETEメソッドです。
例
- 投稿を削除する
- アカウントを削除する
fetch("/api/posts/1", {
method: "DELETE",
});
削除ボタンを押すとDELETEリクエストが飛ぶ、
という対応関係になります。
初学者は「CRUDが一通り動くミニアプリ」を目標にするとよい？
初学者のうちは何を作ればいいか迷いがちですが、
CRUDが一通り動くミニアプリ を1つ完成させるのがおすすめだと見聞きしたことがあります。
CRUDを実装しようとすると、自然と次の要素に出会えます。
- 入力フォーム（Create）
- 一覧表示・詳細表示（Read）
- 編集フォーム・更新処理（Update）
- 削除ボタン・削除処理（Delete）
さらに余裕があれば、
- バリデーション
- 検索
- 並び替え
- ページネーション
なども学べると思います。
CRUDは、Webアプリ開発で必要になりやすい要素を
一通りまとめて練習できる題材のようですね。
今日の記事はここまでになります。
最後までご覧いただきありがとうございました。