Djangoメモ -templateフォルダの作成-

はじめに

今回は、web制作の第二回ということで、今回やっていくことは、templateフォルダの作成とwebページを動的にしていくということを行っていきます。

web制作

1,templatesフォルダを制作

以下の場所に"templates"という名のフォルダを作ってください。

プロジェクト名
├── プロジェクト名
├── アプリ名
├── templates　←ここだよ
├── manage.py
└── db.sqlite3

2,tamplatesフォルダを読み取れるように設定

このままではtemplatesフォルダを作ってもdjangoがどこにtemplatesファイルがあるのかわからなくなってしまいます。そのため、プロジェクト名フォルダの中のsettings.pyをいじっていきます。以下のように書き換えてください

プロジェクト名/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR,'templates'], #<-ここが変わった
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

一応説明しますと、BASE_DIRとは名前の通りベースのディレクトリです。その中の'templates'を参照するといことです。これで、urls.pyだったりviews.pyだったりの橋渡しができました。views.pyで使った変数名などを{{　}}で囲ってhtml内などで使うことができます。以下の記事でもっと詳しく説明しているので張っておきます。
【ソースコード付き】Django テンプレート　使い方まとめ

3,index.htmlとviews.pyの書き換え

次に行っていくのは、表示するページの中身を作っていくのとそれを表示するために、views.pyを書き換えていきます。それではindex.htmlを以下の場所に作ってください。

プロジェクト名
├── プロジェクト名
├── アプリ名
├── template
│   └── index.html←ここ
├── manage.py
└── db.sqlite3

次にindex.htmlを以下のように書いてください（htmlの知識がある人は好きにカスタマイズしちゃって大丈夫です）

templates/index.html

<h1>
    Hello World!!!!
</h1>

できましたら次はアプリ名フォルダの中のview.pyに移動して以下のように書き換えてください。

アプリ名/views.py

from django.shortcuts import render #今回renderというものを使います
from django.http import HttpResponse #djangoから簡易的なテキストを表示する関数を引っ張ってくる

# Create your views here.
def index(request): 
    return render(request, 'index.html')#ここが書き換わった

以下のように表示されれば成功です。

また以下のようなエラーが表示された場合
は先ほどの、settings.pyでのtemplatesファイルとの橋渡しがうまくいってない場合があります。template"s"ファイルなのにtemplate" "ファイルになっていることがしばしばあるのでよくファイル名などを確認してみてください。それでも解決しない場合はエラー内容をchatgptにぶち込んでしまえば大体治ります。(ググって自力解決のほうが知識は付きます)

renderとは

renderとは何ぞやと思った方も多いと思います。少し解説するとrenderとはレンダリングの略であり、ざっくり言うとrequestが来た時に指定したhtmlファイルを構成してrequest元に返すというものです。詳しいことはここに書いてあります。この後、redirectというものが出てくるのですが、それの解説とrenderとの違いは出てきたときに解説します。

4,変数を渡す

今まではページの内容を変えるためには、htmlファイルであるindex.htmlを書き換えないとページの内容が変わりませんでしたよね。ですが世の中に出回っているwebサイトは入ったとたんに自分のユーザー名が表示されたりしますよね。あれは、いちいちhtmlファイルを書き換えているのではなくviews.pyから変数を渡してその変数をhtmlファイルであるindex.htnlに埋め込んで表示しています。その方法を、教えていきたいと思います。
views.pyとindex.htmlファイルを以下のように書き換えてださい。

アプリ名/views.py

def index(request): 
    name = 'med'#ここと
    return render(request, 'index.html',{'name':name})#ここが書き換わった

tamplates/index.html

<h1>
    Hello World!!!!<br>
    Hey {{name}}
</h1>

views.pyではnameという変数に'med'の文字列を代入し、renderのところではname変数に'name'という名前をつけてindex.htmlに渡している。
それを、index.htmlでは{{}}で変数名をくくることによってviews.pyから渡した変数を表示することができる。以下のようになれば成功です。

5,辞書を渡す

変数のほかにも辞書型のものを渡すことができます。
views.pyとindex.htmlを以下のように書き換えてください

アプリ名/views.py

def index(request): 
    context = {
        'name': 'med',
        'age': 20,
        'nationality': 'Japanese',
    }#辞書追加
    return render(request, 'index.html',context)#ここが書き換わった

templates/index.html

<h1>
    Hello World!!!!<br>
    My name is {{name}}.<br>
    My age is {{age}}.<br>
    My nationality is {{nationality}}.
</h1>

こうなっていれば成功です

終わりに

お疲れさまでした。今回はtemplatesファイルの作成からviews.pyで引数や辞書を渡すところまで来ました。これで静的だけでなく動的なwebサイトを作れるようになりましたね！次回はwebサイト内で入力をするformというものをやっていきます。これを使って簡易的な文字数カウンターアプリを作成します。これが作れるようになると一気にwebアプリのようになっていきます！！乞うご期待！！！