Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

【Django】Todoアプリを開発 #3 ~CRUDモデル, ListView~


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20210924094721p:plain

おはようございます。Shotaです。

今回の記事も前回と同様に、DjangoでTodoアプリを作るための説明をしていきます。今回の記事では、主に以下のようなことをしていきます。

  • CRUDモデル

  • ListViewを実装

それでは早速、本題に入りましょう。



CRUDモデル

f:id:ShotaNukumizu_1000:20210915061857p:plain

CRUDモデルとは、システムを構成するデータに対するよく使う機能を表形式で示したものです。それぞれの文字はSQL文, Djangoで次のようにマッピングできます。

名前 操作 SQL Django
Create 生成 INSERT CreateView
Read 読み取り SELECT ListView, DetailView
Update 更新 UPDATE UpdateView
Delete 削除 DELETE DeleteView


ListViewを実装

ListViewとは、Djangoに備わっているclassの一つで、データの一覧をリストとして表示するのに適したテンプレートです。

その前に、URLの設定を行う必要があります。


URLの設定

まず、todoproject/urls.pyで以下のようなコードを書いていきます。

todoproject/urls.py

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

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

上記のコードの

path('', include('todo.urls'))

とは、アプリフォルダであるtodoに設定されているURLを適用するために記述されているものです。これがないとアプリフォルダtodoに書かれているURLに遷移できないので十分に注意してください。

次に、todoフォルダに新しくurls.pyファイルを作成してください。そして、以下のコードを記述してください。

todo/urls.py

from django.urls import path, include
from .views import TodoList

urlpatterns = [
    path('', TodoList.as_view()),
]

これを書いたら、次はtodo/views.pyListViewモデルを作成していきましょう。


Viewの作成

それでは、viewの作成に入っていきます。todo/views.pyファイルを開いてください。まずは、以下のファイルを作成してください。

todo/views.py

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

class TodoList(ListView):
    template_name = 'list.html'
    model = TodoModel

TodoListクラスを定義し、ListViewを継承します。そのとき、使うテンプレートhtmlファイルとモデルを以下のように定義しています。

class TodoList(ListView):
    template_name = 'list.html'
    model = TodoModel

これでデータベースのモデルとテンプレートファイルにアクセスできるようになりました。


HTMLに表示する

それでは、実際にHTMLにListViewの表示を書いていきましょう。テンプレートファイルを設定する場所は、過去記事で設定したtodoproject/settings.pyにある'TEMPLATES''DIR'で指定されているパスに表示します。

todoproject/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

上記のコードを見ると、templatesフォルダを新しく作ってその中にhtmlファイルを作ればいいことがわかると思います。

それでは、list.htmlファイルを作って実際に書いていきましょう。

templates/list.html

{% for item in object_list %}
{{ item.title }}
{{ item.memo }}
{% endfor %}

実際に書いてみたら、サーバを立ち上げて確認してみると以下のような画面が表示されていると思います。

f:id:ShotaNukumizu_1000:20211029095309p:plain

しかし、これだと少し分かりづらいので、htmlタグを追加していきます。

templates/list.html

{% for item in object_list %}
<ul>
    <li>タイトル:{{ item.title }}</li>
    <li>詳細:{{ item.memo }}</li>
</ul>
{% endfor %}

ul属性とli属性を付加してみました。これを実行すると、以下のように画面が表示されます。

f:id:ShotaNukumizu_1000:20211029095635p:plain

このように、DjangoListViewを使ってHTMLファイルに反映させることができました。


まとめ

今回の記事では、CRUDモデルの説明とDjangoListViewを中心に解説していきました。

今回の記事はこれで終了です。

【参考サイト】

e-words.jp

ja.wikipedia.org