【備忘録】DjangoでHTMLを使ってHello Worldを表示させる ~Django初心者向け記事②~

##はじめに
この記事はDjango学習者の初心者向けのものです。最近、PythonのフレームワークであるDjangoを使い始めましたのでDjangoの使い方を備忘録としてQiitaに保存しておきます。アウトプットの意味も込めても作成しています。この記事はDjango初心者向け記事の2つめになりますので、1つ目の記事を見てない方は以下からぜひご覧ください。

【備忘録】Djangoを使って"Hello World"を出力する~Django初心者向け記事①~

####この記事の目標と注意点
この記事ではMacでDjangoでHTMLを使用して画面上に「Hello World」と画面表示させます。
また冒頭で述べたように僕自身のエンジニアとしての知識が浅いため、言葉の定義や説明が不十分なところがあると思います。その際はご指摘いただけると幸いです！よろしくお願いします！

※Djangoのプロジェクト作成前の初期設定は他のサイトを参考にしてみてください。基本的には以下の2つのコマンドだけですが、、

brew install python3
pip3 install django
brewやpipコマンドのインストールの説明は割愛します。

#実行環境
僕の実行環境は
MacBook Pro (Retina, 13-inch, Early 2015)
Sublime text
Terminal
Python 3.6
Django 2, 2, 1

になります。
(実行環境に関して説明が不十分なところあれば教えてください！)

#早速やってみよう
####フォルダの作成
まず最初にやることはフォルダの作成です。適当なところにフォルダを作成しましょう。
mkdir HelloWorld
HelloWorldというフォルダを作成しました。

ではこのフォルダの中に移動します。
cd HelloWorld

####プロジェクトを作成する
いよいよDjangoのプロジェクトを作りましょう。以下のように入力してみましょう。
django-admin startproject hello .

上記のコマンドを打ち込むとフォルダの中に「hello」と「manage.py」の表示があると思います。さらに「HelloWorld」の中には色々とファイル(models.pyなど)があれば、プロジェクトの作成成功です。

####HTMLファイルの操作
まずは**「manage.py」と同じ階層に「templates」**というフォルダを作成してください。

templatesフォルダの中に「index.html」を作成しましょう。

作成したindex.htmlに以下を記入してください。

index.html

<p>Hello World</p>

####setting.pyをいじる
ここではsetting.pyをいじります。以下のところを修正してくだしさい。

setting.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR,'templates'],  #追記
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
 

追記した部分では最初に作成したtemplatesフォルダがどこにあるかを指定しています。

####views.pyをいじる
それでは作成したファイルをエディタで開いてみましょう。まずはhelloのフォルダの中に「views.py」を作成してください。
作成したらviews.py以下のものを書き込みます。

views.py

from django.views.generic import TemplateView

class SayHello(TemplateView):
    template_name = "index.html"

TemplateViewの部分は、そのクラスがどんな役割をしているのかを記述しています。(今回はHTMLを表示させること)

####urls.py　をいじる
デフォルトでは以下のように書いてあります。

urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),

それを以下のように追記してください。

urls.py

from django.contrib import admin
from django.urls import path
from .views import SayHello #追記

urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello', SayHello.as_view()()) #追記

SayHelloはviews.pyで作ったクラス名です。
.as_view()の部分はtemplatesを利用したクラスの場合にに付け足すものです。

これで準備完了です。

####サーバを立ち上げてみる
Djangoのサーバーの立ち上げは以下のコマンドでできます。

python manage.py runserver

ここでの注意は、サーバーを立ち上げるコマンドを使用するときの階層はmanage.pyのファイルがあるところで行ってください。(そうでないとmanage.pyが存在しませんなどのエラーがでる)

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

June 08, 2019 - 15:06:39
Django version 2.2.1, using settings 'helloworld.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

サーバーを立ち上げて上記のメッセージが出てきたら成功です。

それではhttp://127.0.0.1:8000/hello/のURLを開いてみてください。(8000の部分は各個人の環境によって異なることがあります。)
hello/の部分はurls.pyで設定したものです。

表示されましたか？
表示されなければコンソールにはエラーメッセージが出ていると思うので、それを参考に修正してみてください。

お疲れ様でした！

####終わりに
新米すぎるエンジニアなので、ミスがあったらどんどんコメントなどいただけると嬉しいです。僕自身の勉強になりますので！

次回はアプリケーションを接続して他のアプリケーションから「Hello World」を表示させてみる記事を書きます。

ありがとうございました。