【Flask】メモ帳アプリを作ろう｜Chapter7-3

memo_app/
├── app/
│   ├── __init__.py          ← Flaskアプリケーションの初期化処理
│   ├── models.py            ← データベースのモデルクラスを定義
│   ├── forms.py             ← WTFormsで使うフォームを定義
│   └── memo/                ← メモ機能のルーティングとテンプレート
│       ├── __init__.py      ← Blueprintオブジェクトの作成と登録
│       ├── routes.py        ← ルーティングの定義（一覧・追加・削除）
│       └── templates/
│           └── memo/
│               ├── list.html   ← メモ一覧を表示するテンプレート
│               ├── form.html   ← メモを追加するフォームテンプレート
│               └── base.html   ← 基本となるHTMLレイアウト
├── config.py              ← 設定ファイル（DB設定など）
└── run.py                 ← アプリケーション起動用のエントリーポイント

import os
basedir = os.path.abspath(os.path.dirname(__file__))

class Config:
    # セキュリティ用の秘密鍵（フォームのCSRF保護などに使用）
    SECRET_KEY = os.environ.get('SECRET_KEY', 'dev_secret_key')
    
    # データベースの接続URI（環境変数がなければローカルのSQLiteファイルを使う）
    SQLALCHEMY_DATABASE_URI = os.environ.get('DATABASE_URI') \
        or 'sqlite:///' + os.path.join(basedir, 'memo_app.db')
    
    # SQLAlchemyの通知機能を無効化（警告回避のため）
    SQLALCHEMY_TRACK_MODIFICATIONS = False

from app import create_app

# Flaskアプリケーションの生成
app = create_app()

# アプリケーションの起動
if __name__ == "__main__":
    app.run(debug=True)

from flask import Flask, redirect
from flask_sqlalchemy import SQLAlchemy
from config import Config

db = SQLAlchemy()  # SQLAlchemyのインスタンス作成

def create_app():
    app = Flask(__name__, template_folder='templates')
    app.config.from_object(Config)  # 設定の読み込み
    db.init_app(app)  # アプリにDBを紐付ける

    with app.app_context():  # アプリのコンテキストで初期化処理
        from app.memo import bp as memo_bp
        app.register_blueprint(memo_bp, url_prefix='/memo')  # Blueprintの登録
        db.create_all()  # モデルに基づいてテーブルを作成

        @app.route('/')
        def root():
            return redirect('/memo/')  # トップアクセスはメモ一覧にリダイレクト

    return app

from flask_wtf import FlaskForm  # FlaskでWTFormsを使うための基底クラス
from wtforms import StringField, SubmitField  # テキスト入力欄と送信ボタンのフィールドをインポート
from wtforms.validators import DataRequired, Length  # 入力検証（バリデーション）用の関数

# MemoFormクラスは、メモの追加や編集に使用するフォームを定義する
class MemoForm(FlaskForm):
    # contentフィールド：メモ本文を入力するテキストボックス
    # ラベルは「内容」、空欄禁止（DataRequired）、最大200文字（Length）
    content = StringField('内容', validators=[DataRequired(), Length(max=200)])

    # submitフィールド：送信ボタン。ラベルは「送信」
    submit = SubmitField('送信')

from app import db  # SQLAlchemyのインスタンスをインポート
from datetime import datetime  # 現在日時を扱うための標準ライブラリ

# Memoクラスは、データベースの'memo'テーブルに対応するモデルクラス
class Memo(db.Model):
    # idカラム：各メモを一意に識別するための主キー（自動的に連番で振られる）
    id = db.Column(db.Integer, primary_key=True)

    # contentカラム：メモの本文を保存するフィールド（最大200文字、空欄禁止）
    content = db.Column(db.String(200), nullable=False)

    # timestampカラム：メモの作成時刻を保存。デフォルトで現在の日時を自動設定
    timestamp = db.Column(db.DateTime, default=datetime.utcnow)

    # __repr__メソッド：デバッグ時などにインスタンスを分かりやすく表示するための文字列表現
    def __repr__(self):
        return f'<Memo {self.id}>'

from flask import Blueprint

# Blueprintオブジェクトを生成。名前は 'memo'、テンプレートの場所を指定
bp = Blueprint('memo', __name__, template_folder='templates')

# ルーティング定義を読み込むことで、このBlueprintにルートを紐づける
from app.memo import routes

# memo/routes.py
from flask import render_template, redirect, url_for, flash, request, abort
from app.memo import bp  # Blueprintインスタンス
from app import db       # データベース操作用のSQLAlchemyインスタンス
from app.models import Memo  # データベースのモデルクラス
from app.forms import MemoForm  # WTFormsによる入力フォーム

@bp.route('/')
def index():
    # メモを作成日時の降順で取得して一覧表示
    memos = Memo.query.order_by(Memo.timestamp.desc()).all()
    return render_template('memo/list.html', memos=memos)

@bp.route('/add', methods=['GET', 'POST'])
def add():
    form = MemoForm()  # フォームオブジェクトの作成
    if form.validate_on_submit():  # POSTかつバリデーション通過時の処理
        memo = Memo(content=form.content.data)  # フォームからメモを生成
        db.session.add(memo)  # データベースに追加
        db.session.commit()   # 変更を保存
        flash('メモを追加しました。')  # メッセージ表示
        return redirect(url_for('memo.index'))  # 一覧ページへ移動
    return render_template('memo/form.html', form=form, title='メモ追加')  # フォーム表示

@bp.route('/<int:id>/edit', methods=['GET', 'POST'])
def edit(id):
    memo = Memo.query.get_or_404(id)  # メモをIDで取得。なければ404
    form = MemoForm(obj=memo)  # フォームに既存データを渡す
    if form.validate_on_submit():
        memo.content = form.content.data  # データを更新
        db.session.commit()
        flash('メモを更新しました。')
        return redirect(url_for('memo.index'))
    return render_template('memo/form.html', form=form, title='メモ編集')

@bp.route('/<int:id>/delete', methods=['POST'])
def delete(id):
    memo = Memo.query.get_or_404(id)  # メモを取得。なければ404
    db.session.delete(memo)  # メモを削除
    db.session.commit()      # 変更を保存
    flash('メモを削除しました。')
    return redirect(url_for('memo.index'))

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>メモ帳アプリ{% block title %}{% endblock %}</title>
</head>
<body>
  {# Flashメッセージ（成功・エラー通知）の表示ブロック #}
  {% with messages = get_flashed_messages() %}
    {% if messages %}
      <ul>
      {% for m in messages %}
        <li>{{ m }}</li>
      {% endfor %}
      </ul>
    {% endif %}
  {% endwith %}

  {# ナビゲーションリンク #}
  <a href="{{ url_for('memo.index') }}">一覧</a> |
  <a href="{{ url_for('memo.add') }}">新規追加</a>
  <hr>

  {# 子テンプレートにコンテンツを差し込ませるためのブロック #}
  {% block content %}{% endblock %}
</body>
</html>

{% extends 'memo/base.html' %}
{% block title %} - 一覧{% endblock %}
{% block content %}
<h1>メモ一覧</h1>
<ul>
  {% for memo in memos %}
    <li>
      {{ memo.timestamp.strftime('%Y-%m-%d %H:%M') }} - {{ memo.content }}
      [<a href="{{ url_for('memo.edit', id=memo.id) }}">編集</a>]
      <form action="{{ url_for('memo.delete', id=memo.id) }}" method="post" style="display:inline">
        <button type="submit">削除</button>
      </form>
    </li>
  {% else %}
    <li>メモがありません。</li>
  {% endfor %}
</ul>
{% endblock %}

{% extends 'memo/base.html' %}
{% block title %} - {{ title }}{% endblock %}
{% block content %}
<h1>{{ title }}</h1>
<form method="post">
  {{ form.hidden_tag() }}  {# CSRFトークンなどを自動挿入する隠しフィールド #}
  <p>
    {{ form.content.label }}<br>  {# フィールドのラベル #}
    {{ form.content(size=40) }}  {# テキスト入力欄 #}
    {% for err in form.content.errors %}
      <span style="color:red">{{ err }}</span>
    {% endfor %}
  </p>
  <p>{{ form.submit() }}</p>  {# 送信ボタン #}
</form>
{% endblock %}