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

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

[【備忘録】Djangoを使って"Hello World"を出力する~Django初心者向け記事①~](https://qiita.com/bys888812/items/0568e250357704588cd1)


####この記事の目標と注意点
この記事では**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に以下を記入してください。

```HAML:index.html
<p>Hello World</p>
```

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

```python: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以下のものを書き込みます。

```python:views.py
from django.views.generic import TemplateView

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

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

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

```python:urls.py
from django.contrib import admin
from django.urls import path

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

```

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

```python: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で設定したものです。

<img width="119" alt="Screen Shot 10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303882/220e990f-95ac-bacc-642a-aff92aa85c73.png">


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

お疲れ様でした！


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

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

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