DjangoでTodoアプリを作ってみよう

2021年12月18日 12:24

PythonにはDjangoというWebアプリケーション開発のためのフレームワークがあります。

非常に人気のあるフレームワークなので、興味のある方もいらっしゃると思います。

そこで、本記事ではDjangoで簡単なTodoアプリを一から作成する手順を紹介しようと思います。

Djangoでのアプリ開発がどのようなものかをざっと理解していただければと思います。

今回作成するTodoアプリは下図のような追加と削除ができるだけの簡単なものです。

Djangoでアプリ開発を行う上で知っておいていただきたいことは、DjangoはMVC （model-view-controller）というアーキテクチャパターンを採用しているという点です。（ただし、DjangoではViewは「Template」、Controllerは「View」と呼ばれるのでご注意ください）

まずは下図を見てください。

上図はRailsというWebフレームワークの学習教材である「Railsチュートリアル」の中の図で、MVCアーキテクチャパターンを採用しているRailsでどのような流れで処理が進められているかを示している図です。

下記に該当箇所のRailsチュートリアルのリンクを貼っておきます。

Djangoでも同じような流れで処理が進められていきますが、図に登場しているModel、View、Controller、routerの４つをそれぞれ作成しながらアプリ開発を行っていくことになります。

実行環境

Djangoのインストール方法については、下記にまとめられています。

本記事ではLinux環境にDjangoが既にインストールされている状態から始めることにします。

実行手順

大きな流れは次の通りです。

１．プロジェクトの作成
２．アプリの作成
３．Modelの作成
４．Controllerの作成
５．Viewの作成
６．routerの作成
７．実行

１．プロジェクトの作成

「django-admin startproject mysite」を実行します。

２．アプリの作成

「python3 manage.py startapp todoapp」を実行します。

以上で下図のように「mysite」フォルダ配下に「mysite」と「todoapp」フォルダ、「manage.py」ファイルが作成されます。

Djangoでアプリ開発を行う場合は、プロジェクトの中に存在する自動生成されたファイルを変更したり、新しくフォルダやファイルを作成したりしながら開発を進めることになります。

todoappをプロジェクトに含めるためにmysite/mysite配下の「settings.py」のINSTALLED_APPSの箇所にtodoappを追加します。

settings.py（抜粋）

INSTALLED_APPS = [
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
   'todoapp',
]

３．Modelの作成

mysite/todoapp配下の「models.py」を下記のように変更します。

models.py

from django.db import models

class Todo(models.Model):
   text = models.CharField(max_length=100)

「python3 manage.py makemigrations」と「python3 manage.py migrate」を実行します。

データベース上にいろいろなテーブルが作成されます。

４．Controllerの作成

mysite/todoapp配下の「views.py」を下記のように変更します。

views.py

from django.shortcuts import render, redirect
from .models import Todo

def index(request):
   todos = Todo.objects.all()
   return render(request, 'index.html', {'todos': todos})

def addTodo(request):
   todo = Todo(text=request.POST['text'])
   todo.save()
   return redirect('/todos')

def deleteTodo(request, id):
   todo = Todo.objects.filter(id=id)
   todo.delete()
   return redirect('/todos')

５．Viewの作成

todoapp配下にtemplatesフォルダを作成します。

templates配下にindex.htmlを作成して下記のコードを入力します。

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>My Todo</title>
</head>
<body>
 <h3>My Todo</h3>
 <form action="/todos/add" method="POST">
   {% csrf_token %}
   <input name="text" placeholder="Input here...">
   <button type="submit">ADD</button>
 </form>

 <h5>Todo List</h5>
 <ul>
   {% for todo in todos %}
   <li>
     {{ todo.text }}
     <form action="/todos/delete/{{ todo.id }}"
           style="display: inline;" 
           method="POST">
       {% csrf_token %}
       <button type="submit">DEL</button>
     </form>
   </li>
   {% endfor %}
 </ul>
</body>
</html>

６．routerの作成

mysite配下の「urls.py」を下記のように変更します。

urls.py

from django.urls import path
from todoapp.views import index, addTodo, deleteTodo

urlpatterns = [
   path('', index),
   path('todos', index),
   path('todos/add', addTodo),
   path('todos/delete/<int:id>', deleteTodo),
]

７．実行

「python3 manage.py runserver」を実行します。