Django初心者が簡単なアプリ（Todoアプリ）を作りました。
はやたすさんの記事を参考にしました。

この記事では、Pythonのインストール、仮想環境の構築、Djangoのインストール、アプリ作成の流れを書きます。
実行環境：MacBook Air M1, 2020

Pythonのインストール

以下のサイトにアクセスし、Latest Python 3 Release - Python 3.12.1をクリックします。
https://www.python.org/downloads/macos/

開いたページを下にスクロールし、macOS 64-bit universal2 installerをクリックします。

インストーラをダウンロードしたら、インストールを進めます。

ターミナルでPythonのバージョンを確認します。

% python3 -V
Python 3.12.1

Python 3.12.1をインストールすることができました。

仮想環境の構築

今回は、仮想環境を構築し、アプリ作成を行います。
ターミナルで以下のコマンドを実行します。

% mkdir django-todo
% cd django-todo
% python3 -m venv .venv
% source .venv/bin/activate

django-todoディレクトリを作成し、仮想環境の構築と起動を行いました。
次回からは、以下のコマンドのみを実行します。

% cd django-todo
% source .venv/bin/activate

Djangoのインストール

ターミナルで以下のコマンドを実行します。

% python -m pip install Django
% python -m django --version
5.0

アプリ作成

Djangoプロジェクトの作成

ターミナルで以下のコマンドを実行します。

% django-admin startproject config .

プロジェクトが動作するか確認します。

% python manage.py runserver

http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

Todoアプリの作成

ターミナルで以下のコマンドを実行します。

% python manage.py startapp todo

config/settings.pyを編集し、初期設定を行います。

config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig' # 追加
]

# ...

# LANGUAGE_CODE = 'en-us'
LANGUAGE_CODE = 'ja'

# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Tokyo'

以下のコマンドを実行します。

python manage.py runserver

http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

英語から日本語に変わりました。

Hello Worldの表示

config/urls.pyを編集します。

config/urls.py

from django.contrib import admin
from django.urls import path, include # 追加


urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("todo.urls")) # 追加
]

todo/views.pyを編集します。

todo/views.py

from django.shortcuts import render
from django.http import HttpResponse


def index(request):
    return HttpResponse("<h1>Hello World</h1>")

todo/urls.pyを作成します。

todo/urls.py

from django.urls import path
from . import views


urlpatterns = [
    path("", views.index),
]

サーバーを起動します。

% python manage.py runserver

http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

Hello Worldが表示されました。

モデルの作成と有効化

todo/models.pyを編集します。

todo/models.py

from django.db import models


class Todo(models.Model):
    title = models.CharField("タスク名", max_length=30)
    description = models.TextField("詳細", blank=True)
    deadline = models.DateField("締切")

    def __str__(self):
        return self.title

ターミナルで以下のコマンドを実行します。

% python manage.py makemigrations
% python manage.py migrate

管理ユーザーの作成

ターミナルで以下のコマンドを実行します。

% python manage.py createsuperuser

ユーザー名、メールアドレス、パスワードを入力します。
メールアドレスは必要ないようです。
以下のコマンドを実行し、サーバーを起動します。

% python manage.py runserver

http://127.0.0.1:8000/adminにアクセスすると、以下の画面が表示されます。

ユーザー名とパスワードを入力し、ログインすると、以下の画面が表示されます。

todo/admin.pyを編集します。

todo/admin.py

from django.contrib import admin
from .models import Todo


admin.site.register(Todo)

以下のコマンドを実行し、サーバーを起動します。

% python manage.py runserver

http://127.0.0.1:8000/adminにアクセスします。

Todoテーブルが表示されました。
Todoを追加します。

Todoの表示

todo/views.pyを編集します。

todo/views.py

from django.shortcuts import render
from django.views.generic import ListView

from .models import Todo


class TodoList(ListView):
    model = Todo
    context_object_name = "tasks"

todo/urls.pyを編集します。

todo/urls.py

from django.urls import path
from .views import TodoList

urlpatterns = [
    path("", TodoList.as_view(), name="list"),
]

todo/templates/todo/todo_list.htmlを作成します。

todo/templates/todo/todo_list.html

<h1>Todo List</h1>

<table>
    <thead>
        <tr>
        <th scope="col">title</th>
        <th scope="col">deadline</th>
        </tr>
    </thead>
    <tbody>
    {% for task in tasks %}
    <tr>
        <td>{{ task.title }}</td>
        <td>{{ task.deadline }}</td>
    </tr>
    {% endfor %}
    </tbody>
</table>

サーバーを起動し、http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

Todoアプリを起動することができ、作成したTodoを表示することができました。

Todoの詳細の表示

todo/views.pyを編集します。

todo/views.py

from django.shortcuts import render
from django.views.generic import ListView, DetailView

from .models import Todo


class TodoList(ListView):
    model = Todo
    context_object_name = "tasks"


class TodoDetail(DetailView):
    model = Todo
    context_object_name = "task"

todo/urls.pyを編集します。

todo/urls.py

from django.urls import path
from .views import TodoDetail, TodoList # 追加

urlpatterns = [
    path("", TodoList.as_view(), name="list"),
    path("detail/<int:pk>", TodoDetail.as_view(), name="detail"), # 追加
]

todo/templates/todo/todo_list.htmlを編集します。

todo/templates/todo/todo_list.html

<h1>Todo List</h1>

<table>
    <thead>
        <tr>
        <th scope="col">title</th>
        <th scope="col">deadline</th>
        </tr>
    </thead>
    <tbody>
    {% for task in tasks %}
    <tr>
        <td>{{ task.title }}</td>
        <td>{{ task.deadline }}</td>
        <td><a href="{% url 'detail' task.pk %}">詳細</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

todo/templates/todo/todo_detail.htmlを作成します。

todo/templates/todo/todo_detail.html

<h1>Todo Detail</h1>

<div>
    <h2>{{task.title}}</h2>
    <p>{{task.deadline}}</p>
    <p>{{task.description}}</p>
</div>

サーバーを起動し、http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

詳細をクリックすると、以下の画面が表示されます。

Todoの詳細を表示することができました。

Todoの作成

todo/views.pyを編集します。

todo/views.py

from django.shortcuts import render
from django.views.generic import ListView, DetailView, CreateView

from django.urls import reverse_lazy

from .models import Todo

# ...

class TodoCreate(CreateView):
    model = Todo
    fields = "__all__"
    success_url = reverse_lazy("list")

todo/urls.pyを編集します。

todo/urls.py

from django.urls import path
from .views import TodoDetail, TodoList, TodoCreate # 追加

urlpatterns = [
    path("", TodoList.as_view(), name="list"),
    path("detail/<int:pk>", TodoDetail.as_view(), name="detail"),
    path("create/", TodoCreate.as_view(), name="create"),　# 追加
]

todo/templates/todo/todo_list.htmlを編集します。

todo/templates/todo/todo_list.html

<h1>Todo List</h1>

<p><a href="{% url 'create' %}">新規作成</a></p>

<!-- ... -->

todo/templates/todo/todo_form.htmlを作成します。

todo/templates/todo/todo_form.html

<form action="" method="POST">{% csrf_token %}
    <table>
        {{ form.as_table }}
    </table>
    <input type="submit" value="送信">
</form>

サーバーを起動し、http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

新規作成をクリックし、Todoを作成します。

送信をクリックすると、以下の画面が表示されます。

Todoを作成することができました。

Todoの編集

todo/views.pyを編集します。

todo/views.py

from django.shortcuts import render
from django.views.generic import ListView, DetailView, CreateView, UpdateView

from django.urls import reverse_lazy

from .models import Todo

# ...

class TodoUpdate(UpdateView):
    model = Todo
    fields = "__all__"
    success_url = reverse_lazy("list")

todo/urls.pyを編集します。

todo/urls.py

from django.urls import path
from .views import TodoDetail, TodoList, TodoCreate, TodoUpdate

urlpatterns = [
    path("", TodoList.as_view(), name="list"),
    path("detail/<int:pk>", TodoDetail.as_view(), name="detail"),
    path("create/", TodoCreate.as_view(), name="create"),
    path("update/<int:pk>", TodoUpdate.as_view(), name="update"),
]

todo/templates/todo/todo_list.htmlを編集します。

todo/templates/todo/todo_list.html

<h1>Todo List</h1>

<p><a href="{% url 'create' %}">新規作成</a></p>

<table>
    <thead>
        <tr>
        <th scope="col">title</th>
        <th scope="col">deadline</th>
        </tr>
    </thead>
    <tbody>
    {% for task in tasks %}
    <tr>
        <td>{{ task.title }}</td>
        <td>{{ task.deadline }}</td>
        <td><a href="{% url 'detail' task.pk %}">詳細</a></td>
        <td><a href="{% url 'update' task.pk %}">編集</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

サーバーを起動し、http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

Todoを編集することができるようになりました。

Todoの削除

todo/views.pyを編集します。

todo/views.py

from django.shortcuts import render
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView

from django.urls import reverse_lazy

from .models import Todo

# ...

class TodoDelete(DeleteView):
    model = Todo
    context_object_name = "task"
    success_url = reverse_lazy("list")

todo/urls.pyを編集します。

todo/urls.py

from django.urls import path
from .views import TodoDetail, TodoList, TodoCreate, TodoUpdate, TodoDelete

urlpatterns = [
    path("", TodoList.as_view(), name="list"),
    path("detail/<int:pk>", TodoDetail.as_view(), name="detail"),
    path("create/", TodoCreate.as_view(), name="create"),
    path("update/<int:pk>", TodoUpdate.as_view(), name="update"),
    path("delete/<int:pk>", TodoDelete.as_view(), name="delete"),
]

todo/templates/todo/todo_list.htmlを編集します。

todo/templates/todo/todo_list.html

<h1>Todo List</h1>

<p><a href="{% url 'create' %}">新規作成</a></p>

<table>
    <thead>
        <tr>
        <th scope="col">title</th>
        <th scope="col">deadline</th>
        </tr>
    </thead>
    <tbody>
    {% for task in tasks %}
    <tr>
        <td>{{ task.title }}</td>
        <td>{{ task.deadline }}</td>
        <td><a href="{% url 'detail' task.pk %}">詳細</a></td>
        <td><a href="{% url 'update' task.pk %}">編集</a></td>
        <td><a href="{% url 'delete' task.pk %}">削除</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

todo/templates/todo/todo_confirm_delete.htmlを作成します。

todo/templates/todo/todo_confirm_delete.html

<h1>タスクの削除</h1>
<form action="" method="POST">{% csrf_token %}
    <p>{{task}}</p>
    <input type="submit" value="delete">
</form>

サーバーを起動し、http://127.0.0.1:8000/にアクセスすると、以下の画面が表示されます。

削除をクリックすると、以下の画面が表示されます。

deleteをクリックします。

Todoが削除されました。

はやたすさんの記事を参考にしながら、DjangoでTodoアプリを作ることができました。
次は、読書メモアプリを作りたいです。

参考文献

https://docs.djangoproject.com/ja/5.0/topics/install/
https://tech-diary.net/django-todo-tutorial/
https://qiita.com/white1107/items/5063d38cd5474b412e3e