ゼロプロ～Season2【データベース入門編：2-3-4】簡単なCRUDアプリケーションの作成（例：ユーザー管理システム）

CRUDは、データベース操作の基本である「Create（作成）」「Read（読み取り）」「Update（更新）」「Delete（削除）」の略です。本記事では、PythonのFlaskを使った簡単なユーザー管理システムを例に、CRUDアプリケーションの作り方を解説します。

CRUDアプリケーションとは？
1. システムの概要
必要な環境
ステップ1: プロジェクトのセットアップ
1. ディレクトリ構造
ステップ2: データベースの準備
1. データベース作成コード
2. 実行手順
コード解説
1. app.py: Flaskアプリケーションの構築
2. HTMLテンプレート
実行手順
学習のポイント
まとめ

CRUDアプリケーションとは？

CRUDはデータ操作の基本となる以下の4つの操作を指します。

Create: データの作成
Read: データの読み取り
Update: データの更新
Delete: データの削除

システムの概要

ユーザー管理システムを例に以下の機能を実装します。

ユーザーを追加する（Create）
登録済みのユーザーを一覧表示する（Read）
ユーザー情報を編集する（Update）
ユーザーを削除する（Delete）

必要な環境

Pythonのインストール
Flaskのインストール
SQLiteデータベース（Python標準ライブラリ）

Flaskのインストールコマンド

pip install flask

ステップ1: プロジェクトのセットアップ

ディレクトリ構造

crud_app/
├── app.py
├── templates/
│   ├── index.html
│　 ├── create.html
│　 ├── update.html
│   └── delete.html
├─── static/
│   └── styles.css
└── init_db.py

ステップ2: データベースの準備

以下のコードでSQLiteデータベースを作成し、usersテーブルを準備します。

データベース作成コード

init_db.py: データベース作成

import sqlite3

def init_db():
    conn = sqlite3.connect('users.db')
    cursor = conn.cursor()
    cursor.execute('''CREATE TABLE IF NOT EXISTS users (
                        id INTEGER PRIMARY KEY,
                        name TEXT NOT NULL,
                        email TEXT NOT NULL UNIQUE
                    )''')
    conn.commit()
    conn.close()

if __name__ == '__main__':
    init_db()

実行手順

app.pyと同じディレクトリにデータベース作成用のスクリプト（init_db.py）を保存します。
・「Windows ＋ R」　→　「CMD」を入力しコマンドプロンプトを開く
・コマンドプロンプト内で「CD　（app.pyがあるパスを入力）」
ターミナルを開き、スクリプトを実行します：

python init_db.py

スクリプトの実行が完了すると、users.dbというファイルが作成されます。このファイルがSQLiteデータベースです。

コード解説

app.py: Flaskアプリケーションの構築

以下は、CRUD機能を実装したFlaskアプリケーションのサンプルコードです。

from flask import Flask, render_template, request, redirect
import sqlite3

app = Flask(__name__)

# データベースの初期化
DATABASE = 'users.db'

def init_db():
    with sqlite3.connect(DATABASE) as conn:
        conn.execute('''CREATE TABLE IF NOT EXISTS users (
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        name TEXT,
                        email TEXT
                    )''')

# ユーザー一覧の表示
@app.route('/')
def index():
    with sqlite3.connect(DATABASE) as conn:
        users = conn.execute("SELECT * FROM users").fetchall()
    return render_template('index.html', users=users)

# ユーザーの作成
@app.route('/create', methods=['GET', 'POST'])
def create():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        with sqlite3.connect(DATABASE) as conn:
            conn.execute("INSERT INTO users (name, email) VALUES (?, ?)", (name, email))
        return redirect('/')
    return render_template('create.html')

# ユーザー情報の更新
@app.route('/update/<int:id>', methods=['GET', 'POST'])
def update(id):
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        with sqlite3.connect(DATABASE) as conn:
            conn.execute("UPDATE users SET name = ?, email = ? WHERE id = ?", (name, email, id))
        return redirect('/')
    with sqlite3.connect(DATABASE) as conn:
        user = conn.execute("SELECT * FROM users WHERE id = ?", (id,)).fetchone()
    return render_template('update.html', user=user)

# ユーザーの削除
@app.route('/delete/<int:id>', methods=['POST'])
def delete(id):
    with sqlite3.connect(DATABASE) as conn:
        conn.execute("DELETE FROM users WHERE id = ?", (id,))
    return redirect('/')

if __name__ == '__main__':
    init_db()
    app.run(debug=True)

HTMLテンプレート

index.html: ユーザー一覧の表示

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー一覧</title>
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
</head>
<body>
    <h1>ユーザー一覧</h1>
    <a href="/create">新しいユーザーを作成</a>
    <table>
        <tr>
            <th>ID</th>
            <th>名前</th>
            <th>メール</th>
            <th>操作</th>
        </tr>
        {% for user in users %}
        <tr>
            <td>{{ user[0] }}</td>
            <td>{{ user[1] }}</td>
            <td>{{ user[2] }}</td>
            <td>
                <a href="/update/{{ user[0] }}">編集</a>
                <form action="/delete/{{ user[0] }}" method="post" style="display:inline;">
                    <button type="submit">削除</button>
                </form>
            </td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>

create.html: ユーザー作成フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー作成</title>
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
</head>
<body>
    <h1>新しいユーザーを作成</h1>
    <form method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required>
        <label for="email">メール:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">作成</button>
    </form>
</body>
</html>

update.html: ユーザー編集フォーム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー情報編集</title>
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
</head>
<body>
    <h1>ユーザー情報を編集</h1>
    <form method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" value="{{ user[1] }}" required>
        <label for="email">メール:</label>
        <input type="email" id="email" name="email" value="{{ user[2] }}" required>
        <button type="submit">更新</button>
    </form>
</body>
</html>

delete.html: 削除確認ページ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー削除確認</title>
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
</head>
<body>
    <h1>ユーザー削除確認</h1>
    <p>本当に削除しますか？</p>
    <form method="post">
        <button type="submit">削除する</button>
        <a href="/">キャンセル</a>
    </form>
</body>
</html>

styles.css: スタイルシート

body {
    font-family: Arial, sans-serif;
    margin: 20px;
    line-height: 1.6;
}

h1 {
    color: #333;
    text-align: center;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
}

th, td {
    padding: 10px;
    text-align: left;
}

a {
    text-decoration: none;
    color: blue;
}

a:hover {
    text-decoration: underline;
}

button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

実行手順

プロジェクトをセットアップ
- 上記構成に基づきファイルを作成します。
サーバーを起動 python app.py
ブラウザでアクセス
- http://127.0.0.1:5000/ にアクセスしてアプリケーションを確認します。
CRUD操作をテスト:
ユーザー追加: 「ユーザーを追加」ボタンをクリックし、フォームにデータを入力。
ユーザー編集: 「編集」リンクをクリックし、データを更新。
ユーザー削除: 「削除」ボタンをクリックしてレコードを削除。

学習のポイント

小さな機能から実装する:
- まずはデータの作成と表示から始める。
エラー処理を追加:
- 入力データの検証やエラーメッセージを実装する。
デザインを整える:
- CSSを使って、見やすいインターフェースを作成。

まとめ

CRUDアプリケーションは、データベース操作の基本を学ぶ上で非常に効果的です。今回のユーザー管理システムを基に、さらに複雑なアプリケーションを作成してみましょう。

次回は「RESTful APIの構築」について解説します。お楽しみに！