Python, Django でTodoアプリ作成の足がかり

昔作った簡単なTodoアプリを今風に書き換えてみる

環境：
* Windows11
* Python3.12.6
* Django 5.1
* SQLite


## ステップ1: Pythonのインストール
Microsoftストアからいれる

## ステップ2: 仮想環境の作成とアクティベーション
プロジェクトごとに異なる依存関係を持つように、仮想環境を作成する。
```powershell
# 仮想環境を作成するディレクトリに移動
cd path\to\your\project\directory

# 仮想環境を作成
python -m venv myenv

# 仮想環境をアクティベート
myenv\Scripts\activate
```
※venvの有効化に失敗することがあるが、以下を実行する
```powershell
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
```

## ステップ3: Djangoのインストール
```powershell
# Djangoをインストール
pip install django
```

## ステップ4: Djangoプロジェクトの作成
```powershell
# プロジェクトを作成
django-admin startproject todo_project

# ディレクトリに移動
cd todo_project
```

```powershell
# サーバーを起動
python manage.py runserver
```
※起動したら一旦CTRL‐Cで落としておく

## ステップ5: Todoアプリを作成
Todoアプリを作成する
```powershell
python manage.py startapp todo_app
```

## ステップ6: モデルの作成
todo_app/models.py を編集して、Todoアイテムのモデルを作る
```py
from django.db import models

class TodoItem(models.Model):
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)
    is_done = models.BooleanField(default=False)
```

モデルをDBに反映させる
```powershell
python manage.py makemigrations todo_app
python manage.py migrate
```

## ステップ7: ビューの作成
todo_app/views.py を編集してビューを作成する
```py
from django.shortcuts import render, redirect
from .models import TodoItem

def todo_list(request):
    items = TodoItem.objects.order_by('-created_at')
    return render(request, 'todo_app/todo_list.html', {'items': items})

def add_todo_item(request):
    if request.method == 'POST':
        content = request.POST['content']
        if content:
            TodoItem.objects.create(content=content)
        return redirect('todo_list')
    return render(request, 'todo_app/add_todo_item.html')

def delete_todo_item(request, item_id):
    if request.method == 'POST':
        item = TodoItem.objects.get(id=item_id)
        item.delete()
    return redirect('todo_list')
```

## ステップ8: URLの設定
todo_app/urls.py を新規作成し、TodoアプリのURLを設定する。
```py
from django.urls import path
from . import views

app_name = 'todo_app'

urlpatterns = [
    path('', views.todo_list, name='todo_list'),
    path('add/', views.add_todo_item, name='add_todo_item'),
    path('delete/<int:item_id>/', views.delete_todo_item, name='delete_todo_item'),
]
```

todo_project/urls.py を編集して、TodoアプリのURLをインクルードする。

```py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todo/', include('todo_app.urls')),
]
```

## ステップ9: テンプレートの作成
todo_app/templates/todo_app ディレクトリを作成し、以下の2つのHTMLファイルを作成する。

todo_list.html:
```html
<!DOCTYPE html>
<html>
    <head>
        <title>Todo List</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <h2>Todo List</h2>
            <form method="post" action="{% url 'todo_app:add_todo_item' %}">{% csrf_token %} <input type="text" name="content" placeholder="Add new todo..." /> <button type="submit" class="btn btn-primary">Add</button></form>
            <ul class="list-group mt-3">
                {% for item in items %}
                <li class="list-group-item d-flex justify-content-between">
                    {{ item.content }}
                    <form method="post" action="{% url 'todo_app:delete_todo_item' item.id %}">{% csrf_token %} <button type="submit" class="btn btn-danger btn-sm">Delete</button></form>
                </li>
                {% endfor %}
            </ul>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>
```

## ステップ10: 管理画面の設定
Django管理画面からTodoアイテムを管理できるようにtodo_app/admin.py を編集する。
```py
from django.contrib import admin
from .models import TodoItem

admin.site.register(TodoItem)
```

## ステップ11: アプリの起動
基本設定が済んだので、サーバーを起動して動作確認。
```powershell
python manage.py runserver
```

注意点など
* このTodoアプリは基本的な機能しか持っていないので、機能やセキュリティ強化は別途実装が必要。
* BootStrapはCDNを使用しているため、ローカルで使用する場合は要ダウンロード。
* SECRET_KEYやDBの設定など、本番環境にデプロイする際にはセキュリティ確保の措置が必要。