Progateで作ったWebアプリをDjangoで作ってみる！ Part2 -TemplateView編-

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

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

**目標物**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/16123e6f-f050-226e-a369-8383267de571.png)


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

#前回のおさらい

Part1では、はじめに、①プロジェクトを作成して、その次に②アプリを作成して、③作成したアプリを**setting.py**に登録して、最後に④**urls.py**の設定をしました。

今回はトップページを作っていきます。

# テンプレート
Djangoを使って、HTMLの表示内容をいろいろ操作できます。Djangoで作成できる表示ページを**テンプレート**と言います。テンプレートは、Webページの中にいろいろな変数を組み込んだもので、Djangoがテンプレートを読み込んで、変数を代入して、ページを完成していくイメージです。

まずはテンプレートと静的ファイルを置く場所を用意します。

Djangoではアプリごとにtemplatesフォルダを作成して、その中にさらにアプリ名のフォルダを作成します。

今回の場合は、

「listapp」→「list」→「templates」→「list」

となります。

フォルダの作成は、Visual Studio Codeのエクスプローラーの「新しいフォルダー」アイコンか、``cd``コマンドでディレクトリに移動して、``mkdir``コマンドで作成します。

「templates」フォルダの「list」フォルダに、「top.html」ファイルを作成します。

静的ファイルのフォルダも同様に、

「listapp」→「list」→「static」→「list」

とします。

「static」フォルダの「list」フォルダに、「style.css」ファイルを作成し、使う画像ファイルも格納します。

Part1で**setting.py**の**INSTALLED_APPS**にアプリを登録したことで、Djangoのテンプレート機能が「templates」フォルダを検索してくれます。一つのプロジェクトに複数のアプリがあって、「templates」フォルダ直下に同じ「top.html」ファイルがあった場合、Djangoは区別できないので、「templates」フォルダの下にアプリ名のフォルダを入れて、その下にテンプレートファイルを置きます。静的ファイルも同様の考えです。

[はじめての Django アプリ作成、その3](https://docs.djangoproject.com/ja/3.2/intro/tutorial03/)
[はじめての Django アプリ作成、その6](https://docs.djangoproject.com/ja/3.2/intro/tutorial06/)

この時点でのディレクトリ構成は以下です。

```console
C:
│  db.sqlite3
│  manage.py
│
├─list
│  │  admin.py
│  │  apps.py
│  │  models.py
│  │  tests.py
│  │  urls.py
│  │  views.py
│  │  __init__.py
│  │
│  ├─migrations
│  │  │  __init__.py
│  │  │
│  │  └─__pycache__
│  │          __init__.cpython-38.pyc
│  │          __init__.cpython-39.pyc
│  │
│  ├─static # ☆
│  │  └─list　# ☆
│  │          style.css　# ☆
│  │          top.png　# ☆
│  │
│  ├─templates　# ☆
│  │  └─list　# ☆
│  │          top.html　# ☆
│  │
│  └─__pycache__
│          admin.cpython-38.pyc
│          admin.cpython-39.pyc
│          apps.cpython-38.pyc
│          apps.cpython-39.pyc
│          models.cpython-38.pyc
│          models.cpython-39.pyc
│          urls.cpython-38.pyc
│          urls.cpython-39.pyc
│          views.cpython-39.pyc
│          __init__.cpython-38.pyc
│          __init__.cpython-39.pyc
│
└─listapp
    │  asgi.py
    │  settings.py
    │  urls.py
    │  wsgi.py
    │  __init__.py
    │
    └─__pycache__
            settings.cpython-38.pyc
            settings.cpython-39.pyc
            urls.cpython-38.pyc
            urls.cpython-39.pyc
            wsgi.cpython-38.pyc
            wsgi.cpython-39.pyc
            __init__.cpython-38.pyc
            __init__.cpython-39.pyc
```



# TopページのHTMLファイルを作る

もともとのHTMLファイルをそのまま使いますが、Django用のタグに一部変えていきます。CSSファイルは特に変更しないのでそのまま貼り付けておきます。

静的ファイルを使う場合は、最初に以下のタグを入れます。

```python
{% load static %}
```

テンプレートファイルで静的ファイルを読み込むアドレスは``{% static %}``タグを使います。

``<link>``タグにある``href``属性を以下のようにします。

```html
<link rel="stylesheet" href="{% static 'list/style.css' %}">
```

画像ファイルを読み込むために以下のようにします。

```html
<img src="{% static 'list/top.png' %}">
```

```html:listapp/list/templates/list/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="/index" class="index-button">一覧を見る</a>
      </div>
      <div class="top-image">
        <img src="{% static 'list/top.png' %}">
      </div>
    </div>
  </body>
</html>
```


# TemplateView

Topページを表示するために、TemplateViewというDjangoがあらかじめ用意しているclassに書かれている関数や変数を使えるようにします。

``TemplateView``をインポートするコードを追加します（☆1）。

``ListTop``クラスを作成し、TemplateViewを継承します（☆2）。``template_name``を指定することで、どのHTMLファイルを使うかをDjangoに伝えています（☆3）。

```python:listapp/list/views.py
from django.shortcuts import render
from django.views.generic import TemplateView #☆1

class ListTop(TemplateView): # ☆2

    # top.htmlをレンダリング
    template_name = 'list/top.html' # ☆3
```

# urls.pyの設定

**views.py**の**ListTop**クラスを読み込みます（☆4）。

``urlpatterns``にコードを追加します。クラスを読み込む場合は**as.view**メソッドをつけます。``name``という引数で、このpathを**top**という名前に設定しています（☆5）。

```python:listapp/list/urls.py
from django.urls import path
from .views import ListTop # ☆4

urlpatterns = [

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

]
```

これでトップページは完成です!

``python manage.py runserver``でサーバーを起動し、「http\://localhost:8000/」にアクセスするとちゃんと表示されていました！

![図1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/471633/413af934-1295-c353-5a81-46bca360677e.png)


Part3に続きます！

[Part3](https://qiita.com/insilicomab/items/bf2b983c1433cffe63f0)