【Django】ファイルの関係性を解説しながらBMI計算アプリの作成　その２［Python］

2021年10月13日2022年12月9日

URLをコピーしました！

Django

前回、BMIアプリを作りつつ、ディレクトリ構造を示しながら、ファイルの関係性を解説してきました。

/testapp2/bmiapp/templates/bmiapp/index.html （新規作成）

ちょっと複雑なディレクトリ構造から始まりましたね。

/testapp2/bmiapp のところに「templates」フォルダを作成し、さらに「templates」フォルダの中に「bmiapp」フォルダを作成、そして「index.html」ファイルを作成します。

ということでディレクトリ構造はこう変わります。

testapp2
├── bmiapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates　　　　　　　＜ー追加
│   │   └── bmiapp　　　　　　 ＜ー追加
│   │       └── index.html　　＜ー追加
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
└── testapp2
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

index.htmlファイルの中身はとりあえず前に作ったcalcplusのindex.htmlと同じ内容にしておきましょう。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ title }}</h1>
    <p>Write code here!</p>
</body>
</html>

この「index.html」は「http://127.0.0.1:8000/bmiapp/」にアクセスしたら表示される内容が記載されています。

ただここで注目するのが {{ title }} という部分です。

この {{ title }} は実は変数なのですが、その変数の定義がこのファイル上ではどこにも記載されていません。

実はこの変数は「views.py」という違うファイルからくる変数なのです。

/testapp2/views.py

ということで変数を送っているファイル「views.py」を見ていきましょう。

ファイルの在処はこちらです。

../testapp2
├── bmiapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── bmiapp
│   │       └── index.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py　　　＜ーここ
├── manage.py
└── testapp2
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

とりあえず開いてみるとこんな感じ。

from django.shortcuts import render

# Create your views here.

これをこう書き換えます。

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    params = {
        'title':'BMI APP'
    }
    return render(request, 'bmiapp/index.html', params)

最初に「from django.http import HttpResponse」というインポート文が追加されていますが、これはhttp、つまりサーバーとブラウザで処理状態をやりとりするためのモジュールのようです。

そしてこちらのdef文。

def index(request):
    params = {
        'title':'BMI APP'
    }
    return render(request, 'bmiapp/index.html', params)

最初の index(request) が「/testapp2/bmiapp/templates/bmiapp/index.html」にアクセスされた時の動作を規定している部分です。

そして真ん中飛ばして最後の文。

return render(request, 'bmiapp/index.html', params)

「return render」で表示を返すことを指示しています。

ではその内容はというと「bmiapp/index.html」、さらに「params」というものが引数として追加されています。

その「params」を規定しているのが真ん中の部分。

    params = {
        'title':'BMI APP'
    }

ぱっと見分かりにくいですが、こう書き換えたらどうでしょうか。

params = {'title':'BMI APP'}

そう単純な辞書なのです。

そしてキーには「’title’」、その要素として「’BMI APP’」があるわけです。

つまり最後の文の意味としては「bmiapp/index.html」を表示するけど、その変数としてparamsを使いなさいとなるわけです。

表示して確認してみる

では本当かどうか確認してみましょう。

ターミナルから「python3 manage.py runserver」でDjangoを立ち上げ、ブラウザで「http://127.0.0.1:8000/bmiapp/」にアクセスしてみましょう。

するとこんな画面が表示されることでしょう。

先ほど「/testapp2/bmiapp/templates/bmiapp/index.html」に書いた内容が表示されていますが、 {{ title }}のところが「views.py」のparamsのtitleの要素である「BMI APP」が表示されていますね。

つまりこんな感じで動作しているわけです。

../testapp2
├── bmiapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── bmiapp
│   │       └── index.html　＜ー
│   ├── tests.py     　　　　　 ｜
│   ├── urls.py　　　　　　　 　 ｜ paramsを渡す
│   └── views.py ーーーーーーーーー
├── manage.py
└── testapp2
    ├── __init__.py
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py

本当かどうか「views.py」のparamsのtitleの要素を「BMI APPPPP」に変えて、再度アクセスしてみましょう。