AIを使ったアプリ開発で学ぶCRUD

概要

ここでは、データに対する基本的な操作である「CRUD」について、簡単なアプリ開発を通して説明します。

CRUDとは

Web技術に触れる機会がある人ならもちろん、現代においては誰しもが日常生活でこれを実感できると思います。
CRUDとはデータに対して行う主たる操作の頭文字を並べたもので、それは以下の4つです。

• Create ：作成/保存

• Read   ：取得

• Update : 更新

• Delete ：削除

今回開発したアプリ

上記でも説明したように、CRUDが何かをイメージして理解するのはそこまで難しくないと思います。
しかし、具体的な処理について説明しようとすると意外と難しくないですか？

そこで、よりコードベースでCRUDを理解できるように、AIの力を借りてAI開発日記をアプリケーションとして実装しました。

AI開発日記

主な機能

概要でも説明したとおり、今回の目的はCRUDの裏側の処理をコードベースで理解することです。
これを実現するために、AI開発日記アプリでは以下の機能を実装しました。

Create

「今日やったこと、AIをどう使ったか、詰まったこと、学んだこと」をフォームに入力して内容をDBへ保存する。

Read

過去に記録した内容を画面に表示する。

Update

過去の日記を編集できる。

Delete

不要になった過去の日記を削除する。

CRUDを理解するための最小限かつ最大限の機能を詰め込みました。

開発ツール

実装にあたって使用したツールは以下の通りです。

フロントエンド：Next.js, React, TypeScript, MUI
バックエンド：Next.js Route Handler, Prisma
DB：PostgreSQL, Docker

これによってCRUDについて理解しつつ、「画面 → API → DB」の流れも掴めます。