DjangoとVue.jsでシンプルなTodoアプリを作る 03.Djangoで文字を表示させよう
前回の記事では、アプリを作るセットアップをしていきました。
今回は、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