DjangoでHello Worldアプリを、Class Based Viewで表示せてみた

#概要
Djangoで指定されたURLにアクセスすると、Hello Worldと表示させるような、簡単なアプリケーションを作成します。

なお、環境は`python 3.7.3`、`django 2.2`になります。

以前の投稿した[「DjangoでHello Worldアプリの作成手順」](https://qiita.com/yamada92/items/e545c6258672d88b7707)の別バージョンになります。

（前回からの変更は、手順の`3-2.`、`3-3.`のみになります。）

#1. プロジェクト作成
1-1. まずはプロジェクトファイルを作りたいので、下記のコマンドでディレクトリを作成します。

```:terminal
mkdir helloworld
```

1-2. 次に`helloworldproject`というプロジェクトを作成します。最後の`.`は正しいので、そのとおり実行してください。（ディレクトリは`helloworld`であることを確認してください）

```:terminal
~/helloworld$ django-admin startproject helloworldproject .
```

1-3. コマンドを実行すると`helloworld`ディレクトリには、下記のようにファイルが生成されます。

```:helloworld/
helloworld
├── helloworldproject
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
```

#2. アプリケーションを作成
2-1. 新しくアプリケーションを作成したいので、下記のコマンドを実行します。今回は、`helloworldapp`というアプリケーションです。

```:terminal
~/helloworld$ python manage.py startapp helloworldapp
```

実行したらディレクトリは下記のようになると思います。

ざっくり３つに分けると、`helloworld`プロジェクトファイル内に、①`helloworldapp`というアプリケーション、②`helloworldproject`というプロジェクト、③`manage.py`ファイルになります。

```:helloworld/
helloworld
├── helloworldapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── helloworldproject
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   └── settings.cpython-37.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
```

2-2. `helloworldproject`の`settings.py`にある`INSTALLED_APPS`に、`hellowroldapp`を追加します。

```python:helloworldproject/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    #追加
    'helloworldapp',
]
```


2-3. `Hello World`を書く、`index.html`を表示できるよう`TEMPLATES`にも設定をします。`DIRS`に`[BASE_DIR, 'templates'`を追加します。

```python:helloworldproject/settings.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',
            ],
        },
    },
]
```

#3. Hello Worldを表示させよう
3-1. まずは、`helloworldproject/urls.py`に下記のように追加してください。

```python:helloworldproject/urls.py
from django.contrib import admin
#includeを追加
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    #追加
    path('', include('helloworldapp.urls'))
]
```

3-2. `helloworldapp`に`urls.py`ファイルを新規作成して、下記のコードを追加してください。これで、`https://サイト名.com/hello`とアクセスすれば、`helloworldapp`が実行されるようになります。

```python:hellowordapp/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('hello/', views.HelloWorldFunction.as_view()),
]
```


3-3. 後ほど作成する`index.html`ファイルにアクセスできるよう、`views.py`にコードを追加してください。

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

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


3-4. `templates`フォルダーを`helloworld`に新規作成してください。その中に`index.html`を新規作成し、下記のようにしてください。

```html:helloworld/templates/index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>
```

ディレクトリは下記のようになるはずです。

```:helloworld/
helloworld
├── helloworldapp
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── helloworldproject
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-37.pyc
│   │   └── settings.cpython-37.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
└── templates
    └── index.html
```

3-5. 最後に下記のコマンドを実行してください。

```:terminal
~/helloworld$ python manage.py migrate
```

#4. localhost起動
4-1. localhostを起動して、`Hello World`が表示されるか確認したいので、`runserver`を実行します。

```:terminal
~/helloworld$ python manage.py runserver
```

4-2. [http://localhost:8000/hello](http://localhost:8000/hello)をブラウザーで確認して、`Hello World`と表示されていれば、正しく実行できています。


以上