【第2回】Djangoで日記アプリを作ろう～トップ画面編～

前回は、Django のアーキテクチャの全体像を学び、日記アプリ用のプロジェクト作成を行いました！

「Model・View・Template」という概念が重要でしたね。

2021.04.16【第1回】Djangoで日記アプリを作ろう～環境構築編～【第1回】Djangoで日記アプリを作ろう～環境構築編～Django は、Web アプリケーション開発を支援してくれる...

今回は、View と Template を実装して、日記アプリのトップ画面を作成していきましょう。

また、トップ画面の作成を通して、以下の5つを新しく学んでいってくださいね！

1. プロジェクト内に Django アプリケーションを追加する方法
2. URL ディスパッチャが読み取る URLConf（urls.py）の編集方法
3. TemplateView の使い方
4. Template と呼ばれる HTML ファイルの配置方法
5. ROOT URLConf という概念

では今回も、はじめていきましょう！

まずはDjangoアプリケーションを追加しよう

前回と同様に、Django を使って Web アプリケーションを作成する場合は、まずプロジェクトの作成を行います。

そして、そのプロジェクトの中には、「まとまった機能を持つアプリケーション」を追加します。

では早速、日記の投稿や編集などの機能を担う、「diaryアプリケーション」をプロジェクトに追加していきましょう。

manage.py が配置された、mydiaryproject ディレクトリ直下に移動して、以下のコマンドを実行します。

1python3 manage.py startapp diary

実行すると、「diary」という名前のアプリケーションが、mydiaryproject 直下に作成されます。

この diary ディレクトリの中に、「urls.py」というファイルを新規で作成してください。

1# touchコマンドを使わずGUIを経由して新規作成しても勿論OK
2touch urls.py

現在、diary ディレクトリは、以下のような構造になっています。

1.
2├── __init__.py
3├── admin.py
4├── apps.py
5├── migrations
6│       └── __init__.py
7├── models.py
8├── tests.py
9├── urls.py
10└── views.py

今回編集対象となるファイルは、「urls.py」と「views.py」です。

それぞれの役割は、以下のとおり。

トップ画面の完成イメージ

では、いよいよ日記アプリのトップ画面作成を行います。

…とその前に、最終的な成果物のイメージを確認しておきましょう！

また今回は、「index/」にアクセスがあった場合に、IndexView という View を呼び出します。

その後、index.html をレンダリングするように、実装していきましょう！

トップ画面の設定とViewの実装

URLConfの設定をしよう

まずは、URLConf の設定です。

以下のコードを、diary ディレクトリ直下の「urls.py」に記載しましょう。

1from django.urls import path
2from . import views
3
4app_name = 'diary'
5urlpatterns = [
6    path('index/', views.IndexView.as_view(), name='index'),
7]

app_name = 'diary' と name = 'index'  は、今回の記事では、気にしなくて大丈夫です。

今回着目すべきは、path('index', views.IndexView.as_view(), name='index')  の第1引数と第2引数。

1. 第1引数：アクセスされる URL の定義です。
2. 第2引数：URL にアクセスされた時に呼び出される View を定義

ここで、import 文と照らし合わせながら、考えてみます。

すると、 diary ディレクトリ内の views.py に記述してある、IndexView クラスの「as_view メソッド」を呼び出していることがわかりますね。

では次は、IndexView クラスを 、diary ディレクトリ直下の「views.py」に記述していきましょう！

TemplateViewを用いてViewを実装しよう

今回、IndexView に任せられた処理は、「index.html をレンダリングすること」です。

以下のコードを、diary ディレクトリ直下の views.py に記載しましょう。

1from django.views.generic import TemplateView
2
3class IndexView(TemplateView):
4    template_name = 'index.html'

IndexView が、TemplateView という、Django 特有のクラスを継承していることに着目してください。

TemplateView は、View を作成するための汎用的なビューです。

ざっくり言うと、「どのような処理にも対応できる View」です。

TemplateView には、template_name という属性があります。

この属性に、View が最終的にレンダリングする、テンプレートファイルを与えるわけです。

トップ画面に対応するテンプレートを作成

次に、IndexView がレンダリングする、index.html を作成します。

ここでは、主に以下の2つのポイントがあります。

1. テンプレートファイルはどこに配置するのか？
2. テンプレートファイルはどのように記述するのか？

では、順に見ていきましょう！

テンプレートファイルを配置する

まず、テンプレートファイルの配置について考えます。

テンプレートファイルは以下の2つのいずれかに、templates ディレクトリを作成し、その中に配置するのが主流です。

1. プロジェクト直下
2. 各 Django アプリケーション直下

今回は、テンプレートファイルを一元管理する目的で、「プロジェクト直下」に templates ディレクトリを作成します。

mydiaryproject ディレクトリ直下に、templates ディレクトリを作成しましょう！

1mkdir templates

プロジェクトディレクトリは、現在以下のような構造になっています。

1.
2├── config
3├── db.sqlite3
4├── diary
5├── manage.py
6└── templates

View がレンダリングをするときに、デフォルトではアプリケーション直下の templates ディレクトリのみを、探索するようになっています。

つまり、プロジェクト直下の templates ディレクトリを探索するように、設定ファイルを編集する必要があるわけです。

config ディレクトリ直下の「settings.py」を開き、以下のような箇所を探してください。

1TEMPLATES = [
2    {
3        'BACKEND': 'django.template.backends.django.DjangoTemplates',
4        'DIRS': [os.path.join(BASE_DIR, 'templates'), ],
5        'APP_DIRS': True,
6        'OPTIONS': {
7            'context_processors': [
8                'django.template.context_processors.debug',
9                'django.template.context_processors.request',
10                'django.contrib.auth.context_processors.auth',
11                'django.contrib.messages.context_processors.messages',
12            ],
13        },
14    },
15]

DIRS リストに、追加で探索するディレクトリへのパスを記述します。

DIRS の部分を、以下のように編集しましょう。

1TEMPLATES = [
2    {
3        'BACKEND': 'django.template.backends.django.DjangoTemplates',
4        'DIRS': [os.path.join(BASE_DIR, 'templates'), ],
5        'APP_DIRS': True,
6        'OPTIONS': {
7            'context_processors': [
8                'django.template.context_processors.debug',
9                'django.template.context_processors.request',
10                'django.contrib.auth.context_processors.auth',
11                'django.contrib.messages.context_processors.messages',
12            ],
13        },
14    },
15]

BASE_DIR は、プロジェクト直下を指すように設定されています。

具体的には、settings.py の BASE_DIR = Path(__file__).resolve().parent.parent  の部分です。

また、os モジュールを利用しているので、import os もファイルの先頭に追記してください。

テンプレートファイルに記述する

次に、template ディレクトリ内に、以下のような記述を含んだ index.html を作成します。

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>MyDiaryApp</title>
6</head>
7<body>
8<h1>Diary App by Django</h1>
9</body>
10</html>

今のところ、index.html には、Django 特有の記述は、一切含まれていません。

Djangoプロジェクトの実行確認と最終設定

Djangoプロジェクトを起動してみる

ではこの状態で、Django プロジェクトを起動してみましょう。

起動するためには、前回の記事でも登場した、下記のコマンドを実行します（djandoenv 仮想環境を起動して実行してください）。

1python3 manage.py runserver

現在は、ローカルホストで実行しているので、「http://127.0.0.1:8000/index/」にアクセスしてみます。

すると、以下のような画面が現れます。

「index/」にアクセスすれば、URLConf に従って IndexView が呼ばれ、index.html がブラウザに表示されるはずです。

実は最後に、もう一つだけ編集を加える部分があります。

ROOT URLConf にアプリケーションの URLConf を追加する

「index/」にアクセスしたときに表示された画面を見てください。

Using the URLconf defined in config.urls, ...

という、一文に注目です。

現状「config.url」という URLConf を参照しており、diary アプリの URLCong は、参照していないことになります。

Django には、「ROOT URLConf」という概念があり、その URLConf に対応する urls.py しか参照しません。

ちなみに ROOT URLConf の設定は、config ディレクトリの「settings.py」に記載されています。

1ROOT_URLCONF = 'config.urls'

つまり、アプリケーションを新規作成したときは、この config ディレクトリの urls.py に、新規アプリケーションの urls.py の内容を追加する必要があるわけですね！

というわけで、config ディレクトリの urls.py を、以下のようにコードを編集しましょう。

1from django.contrib import admin
2from django.urls import include, path # 追加：includeをimport
3
4urlpatterns = [
5    path('admin/', admin.site.urls),
6    path('', include('diary.urls')), # 追加：includeメソッドでurl設定を追加
7]

編集が終わったら、再び Django プロジェクトを起動します。

下記のような画面が出現すれば、本日の目標達成です！

第3回へつづく！

今回は、日記アプリのトップページを作成しました。

以下の5つがポイントです。

1. python3 manage.py startapp コマンドで新規Djnagoアプリを作成
2. urls.py の中に「アクセス先のURL」と「そのURLに紐づくView」を記述
3. TemplateViewで汎用的なViewを実装
4. templateファイルをプロジェクト直下に配置する場合には設定ファイルの編集が必要
5. アプリケーションのURLConfの内容はROOT URLConfに追加する

次回は Model と Form を実装して、日記作成フォームを作っていきます。

毎回の連載で、少しずつ日記アプリの開発が進んでいきますよ！

次回もお楽しみに！

第3回はこちら！

2021.04.30【第3回】Djangoで日記アプリを作ろう～投稿フォーム編～【第3回】Djangoで日記アプリを作ろう ～投稿フォーム編～前回は、TemplateView を利用して、日記アプリ...

こちらの記事もオススメ！