MENU

[Java 初心者学習] CRUDとは?(簡単なWeb開発例あり) – 0013

「CRUD (クラッド)」とは、システム開発においてデータベースを操作する際、最も基本となる4つの主要な機能の頭文字を並べた言葉です。今回はこの CRUD について簡単にお伝えします。

目次

CRUD

世の中のほとんどのデータ処理システムは、突き詰めるとこの CRUD の組み合わせ だけで成り立っています。

CRUD (概念) (ブログ) SQL HTTPメソッド
Create (作成) 新しい記事を書いて投稿する INSERT POST
Read (参照) 投稿された記事の一覧や詳細を表示する SELECT GET
Update (更新) 過去に書いた記事の本文を修正する UPDATE PUT / PATCH
Delete (削除) 不要になった記事を消去する DELETE DELETE

たとえば、ユーザーがブラウザで「ブログの投稿ボタン」を押したとき、裏側では以下のようなリレー形式で処理が走ります。

  • ブラウザから POST /articles という HTTPリクエスト が飛んでくる
  • 受け取った Spring Boot が、データをチェックして Java のオブジェクトを組み立てる
  • データベースに対して INSERT INTO articles … という SQL を発行して保存する

このように、Webの入り口からデータベースの最深部に至るまで、すべての技術が CRUD という1本の軸で綺麗に貫かれていることが分かります。

Webアプリケーション開発は、HTTPメソッドをJavaのコードを経由してSQLへと翻訳するCRUDのパイプラインを作ることが主なものです。

CRUDの概念から基本アプリケーションを実装する

ユーザーがデータを入力し、一覧を確認するための画面を作成します。Thymeleaf の構文を使い、Java から渡されたリストデータをループ処理 (th:each) してテーブルに表示します。

  1. 表示・操作を行うHTMLファイル作成
  2. 画面遷移と登録・削除を制御するコントローラー作成
  3. アプリの起動と動作確認
  4. コンソールから裏側のDB状態確認

ここからの操作は次の別記事までを実施した後の流れになります。詳しくは以下のリンクからご確認ください。

表示・操作を行うHTMLファイル作成

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ToDo管理アプリ</title>
    <style>
        body { font-family: sans-serif; margin: 40px; }
        table { border-collapse: collapse; width: 400px; margin-top: 20px; }
        th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .delete-btn { color: red; text-decoration: none; }
    </style>
</head>
<body>
    <h1>ToDo管理アプリ</h1>

    <form action="/todo/add" method="post">
        <input type="text" name="title" placeholder="新しいタスクを入力" required>
        <button type="submit">追加</button>
    </form>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>タスク名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="task : ${taskList}">
                <td th:text="${task.id}">T000</td>
                <td th:text="${task.title}">ダミーのタスク</td>
                <td>
                    <a th:href="@{/todo/delete(id=${task.id})}" class="delete-btn">削除</a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

src/main/resources/templates に todo.html を作成します。このHTMLファイルに上記のコードを記述します。

画面遷移と登録・削除を制御するコントローラー作成

次に、上記のHTML画面を表示する処理、フォームから送られてきたデータをDBに保存する処理、そして削除リンクが押されたときにデータを消す処理をまとめたコントローラーを作成します。

package com.example.demo;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller // HTML画面を返すため @Controller を使用します
public class TodoController {

    @Autowired
    private TaskRepository taskRepository; // 先ほど作成したリポジトリを再利用します

    // 初期画面の表示(タスク一覧をDBから取得してHTMLに渡す)
    @GetMapping("/todo")
    public String index(Model model) {
        var tasks = taskRepository.findAll(); // 全件取得
        model.addAttribute("taskList", tasks); // HTMLの th:each="${taskList}" にデータを渡す
        return "todo"; // todo.html を表示
    }

    // タスクの追加処理(フォームからのPOST送信を受け付ける)
    @PostMapping("/todo/add")
    public String addTask(@RequestParam(name = "title") String title) {
        var id = "T" + (System.currentTimeMillis() % 1000);
        var task = new Task(id, title);
        
        taskRepository.save(task); // DBに保存
        
        // 登録完了後、二重送信を防ぐために一覧画面(/todo)へリダイレクト(再転送)します
        return "redirect:/todo";
    }

    // タスクの削除処理
    @GetMapping("/todo/delete")
    public String deleteTask(@RequestParam(name = "id") String id) {
        taskRepository.deleteById(id); // 指定されたIDのデータをDBから削除
        
        // 削除完了後、一覧画面へリダイレクトします
        return "redirect:/todo";
    }
}

com.example.demo パッケージの中に、新しく TodoController.java というクラスを作成し、上記コードを記述してください。

アプリの起動と動作確認

DemoApplication.java を [実行] -> [Java アプリケーション] で起動します。

ブラウザを開き http://localhost:8080/todo にアクセス。上記画像が表示されたら、以下の操作を行ってください。

  • 画面に入力欄と追加ボタン、および空のテーブルが表示されることを確認
  • 入力欄に任意のタスク名を入力し、追加ボタンを押した際、画面が切り替わり、下のテーブルに行が追加されるかを確認
  • 追加された行の右側にある削除リンクをクリックした際、その行がテーブルから消去されるかを確認

コンソールから裏側のDB状態確認

インメモリDB (H2 Database) に、実際にデータが書き込まれているかをブラウザ上の管理画面から直接確認します。

ブラウザで http://localhost:8080/h2-console にアクセスしてください。上記画面が出るので JDBC URL: 欄に jdbc:h2:mem:testdb を入力してください。入力後、パスワードは未入力で Connect をクリックします。

コンソール画面にログイン出来たら 左上の DEMO をクリック。右側に SELECT * FROM TASK が表示されたら RUN で実行してください。SELECT文の下の箇所にテーブルが表示されれば完了です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次