ステップ1: Pythonのインストール

Microsoftストアからいれる

ステップ2: 仮想環境の作成とアクティベーション

プロジェクトごとに異なる依存関係を持つように、仮想環境を作成する。

# 仮想環境を作成するディレクトリに移動
cd path\to\your\project\directory

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

# 仮想環境をアクティベート
myenv\Scripts\activate

※venvの有効化に失敗することがあるが、以下を実行する

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

ステップ3: Djangoのインストール

# Djangoをインストール
pip install django

ステップ4: Djangoプロジェクトの作成

# プロジェクトを作成
django-admin startproject todo_project

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

# サーバーを起動
python manage.py runserver

※起動したら一旦CTRL‐Cで落としておく

ステップ5: Todoアプリを作成

Todoアプリを作成する

python manage.py startapp todo_app

ステップ6: モデルの作成

todo_app/models.py を編集して、Todoアイテムのモデルを作る

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に反映させる

python manage.py makemigrations todo_app
python manage.py migrate

ステップ7: ビューの作成

todo_app/views.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を設定する。

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をインクルードする。

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:

<!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 を編集する。

from django.contrib import admin
from .models import TodoItem

admin.site.register(TodoItem)

ステップ11: アプリの起動

基本設定が済んだので、サーバーを起動して動作確認。

python manage.py runserver

注意点など

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