Djangoの初期設定〜HelloWorld表示まで（基礎の基礎）

#0 はじめに
Djangoプロジェクトの初期設定〜HelloWorldの表示までの一連の流れについてまとめました。Djangoでウェブアプリケーションを作成する際の基礎の基礎ですが、開発の最初でかならず踏むステップなので、メモとしても活用いただければと思います。（ご利用は自己責任でお願いします。）

#1 仮想環境の作成とDjangoのインストール

Django作業用フォルダの作成

```terminal
% mkdir python-django
```
作成したフォルダの下に入って仮想環境の作成。ここでは、virtualという名前の仮想環境を作ります。

```
python-django % python3 -m venv virtual
```
binフォルダまで移動

```
python-django % cd virtual

virtual % ls
bin             include         lib             pyvenv.cfg

virtual % cd bin

bin % ls
Activate.ps1            activate.csh            easy_install            pip                     pip3.9                  python3
activate                activate.fish           easy_install-3.9        pip3                    python                  python3.9
```

仮想環境をアクティベート。

```
bin % source activate
```
(virtual)がターミナルに表示されることを確認してください。
※仮想環境を抜ける場合には、"deactivate"と入力してリターンキーを押せばOKです。

Djangoのインストール

```
(virtual) bin % pip3 install django
```

#2 Django作業環境の作成
virtualフォルダの下にDjangoの作業環境を作ってみることにします。
まずは、フォルダの場所を移動してDjangoというフォルダをvirtualフォルダの直下に作ります。

```
(virtual) bin % cd ../
(virtual) virtual % mkdir Django 
(virtual) virtual % cd Django
```

firstappという名前でDjangoのプロジェクトを開始します。以下のコマンドと、プロジェクト名を入力してリターンキーを押します。

```
(virtual) Django % django-admin startproject firstapp
```

Djangoフォルダの下にfirstappというフォルダができていると思います。firstappの下には、firstappというフォルダと、manage.pyというファイルがあります。
このmanage.pyファイルがあるディレクトリに移動した上で以下のmanage.py startappコマンドを実行します。このコマンドではアプリ名を引数として入力しますが、ここではtodoというアプリ名を使うことにします。

```
(virtual) firstapp % python3 manage.py startapp todo
```

#3.Hello Worldと表示させてみる - 動作解説編
Webアプリケーションのコードを（他言語のフレームワークを含めて）触ったことがない方は、その仕組みを頭に入れた上でコードを書く必要があります。ここでは、Djangoのフレームワークを使ってHelloWorldを表示させる仕組みについて図を用いながら、解説をしておきたいと思います。
①ウェブサイトからDjangoフレームワークにリクエストが投げられます。
②最初にfirstapp/urls.pyというファイルでリクエストの受け付けをします。ここには、アプリフォルダに作ったtodo/urls.pyを見に行けということが書いてあるので、そこに飛びます。
③todo/urls.pyには、views.pyに定義しているhello関数を呼び出せということが書かれているので、views.pyを見にいきます。
④views.pyのhello関数が定義してあります。テンプレートフォルダにあるbase.htmlというファイル（テンプレート）を呼んできて、そこのobjectというキーに値（hw)を代入してウェブサイトをレンダリングせよということが書かれているので、ここでウェブサイトを合成します。
⑤④で合成したウェブサイトをブラウザに返します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280313/d0728356-e788-805b-c2a7-b0688cddd88b.png)

単にHelloWorldを表示させるためにここまで面倒なことをやるのか、と思われた方もいるかもしれませんが、この仕組みを使って、１つ１つhtmlファイルを作る必要がなくなり、テンプレートにコンテンツを入れて表示させることができているのです。

#4. Hello Worldと表示させてみる　- コード編
初期設定として、firstappフォルダのurls.pyを以下のように書き換えます。スタートページは、todoディレクトリのurls.pyを見に行けという内容です。

```python
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include('todo.urls')),
]
```

次にsettings.pyで、TODOアプリを認識させる必要がありますのでINSTALLED_APPSに'todo.apps.TodoConfig'を追加します。これは、todoフォルダのapps.pyのTodoConfigクラスを参照しています。

```python:settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'todo.apps.TodoConfig',
]
```
テンプレートを入れるフォルダを作って、settings.pyに登録作業を行います。manage.pyと同じディレクトリに、templatesという名前のフォルダを作成します。そして、settings.pyのTEMPLATESのところに以下の設定をします。

```python:settings.py
import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(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',
            ],
        },
    },
]
```

todoフォルダのurls.pyを編集します。firstappフォルダのurls.pyからtodoフォルダのurls.pyに飛んでくるので、todoフォルダのurls.pyに、（後ほど）viewsの中に記載する関数を呼び出すための命令を書きます。

```python:urls.py
from django.urls import path
from .views import hello

urlpatterns = [
    path('', hello, name='hello'),
]
```

では次にviews.pyを書いていきます。return renderがここでは肝になりますが、ここでは、requestがされたら、テンプレートとして、base.html（これはこの後作成します）を呼び出してきて、keyとしてobjectが指定されたら、hw（Hello World）を値として呼び出してくるという動作をします。

```python:views.py
from django.shortcuts import render

def hello(request):
    hw = 'Hello World!'
    return render(request, 'base.html', {'object':hw})
```

base.htmlを以下のように書いておきます。

```html:base.html
{{object}}
```
これで準備ができました。以下のコマンドを入力し、URLをクリックしてみてください。Hello World!と表示されるはずです。

```
(virtual) firstapp % python3 manage.py runserver
```