🏫9時限目「CRUD・Create・Read・Update・Deleteとは？」【🍞Bakery Hubで学ぶPython・Webアプリ開発】

はじめに

こんにちは、tosane932です。

普段はトラックドライバーとして働きながら、PythonやWeb開発を学んでいます。

これまでこのシリーズでは、自分で開発している sales_data_app の実際のコードを教材にして、分からないところを基礎から掘り直してきました。

その sales_data_app も、商品登録・日次売上・売上分析だけでなく、店舗メモ・発注・タスクなど機能が増えてきました。

最初は売上管理アプリとして作っていましたが、役割も少しずつ広がってきたので、Bakery Hub へ改名しました。

なぜBakeryHubなのか❓️

商品登録や売上管理だけでなく、発注・メモ・タスクなど、パン屋の仕事で使う機能が1つの場所に集まってきたからです。

「売上管理アプリ」というより、パン屋の業務をまとめて扱う 拠点（Hub） に近くなってきたので、この名前にしました。

今後も Bakery Hub として、パン屋の仕事で使う機能を考え、増やしていければと思っています。

それに合わせて、この基礎学習シリーズも今回から、

「Bakery Hubで学ぶPython・Webアプリ開発」

へ変更しました。

• GitHub
  https://github.com/tosane932/sales_data_app

• Guest Demo
  https://bakery-salesdata.onrender.com/

Render上で公開しているため、初回アクセス時は画面が表示されるまで少し時間がかかる場合があります。

では早速9時限目のテーマですが……

今回学ぶのは CRUD です。

🐹「ここからがスタートラインだ」

CRUDは、Webアプリでデータを扱うときの基本になる考え方です。

今回は Bakery Hubの店舗メモツール を教材にして、

• Create
• Read
• Update
• Delete

の4つが、実際の画面とコードの中でどう使われているのかを見ていきます。

---

📝 今回の教材は「店舗メモツール」

Bakery Hubには、売上管理とは別に 店舗メモツール があります。

店舗で使うメモを、

• 追加する
• 一覧で見る
• 編集する
• ゴミ箱へ移す
• 復元する
• 完全に削除する

といった操作ができます。

メモ帳やTODOアプリは、Web開発を学び始めたときによく登場する題材だと思います。

僕自身も改めてコードを見てみると、

🐹「これ、Webアプリの基本がかなり詰まってるな」

となりました。

今回はその中でも CRUD を見ていきます。

図1：店舗メモツールの一覧画面です。5件のメモが表示されており、ここから新しいメモの追加・表示・編集・削除へ進めます。

---

CRUDとは？

CRUDは、データを扱うときの基本的な4つの操作をまとめた言葉です。

名前	意味	店舗メモで考えると
Create	作る	新しいメモを追加する
Read	読む	保存されたメモを見る
Update	更新する	メモを書き直す
Delete	削除する	メモを削除する

頭文字を並べると、

Create
Read
Update
Delete

↓
CRUD

となります。

CRUDはPythonの構文ではありません。

Webアプリやデータベースでデータを扱うときによく使われる考え方です。

今回はPython・Flask・SQLAlchemyを使って、Bakery HubではCRUDがどう実装されているのかを見ていきます。

🐹「新しいPython文法じゃないのか」

今回はそこが、今までの授業との少し大きな違いです。

---

まずは画面の操作と結びつける

店舗メモで考えると、かなり分かりやすいです。

メモを書く
   ↓
Create

メモを見る
   ↓
Read

メモを書き直す
   ↓
Update

メモを削除する
   ↓
Delete

画面上では普段何気なくやっている操作ですが、裏側ではそれぞれ処理があります。

ここから実際のコードを見てみます。

---

① Create ― データを作る

まずは Create。

新しいメモを追加する処理です。

教材の住所

shop_memos.py
↓
create_memo()

実際のコードの一部です。

db.session.add(
    ShopMemo(
        dataset_id=locked_dataset.id,
        title=title,
        body=body,
    )
)
db.session.commit()

初めて見ると少し長く感じます。

まず、

ShopMemo(
    dataset_id=locked_dataset.id,
    title=title,
    body=body,
)

で、新しいメモのデータを作っています。

そして、

db.session.add(...)

で保存する対象として追加し、

db.session.commit()

で変更をデータベースへ反映しています。

db.session や commit() の詳しい仕組みは、データベースを扱う授業で改めて掘ります。

今回は 「Createでは新しいデータを作って保存している」 ところを見ます。

ここには、

ShopMemo(...)

があります。

5時限目で学んだ クラスとインスタンス を思い出します。

あのときは、

クラスとは？
インスタンスとは？

を見ました。

今回はそれが、

「新しいメモのデータを作る」

という実際の処理につながっています。

🐹「前に学んだやつが普通に働いてる」

🐹 ミニ問題①

次のコードは、CRUDのどれに一番近いでしょう？

db.session.add(
    ShopMemo(
        title=title,
        body=body,
    )
)

答えを見る

Create

新しい ShopMemo を作り、保存する対象として追加しているためです。

---

② Read ― データを読む

次は Read。

保存されているメモを取得して、一覧として表示します。

教材の住所

shop_memos.py
↓
render_memos()

まず、

memo_query = ShopMemo.query.filter_by(
    dataset_id=current_dataset.id,
)

で、表示するメモを探すための処理を作っています。

その後、

memos = [] if search_is_invalid else memo_query.all()

でデータを取得しています。

ここにある、

.all()

では、条件に合うデータをまとめて取得しています。

取得した memos は、

render_template(
    template_name,
    memos=memos,
    ...
)

のようにHTML側へ渡されています。

大まかな流れを見ると、

データベース
↓
メモを取得
↓
Python
↓
HTMLへ渡す
↓
画面にメモ一覧が表示される

となっています。

今回はCRUDを見る授業なので、SQLAlchemyの query や filter_by() の詳細までは掘りません。

このあたりも後で、データベースを扱う授業として学び直したい部分です。

🐹 ミニ問題②

店舗メモを開いたとき、保存済みのメモが一覧で表示されました。

これはCRUDのどれでしょう？

答えを見る

Read

保存されているデータを読み取って表示しているためです。

---

③ Update ― データを更新する

次は Update。

すでに存在しているメモを書き換えます。

教材の住所

shop_memos.py
↓
edit_memo()

実コードを見ると、

memo.title = title
memo.body = body
memo.updated_at = utc_now()
db.session.commit()

となっています。

ここは比較的、そのまま読めます。

memo.title = title

タイトルを書き換える。

memo.body = body

本文を書き換える。

memo.updated_at = utc_now()

更新日時を書き換える。

そして最後に、

db.session.commit()

で変更を反映しています。

1時限目で学んだ、

変数 = 値

という代入も、実際のWebアプリの中ではこういうところで登場します。

もちろん裏側にはSQLAlchemyがありますが、Pythonコードとして見ると意外と読めます。

🐹「Updateって聞くと難しそうだけど、値を書き換えてるのか」

図2：既存のメモを開いた画面です。本文を変更すると、裏側では取得したメモの内容を新しい値へ更新します。

🐹 ミニ問題③

次のコードはCRUDのどれでしょう？

memo.title = title
memo.body = body
db.session.commit()

答えを見る

Update

すでに存在している memo の内容を書き換えているためです。

---

④ Delete ― データを削除する

最後は Delete。

ただし、Bakery Hubの店舗メモには少し面白いところがあります。

普段画面から「削除」しても、いきなりデータを完全削除しているわけではありません。

まず ゴミ箱へ移動 します。

ゴミ箱へ移す処理

教材の住所は、

shop_memos.py
↓
move_to_trash()

です。

実コードを見ると、

deleted_at = utc_now()
memo.deleted_at = deleted_at
memo.updated_at = deleted_at
db.session.commit()

となっています。

あれ？

db.session.delete(memo)

がありません。

ここではデータそのものを消さず、

deleted_at

に削除した日時を入れることで、

「このメモは削除済み」

という状態にしています。

これは 論理削除（Soft Delete） と呼ばれる方法です。

画面上では「削除」に見えても、内部で本当にデータを消しているとは限りません。

Bakery Hubの店舗メモでは、通常の削除操作では一度ゴミ箱へ移動します。

ここでも、8時限目で学んだ None が出てきます。

通常のメモでは、

deleted_at = None

削除すると、

deleted_at = 削除した日時

となります。

そしてゴミ箱から復元するときは、

memo.deleted_at = None

へ戻しています。

🐹「None、また出てきた」

前に学んだものが、別の処理でも少しずつつながってきます。

🐹 ミニ問題④

次の処理では、メモのデータそのものを完全に消しているでしょうか？

deleted_at = utc_now()
memo.deleted_at = deleted_at
db.session.commit()

答えを見る

まだ完全には削除していません。

deleted_at に削除日時を入れて、「削除済みのメモ」として扱っています。

店舗メモでは、この状態のメモがゴミ箱に表示されます。

---

では、本当のDeleteはどこ？

ゴミ箱の中から 完全に削除 するときです。

教材の住所

shop_memos.py
↓
delete_memo()

実コードです。

db.session.delete(memo)
db.session.commit()

ここで、

db.session.delete(memo)

が登場します。

つまりBakery Hubでは、

画面から削除
↓
deleted_at に日時を入れる
↓
ゴミ箱へ

さらに完全削除
↓
db.session.delete()
↓
データを削除

という2段階になっています。

図3：ゴミ箱では削除済みメモと削除日時を確認できます。「復元する」と「完全に削除」を分け、誤って消したメモを戻せるようにしています。

🐹 ミニ問題⑤

次のコードはCRUDのどれでしょう？

db.session.delete(memo)
db.session.commit()

答えを見る

Delete

今回は memo を完全に削除する処理です。

---

CRUDを店舗メモ全体で見る

ここまでをまとめます。

＋から新しいメモを作る
        ↓
      Create

メモ一覧を表示する
        ↓
       Read

メモを書き直す
        ↓
      Update

ゴミ箱から完全削除する
        ↓
      Delete

コード側で簡単に見ると、

# Create
db.session.add(memo)

# Read
memo_query.all()

# Update
memo.body = body

# Delete
db.session.delete(memo)

それぞれコードの形は違います。

でも画面上の操作と結びつけると、

何のための処理なのか

が少し見えやすくなりました。

---

CRUDを作ったあと、UI/UXも見直した

店舗メモツールは、CRUDが動けばそこで完成というわけではありませんでした。

実際にスマートフォンで触ってみると、

一覧でもっと多くのメモを見たい

メモを開いたら、そのまま書きたい

削除したメモと通常のメモを分かりやすくしたい

など、使ってみて気づく部分が出てきました。

そこで、最近は店舗メモの UI/UXも何度か見直しています。

メモ一覧をコンパクトに

現在のスマートフォン画面では、

• タイトル
• 本文の一部
• 日付

をコンパクトなカードにまとめています。

今回の図1では、1画面に5件のメモを確認できます。

さらに上部には、

• 検索
• 更新日 / 作成日の並び替え
• ゴミ箱

を置き、右下の ＋ボタン から新しいメモを追加できるようにしています。

機能を増やすだけでなく、

「普段使うときに、どこに何があると分かりやすいか」

も考えるようになりました。

---

スマホでは「メモを書く」ことを中心に

図2のように、スマートフォンでメモを開くと、かなりシンプルな画面になります。

メモ帳として使うなら、

タイトル欄はどこ？

保存ボタンはどこ？

と毎回考えるより、まず本文を書けた方が使いやすいと考えました。

現在のスマートフォン版では、本文からタイトルを作りながら、編集内容を自動保存する形にしています。

画面としてはかなり単純ですが、その裏側では、

入力する
↓
JavaScript
↓
Flaskへ送信
↓
メモを更新
↓
保存

という処理があります。

このあたりは、今後 非同期通信やJSON を学ぶときの教材にもできそうです。

🐹「見た目が簡単になると、裏側まで簡単になるとは限らない」

これは確かにそうでした。

---

ゴミ箱も「削除する場所」だけではなくした

ゴミ箱のUIも見直しました。

現在は、

• ゴミ箱に何件あるのか
• どのメモを削除したのか
• いつ削除したのか
• 復元する
• 完全に削除する
• ゴミ箱を空にする

を画面上で確認できます。

特に、

「復元する」

と

「完全に削除」

は、操作の意味がかなり違います。

そのため、ボタンも分けています。

完全削除するときには、

このメモを完全に削除しますか？

と確認してから削除するようにしています。

CRUDの Delete は1文字ですが、実際のアプリでは、

削除する
↓
間違えていないか
↓
戻せるのか
↓
本当に消すのか

まで考える必要がありました。

ここはコードだけ見ていたときには、あまり意識していなかった部分です。

---

CRUDは店舗メモだけの話ではない

ここで気づいたことがあります。

CRUDは店舗メモだけではありません。

Bakery Hubの売上管理側でも、

商品を登録する
→ Create

商品を見る
→ Read

商品情報を変更する
→ Update

商品を削除する
→ Delete

と考えることができます。

発注やタスクも同じです。

つまりCRUDは、

特定のアプリだけで使うものではなく、データを扱う多くのWebアプリに共通する基本

ということになります。

メモ帳やTODOアプリが初心者向け教材としてよく登場する理由も、少し分かった気がします。

小さい機能の中に、Webアプリの基本がまとまっているからです。

---

Guest Demoでも触れます

今回使った店舗メモツールは、Bakery HubのGuest Demoから実際に触ることができます。

記事を読んだあとに、

5件くらいメモを作って、追加・表示・編集・削除を試してみてください。

例えば、

新しいメモを追加する
↓
一覧に表示される

メモを開いて内容を変更する
↓
一覧へ戻って確認する

メモをゴミ箱へ移す
↓
ゴミ箱を開く

復元してみる
↓
もう一度ゴミ箱へ移す

完全に削除する

と触ってみると、今回のCRUDが画面上でも確認できます。

Guest Demo
https://bakery-salesdata.onrender.com/

Guest Demoには、個人情報・機密情報・実際のデータなどは入れないでください。

確認用として、架空のメモやテスト用データで試してください。

実際に画面を操作したあとでコードを見ると、

🐹「さっき押したボタンの裏で、これが動いてたのか」

と少し見え方が変わるかもしれません。

---

1〜8時限目で学んだものも消えていない

今回CRUDという新しい考え方を見ましたが、コードの中にはこれまで学んだPython基礎が普通に残っています。

たとえば、

if validation_error is not None:

には8時限目の None と is not。

title = raw_title.strip()

には7時限目の strip()。

ShopMemo(...)

には5時限目のクラスとインスタンス。

そして、

def create_memo():

には3時限目の関数があります。

新しいことを学ぶたびに、前に学んだものが不要になるわけではありません。

実際のアプリでは、いくつもの基礎が組み合わさって1つの機能になっています。

1〜8時限目は、ここを読むための準備でもあったのかもしれません。

🐹「ここからがスタートラインだ」

やっぱり言われました。

---

今回学んだこと

CRUD

データを扱う基本操作をまとめた考え方です。

Create
Read
Update
Delete

Create

新しいデータを作る。

Bakery Hubでは、

db.session.add(...)

などが登場しました。

Read

保存されているデータを取得する。

memo_query.all()

でメモを取得していました。

Update

すでに存在するデータを書き換える。

memo.title = title
memo.body = body

のような処理がありました。

Delete

データを削除する。

完全削除では、

db.session.delete(memo)

が使われています。

また店舗メモでは、すぐ完全削除せず、deleted_at を使って一度ゴミ箱へ移す処理もありました。

---

おわりに

今回は、店舗メモツールを教材にして CRUD を見てみました。

これまでの授業では、

このPythonコードは何を意味しているのか？

を中心に見てきました。

今回はそこから一歩進んで、

このコードはWebアプリの中で何の役割を持っているのか？

を見る授業になりました。

さらに、CRUDを実装したあとにも、

「動く」から「使いやすい」へ

UI/UXを何度も直してきました。

もちろん今回出てきた、

• SQLAlchemy
• db.session
• データベース
• Flaskのroute
• GET / POST
• 論理削除
• JavaScript
• 非同期通信

などを、すべて理解したわけではありません。

僕自身、まだ分からないことは大量にあります。

だから今回も、

CRUDという言葉を1記事で完全に理解すること

ではなく、

Bakery Hubの中で実際にどう使われ、画面につながっているのかを一度確認できたこと

を大事にしたいと思います。

これからもアプリのコードを読みながら、

🐹「これ何やってるんだ？」

となったところを掘っていきます。

---

📚️ 基礎学習シリーズ

🏫1時限目

「変数・データ型・比較演算子・if文とは？」

🏫2時限目

「リスト・辞書・set・for文とは？」

🏫3時限目

「関数・引数・return・関数の呼び出し・型ヒントとは？」

🏫4時限目

「モジュール・import・例外・try・exceptとは？」

🏫5時限目

「クラス・インスタンス・init・self・属性とは？」

🏫6時限目

「f文字列・アンパック・リスト内包表記・joinとは？」

🏫7時限目

「strip・len・splitlines・スライスとは？」

🏫8時限目

「None・is・is not・isinstanceとは？」

🏫9時限目

「CRUD・Create・Read・Update・Deleteとは？」