0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Django Webアプリ作成(5) ビューとテンプレート

Posted at

環境
OS : macOS Mojave
Anaconda : python3.6.7
Django==2.1.5

#ここまで
前回はアプリのモデルを作成したが、まだサイトの表部分(画面表示される部分)はできてない。今回は、そこを作っていく。

#urls.pyとは?
urls.pyは簡単に言うとユーザーからアクセスされたときに最適なビューを見つけるもの。ビューについては、第1回にも簡単に説明したが後ほどもう少し説明する。

#アプリディレクトリ直下にurls.pyを作成
今回は1つのアプリケーションしか作らないが、2つ以上のアプリケーションを作成する場合はアプリケーションディレクトリにurls.pyを追加したほうがわかりやすくなる。
今後のためにも、今回はその方法で進める。
はじめに、以下のコマンドをターミナルで実行する。

Terminal
touch blog/urls.py

次に、config/urls.pyとblog/urls.pyをつなぐ。
config/urls.pyと先程作成したlog/urls.pyを以下のように編集

config/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('blog.urls'))
]
blog/urls.py
from django.urls import path
from . import views

urlpatterns = [
]

アプリディレクトリにurls.pyを作成することで、config/urls.pyが肥大化せずアプリごとに記述することでスリムなコードになる。

#ビューとは
ビューの役割を簡単にいうと表示するテンプレートとデータを選択するということ。
言葉だけだとわかりにくいので実際にコードを見ながら説明しましょう。
blog/views.pyを以下のように編集します。

blog/views.py
from django.shortcuts import render
from django.utils import timezone
from .models import Post


def post_list(request):
    posts = Post.objects.filter(published_date__lte=timezone.now()).order_by('published_date')
    return render(request, 'post_list.html', {'posts': posts})

今回はpost_listという名前のビュー関数を作成しました。
関数の1文目を見ると先程作ったPostモデルのデータを'published_data'で並び替えて変数postsとして定義しています。
2文目では、テンプレートのpost_list.htmlを表示し、その中の'posts'部分に1文目で定義したpostsを当てはめることを意味しています。
なんとなくビューの役割が理解できましたか?

最後にビューができたら、blog/urls.pyのurlpatternに追加しましょう!

blog/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.post_list, name='post_list'),
]

これでサイトのトップにアクセスいたときにビュー関数post_listを実行します。
つまり、テンプレートのpost_list.htmlを表示するということです。
今は、post_list.htmlを作成していないのでこのまま開発サーバを起動してもエラーになてしまうので次は、post_list.htmlを作成します。

#テンプレートとは
テンプレートは先程少し行ったとおり画面の表示部分でありhtmlファイルのことです。
Djangoでは通常のhtmlのみのWebサイトと違いデータ(モデルの中身)を埋め込むことができます。
(ex.今回であればブログの記事)
これが、一般的なWebサイトとWebアプリと呼ばれるものの違いになります。

#テンプレートの作成
はじめにテンプレートファイルを作成します

Terminal
touch templates/post_list.html
templates/post_list.html
<html lang="ja">
    <head>
        <title>Django blog</title>
    </head>
    <body>
        <div>
            <h1><a href="/">Django Girls Blog</a></h1>
        </div>
        {% for post in posts %}
        <div>
            <p>published: {{ post.published_date }}</p>
            <h1><a href="">{{ post.title }}</a></h1>
            <p>{{ post.text|linebreaksbr }}</p>
        </div>
        {% endfor %}
    </body>
</html>

今回はDjangoがメインなので、htmlについてはまた別の機会に説明することとします。
それでは、開発サーバを起動して確認して見ましょう。

Termnal
python manage.py runserver

ちゃんと見れましたか?

次回はもう少しサイトを作り込んでいこうと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?