DjangoとVue.jsでシンプルなTodoアプリを作る 03.Djangoで文字を表示させよう

2021年12月29日 17:38

前回の記事では、アプリを作るセットアップをしていきました。

今回は、html をbootstrapで整え、views.pyとurls.pyにコードを書いて、Djangoを通してhtmlに文字を表示できるようにします!

bootstrapでhtmlを整える

まず、前回作成した、 templates > base.html にコードを書いていきます。

base.html 内で!を入力し、下記の html の雛形を表示させます。
これは vscode のみの機能かもしれないので、!を入力してもそうならない場合は、すみませんが、コピペしてください。

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>todo</title>
</head>
<body>

</body>
</html>

続いて、head 内に bootstrap の cdn と、style.css の設定を書き込みます。

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 下記を追加 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="{% static 'style.css' %}">
  <title>Todo</title>
</head>

bootstrap とは?

bootstrap とは、簡単に言うと、html の class 名などを少し変えるだけで、css をガッツリ書いたような、素敵なデザインのページを作成できるすぐれものです。

例えば、bootstrap をインストールした状態で、下記のように通常の button タグに class="btn btn-primary"を入れるだけで、きれいなボタンを表示することができます。


<button type="button" class="btn btn-primary">Primary</button>

cdn とは?

今回使う用途でいうと、js などのライブラリを html にその url を記述するだけで、ダウンロードせず簡単に利用できる仕組みです。
bootstrap vue.js cookie.js は、本来、自分のアプリにダウンロードして使うのですが、cdn を使用することでダウンロードせずに簡単にvueなどを使うことができます。

{% %}とは何?

これは、テンプレートタグというものです。Django 特有の html の文法みたいなものと捉えてもらったほうが良いかもしれません。


{% load static %}

を記述し、下記を書くと、


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

html ではこんな表示になります。


<link rel="stylesheet" href="/static/style.css">

static は、setting.py で登録した STATIC_URL = "/static/"を示していて、STATIC_URL(/static/) + (記述したパス)style.css をくっつけたパスを返してくれます。

続いて、今回の SPA の todo アプリを作るにあたって必要な cookie と、vue の cdn の url、vue.js の内容を書く、main.js のパスを書きます。

  <body>
    {# 追記 #}
    <div class="container">
      <div class="row">
        <div class="col-sm-10 mx-auto mt-4">
          {% block content %} 
          {% endblock %}
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
    <script src="{% static 'main.js' %}"></script>
  </body>

class="container"などの class は、bootstrap のデザインの設定です。

今回はデザインについては、スルーしてもらって大丈夫だと思います。

詳しくbootstrapについて知りたい方は、bootstrap>componentsを読んでみてください。

{% block content %}{% endblock %}とは

これを記述することで、後で作る html に、この html の内容を引き継ぐことができます。
例えば、新たに index.html を作成し、

index.html



{% block content %}

<h1>index</h1>

{% endblock %}

と書いたとすると、base.html で書いた、下記のような内容を引き継げます。

<div class="container">
    <div class="row">
        <div class="col-sm-10 mx-auto mt-4">...

最終的な base.html のコードは下記のようになります。

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="{% static 'style.css' %}" />
    <title>Todo</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-10 mx-auto mt-4">
          {% block content %}
          {% endblock %}
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script>
    <script src="{% static 'main.js' %}"></script>
  </body>
</html>

Djangoを通して文字を表示させる

続いて、task 配下に、task/urls.py を作成します。

todo アプリの task を管理するページの url を追加していきます。

作成したら、今度は、config/urls.py のほうに、作成した task/urls.py の url を読み込めるようにします。

config/urls.py


from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("task.urls")),
]

include とは

英語の訳の通り、task アプリの url を全体の url(config/urls.py)に含むようにします。
これをすることで、このサービス自体が、task 配下に書いたページを読み込んでくれるようになります。
逆に、これをしないと、読み込んでくれないので注意です。

admin とは

これはデフォルトで Django に備わっている管理サイトの url です。
こちらで登録したデータなどを確認できます。
続いて、task アプリの方の views.py urls.py html を書いていき、一旦ページに文字を表示させていきます。

次にtask/views.py に、下記を追記します。
task/views.py

from django.shortcuts import render
from django.views.generic import View


class TaskView(View):
    def get(self, request):
        return render(request, "task_list.html", context={"name": "テスト"})

task/urls.py に下記を追記します。

task/urls.py

from django.urls import path

from .views import *

urlpatterns = [
    path("", TaskView.as_view(), name="task_list"),
]

task/templates配下に、task/templates/task_list.htmlを作成し、下記を記述します。

task/templates/task_list.html

{% extends 'base.html' %}

{% block content %}
  {{ name }}
{% endblock %}

この状態で、ターミナルで、

$ python manage.py runserver

をし、http://localhost:8000 にアクセスしてみてください。

すると、テストと表示されると思います!

views.pyとurl.pyとhtmlの関係

htmlファイルとは、webページに表示するものを記述するものです。
Djangoを初めてやる方は、views.py urls.pyとは何のことだ?と思われたと思います。

views.pyはhtmlに表示する内容を、その時々によって決めてくれるものになります。

例えば、今回の例でいうと、html(task/templates/task_list.html)に書いてある、{{ name }}の値を、views.pyで決めることができます。

"name":"テスト" とすると、テストが表示されますし、nameをcatとすると、catという文字列がhtmlに表示されるようになります。

今回の例では、nameをただ表示させるだけなので、あまりviews.pyの恩恵は得られていませんが、データベースに保存した複雑なデータを表示させたいとき、views.pyがあることで、瞬時にhtmlの内容を書き変えることができます。

urls.pyは、記述したhtmlのパスのありかをインターネットに教えるような役割をしています。今回の例でいうと、TaskViewに紐付いた、task_list.htmlをルートパス(ローカルだとhttp://localhost:8000/)に表示するという内容をurls.pyに書いています。
次回の記事⏩

次回の記事では、models.pyで、Taskモデルを定義し、やることリストを登録して、htmlに表示させることができるようにしていきます!

次回も読みたい方は、スキを貰えると嬉しいです。

おまけ記事

⏩webサービスの作り方が気になったら

⏩webエンジニアの働き方が気になったら

作者のプロフィール

https://veil-vinca-83f.notion.site/b5b066fb0fd24f0684901973bd6f895d

この記事が気に入ったらサポートをしてみませんか？