昔作った簡単なTodoアプリを今風に書き換えてみる
環境：
- Windows11
- Python3.12.6
- Django 5.1
- SQLite
ステップ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の設定など、本番環境にデプロイする際にはセキュリティ確保の措置が必要。