ProgateのNode.jsコースではお買い物リストアプリを作るのですが、これと全く同じものをDjangoで作ってみます。

Djangoでのアプリ開発の一連の流れを整理するために記していきます。

目標物

HTMLとCSS、PNG形式画像は使い回しで、一部をDjango用のタグに変えます。

#前回のおさらい

Part3

Part3ではデータベースの設定をしました。

今回はデータベースに登録されているお買い物アイテム一覧が表示されるListページを作成していきます。

#Listページの作成

はじめにurls.pyファイルにコードを追加していきます。

URLパターンを逆引きできるように、app_name = 'list'と名前をつけます（☆1）。

URLconf に名前空間を追加する

listapp/list/urls.py

from django.urls import path
from .views import ListTop, ListIndex

# URLパターンを逆引きできるように名前をつける
app_name = 'list' # ☆1

urlpatterns = [

    # リクエストされたパス部分が''に合致した場合、views.pyのListTopクラスをインスタンス化する
    path('', ListTop.as_view(), name='top'),
]

ListページのHTMLファイル（index.html）を作っていきます。

Part2でやったように静的ファイルを読み込むためのタグを挿入、変更します（☆2）。

ProgateのNode.jsコースで作ったもの（ejsファイル）を流用しているので一部変なタグがありますが、次回以降で修正していきます。

Listページのindex.htmlに書かれている{% %}や{{ }}はテンプレートと呼ばれるもので、{% %}は「処理」を行うもので{{ }}は「データ」を扱うものです。

☆3のhref="{% url 'list:top' %}の記載について見てみます。まずこのタグはurlが呼び出されるものです。じゃあ、どのようなurlが呼び出されるかというと、'list'はurls.pyのapp_nameで指定したlistアプリのことで、'top'はurls.pyのname='top'と定義したコードに対応したurlです。つまり、この場合だと、listアプリのtop.htmlが呼び出されることになります。

☆4の{% for object in object_list %}はobject_listから一つずつ取り出す繰り返し処理です。object_listはListViewで指定したモデルの全データを示していて、今回の場合だとListModelの中の全てのデータが格納されています。つまり、買い物リストです。

{% for object in object_list %}と{% endfor %}タグで囲まれま部分がループ処理となります。

{{ forloop.counter }}はループした回数を表示、つまり、リストの上から順に1, 2, 3,...というふうになります。

{{ object.item }}はobject_listから取り出された個別のデータの中のitemフィールドを意味しています。この場合だと、買い物リストです。

index.html

{% load static %} <!--☆2-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LIST APP</title>
    <link rel="stylesheet" href="{% static 'list/style.css' %}"> <!--☆2-->
  </head>
  <body>
    <header>
      <a href="{% url 'list:top' %}" class="header-logo">LIST APP</a>　<!--☆3-->
    </header>
    <div class="container">
      <div class="container-header">　
        <h1>買い物リスト</h1>
        <a href="/new" class="new-button">+ 新規登録</a>
      </div>
      <div class="index-table-wrapper">
        <div class="table-head">
          <span class="id-column">ID</span>
          <span>買うもの</span>
        </div>
        <ul class="table-body">
          {% for object in object_list %}　<!--☆4-->
            <li>
              <div class="item-data">
                <span class="id-column">{{ forloop.counter }}</span>　<!--☆4-->
                <span class="name-column">{{ object.item }}</span>　<!--☆4-->
              </div>
              <div class="item-menu">
                <form action="/delete/<%= item.id %>" method="post">
                  <input type="submit" value="削除">
                </form>
                <a href="/edit/<%= item.id %>">編集</a>
              </div>
            </li>
          {% endfor %}　<!--☆4-->
        </ul>
      </div>
    </div>
  </body>
</html>

views.pyファイルにコードを追加していきます。

ListViewという、Djangoがあらかじめ用意しているclassに書かれている関数や変数を使えるようにします。ListViewは、データベースのデータを取り出して表示するイメージのものです。文字どおり、リストにする感じです。

ListViewをインポートして、それを継承したListIndexを作成し、template_nameを定義します（☆5）。

model.pyファイルの中のどのデータベースを使うか指定していきます。models.pyのListModelを使うため、まずはfrom .models import ListModelでimportして、ListIndexの中でmodel = ListModelと設定します（☆6）。

listapp/list/views.py

from django.shortcuts import render
from django.views.generic import TemplateView, ListView # ☆5
from .models import ListModel # ☆6

class ListTop(TemplateView):
    # top.htmlをレンダリング
    template_name = 'list/top.html'

class ListIndex(ListView):  # ☆5
    # index.htmlをレンダリング
    template_name = 'list/index.html'
    model = ListModel # ☆6

urls.pyファイルにコードを追加して、views.pyのListTopクラスを読み込むようにします（☆7）。

listapp/list/urls.py

from django.urls import path
from .views import ListTop, ListIndex

# URLパターンを逆引きできるように名前をつける
app_name = 'list'

urlpatterns = [

    # リクエストされたパス部分が''に合致した場合、views.pyのListTopクラスをインスタンス化する
    path('', ListTop.as_view(), name='top'),

    # リクエストされたパス部分が'index'に合致した場合、views.pyのListIndexクラスをインスタンス化する
    path('index/', ListIndex.as_view(), name='index'), # ☆7
]

最後にTopページのListページへのリンク用のタグも変更しておきます（☆8）。

top.html

{% load static %}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>LIST APP</title>
    <link rel="stylesheet" href="{% static 'list/style.css' %}">
  </head>
  <body>
    <div class="top-wrapper">
      <div class="top-detail">
        <h2 class="subtitle">買い物リストアプリ</h2>
        <h1 class="title">LIST APP</h1>
        <p class="description">
          LIST APPは、買い物をリストアップするサービスです。
          <br>
          買いたいものをリストに登録してみましょう。
        </p>
        <a href="{% url 'list:index' %}" class="index-button">一覧を見る</a> <!--☆8-->
      </div>
      <div class="top-image">
        <img src="{% static 'list/top.png' %}">
      </div>
    </div>
  </body>
</html>

これでお買い物リストが表示される一覧ページ（仮）ができあがりました。

ちゃんとデータベースに登録したアイテムがリストに表示されています！

つぎは、リストに追加していくためのページを作っていきます！

Part5に続きます！

Part5