【第2回】Djangoで日記アプリを作ろう～トップ画面編～
2021.12.20
【第2回】Djangoで日記アプリを作ろう～トップ画面編～
前回は、Django のアーキテクチャの全体像を学び、日記アプリ用のプロジェクト作成を行いました！
「Model・View・Template」という概念が重要でしたね。
今回は、View と Template を実装して、日記アプリのトップ画面を作成していきましょう。
また、トップ画面の作成を通して、以下の5つを新しく学んでいってくださいね！
- プロジェクト内に Django アプリケーションを追加する方法
- URL ディスパッチャが読み取る URLConf（urls.py）の編集方法
- TemplateView の使い方
- Template と呼ばれる HTML ファイルの配置方法
- ROOT URLConf という概念
では今回も、はじめていきましょう！
まずはDjangoアプリケーションを追加しよう
前回と同様に、Django を使って Web アプリケーションを作成する場合は、まずプロジェクトの作成を行います。
そして、そのプロジェクトの中には、「まとまった機能を持つアプリケーション」を追加します。
では早速、日記の投稿や編集などの機能を担う、「diaryアプリケーション」をプロジェクトに追加していきましょう。
manage.py が配置された、mydiaryproject ディレクトリ直下に移動して、以下のコマンドを実行します。
1 | python3 manage.py startapp diary |
実行すると、「diary」という名前のアプリケーションが、mydiaryproject 直下に作成されます。
この diary ディレクトリの中に、「urls.py」というファイルを新規で作成してください。
1 2 | # touchコマンドを使わずGUIを経由して新規作成しても勿論OK touch urls.py |
現在、diary ディレクトリは、以下のような構造になっています。
1 2 3 4 5 6 7 8 9 10 | . ├── __init__.py ├── admin.py ├── apps.py ├── migrations │ └── __init__.py ├── models.py ├── tests.py ├── urls.py └── views.py |
今回編集対象となるファイルは、「urls.py」と「views.py」です。
それぞれの役割は、以下のとおり。
| urls.py | diary アプリの URL 設定を記述するファイル（URLConf） ※これに URL と、それに紐づく View を記述します。 |
| views.py | View を実装するためのファイル |
トップ画面の完成イメージ
では、いよいよ日記アプリのトップ画面作成を行います。
…とその前に、最終的な成果物のイメージを確認しておきましょう！
上のイメージのように、見た目にはこだわらない方向で進めていきます。
また今回は、「index/」にアクセスがあった場合に、IndexView という View を呼び出します。
その後、index.html をレンダリングするように、実装していきましょう！
トップ画面の設定とViewの実装
URLConfの設定をしよう
まずは、URLConf の設定です。
以下のコードを、diary ディレクトリ直下の「urls.py」に記載しましょう。
1 2 3 4 5 6 7 | from django.urls import path from . import views app_name = 'diary' urlpatterns = [ path('index/', views.IndexView.as_view(), name='index'), ] |
app_name = 'diary' と name = 'index' は、今回の記事では、気にしなくて大丈夫です。
今回着目すべきは、 path('index', views.IndexView.as_view(), name='index') の第1引数と第2引数。
- 第1引数：アクセスされる URL の定義です。
- 第2引数：URL にアクセスされた時に呼び出される View を定義
ここで、import 文と照らし合わせながら、考えてみます。
すると、 diary ディレクトリ内の views.py に記述してある、IndexView クラスの「as_view メソッド」を呼び出していることがわかりますね。
では次は、IndexView クラスを 、diary ディレクトリ直下の「views.py」に記述していきましょう！
TemplateViewを用いてViewを実装しよう
今回、IndexView に任せられた処理は、「index.html をレンダリングすること」です。
以下のコードを、diary ディレクトリ直下の views.py に記載しましょう。
1 2 3 4 | from django.views.generic import TemplateView class IndexView(TemplateView): template_name = 'index.html' |
IndexView が、TemplateView という、Django 特有のクラスを継承していることに着目してください。
TemplateView は、View を作成するための汎用的なビューです。
ざっくり言うと、「どのような処理にも対応できる View」です。
TemplateView には、template_name という属性があります。
この属性に、View が最終的にレンダリングする、テンプレートファイルを与えるわけです。
トップ画面に対応するテンプレートを作成
次に、IndexView がレンダリングする、index.html を作成します。
ここでは、主に以下の2つのポイントがあります。
- テンプレートファイルはどこに配置するのか？
- テンプレートファイルはどのように記述するのか？
では、順に見ていきましょう！
テンプレートファイルを配置する
まず、テンプレートファイルの配置について考えます。
テンプレートファイルは以下の2つのいずれかに、templates ディレクトリを作成し、その中に配置するのが主流です。
- プロジェクト直下
- 各 Django アプリケーション直下
今回は、テンプレートファイルを一元管理する目的で、「プロジェクト直下」に templates ディレクトリを作成します。
mydiaryproject ディレクトリ直下に、templates ディレクトリを作成しましょう！
1 | mkdir templates |
プロジェクトディレクトリは、現在以下のような構造になっています。
1 2 3 4 5 6 | . ├── config ├── db.sqlite3 ├── diary ├── manage.py └── templates |
View がレンダリングをするときに、デフォルトではアプリケーション直下の templates ディレクトリのみを、探索するようになっています。
つまり、プロジェクト直下の templates ディレクトリを探索するように、設定ファイルを編集する必要があるわけです。
config ディレクトリ直下の「settings.py」を開き、以下のような箇所を探してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(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', ], }, }, ] |
DIRS リストに、追加で探索するディレクトリへのパスを記述します。
DIRS の部分を、以下のように編集しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(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', ], }, }, ] |
BASE_DIR は、プロジェクト直下を指すように設定されています。
具体的には、settings.py の BASE_DIR = Path(__file__).resolve().parent.parent の部分です。
また、os モジュールを利用しているので、import os もファイルの先頭に追記してください。
テンプレートファイルに記述する
次に、template ディレクトリ内に、以下のような記述を含んだ index.html を作成します。
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MyDiaryApp</title> </head> <body> <h1>Diary App by Django</h1> </body> </html> |
今のところ、index.html には、Django 特有の記述は、一切含まれていません。
Djangoプロジェクトの実行確認と最終設定
Djangoプロジェクトを起動してみる
ではこの状態で、Django プロジェクトを起動してみましょう。
起動するためには、前回の記事でも登場した、下記のコマンドを実行します（djandoenv 仮想環境を起動して実行してください）。
1 | python3 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」に記載されています。
1 | ROOT_URLCONF = 'config.urls' |
つまり、アプリケーションを新規作成したときは、この config ディレクトリの urls.py に、新規アプリケーションの urls.py の内容を追加する必要があるわけですね！
というわけで、config ディレクトリの urls.py を、以下のようにコードを編集しましょう。
1 2 3 4 5 6 7 | from django.contrib import admin from django.urls import include, path # 追加：includeをimport urlpatterns = [ path('admin/', admin.site.urls), path('', include('diary.urls')), # 追加：includeメソッドでurl設定を追加 ] |
編集が終わったら、再び Django プロジェクトを起動します。
下記のような画面が出現すれば、本日の目標達成です！
今後の連載では、このトップページに対して、日記投稿ページへのリンクなどを追加していきます。
第3回へつづく！
今回は、日記アプリのトップページを作成しました。
以下の5つがポイントです。
- python3 manage.py startapp コマンドで新規Djnagoアプリを作成
- urls.py の中に「アクセス先のURL」と「そのURLに紐づくView」を記述
- TemplateViewで汎用的なViewを実装
- templateファイルをプロジェクト直下に配置する場合には設定ファイルの編集が必要
- アプリケーションのURLConfの内容はROOT URLConfに追加する
次回は Model と Form を実装して、日記作成フォームを作っていきます。
毎回の連載で、少しずつ日記アプリの開発が進んでいきますよ！
次回もお楽しみに！
第3回はこちら！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ライトコードの日常12月 1, 2023ライトコードクエスト〜東京オフィス歴史編〜- ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？
- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
