Django+Reactで学ぶプログラミング基礎(5): Djangoチュートリアル(投票アプリその1)

##### [前回] [Django+Reactで学ぶプログラミング基礎(4): 開発環境構築(Redux)](https://qiita.com/mingchun_zhao/items/095a7d7ee5ac58cc0f51)

## はじめに

開発環境が整いました。
[Django公式チュートリアル](https://docs.djangoproject.com/ja/4.0/intro/tutorial01/)を実践します。

## Djangoアプリ作成(その1): 投票(poll)アプリ

### チュートリアルの内容

- プロジェクトを作成
- 開発用サーバーを起動/確認
- 投票アプリを作成
- ビューを作成

### アプリ構成

投票アプリケーションは2つの部分で構成される
- 公開用サイト
    - ユーザが投票/結果表示
- 管理(admin)サイト
    - 投票項目の追加/変更/削除

### 事前準備

- VS Codeのターミナルで、仮想環境をアクティベート
```
C:\kanban>venv\.venv\Scripts\activate

(venv) C:\kanban>python -m django --version
```

- Djangoバージョンを確認
```
(venv) C:\kanban>python -m django --version  
4.0.5
```

### プロジェクトを作成

- プロジェクトとは
    - Djangoインスタンスの下記設定を集めたもの
        - データベースの設定
        - Django固有オプション
        - アプリケーション固有設定
- プロジェクトの名前
    - 組み込みPythonモジュールやDjangoコンポーネントの名前と衝突しないように
    - NGパターン
        - `django`: Django自体の名前
        - `test`: 組み込みPythonパッケージ名
- コードの置き場所
    - ドキュメントルートの外
        - 例えば、`/home/mycode`のような場所に置く
- プロジェクト作成
```
(venv) C:\kanban>django-admin startproject pollsite
``` 
- プロジェクトのディレクトリ構成を確認
```
(venv) C:\kanban>cd pollsite
(venv) C:\kanban\pollsite>tree /F .
C:\KANBAN\POLLSITE
│  manage.py
│  
└─pollsite
        asgi.py
        settings.py
        urls.py
        wsgi.py
        __init__.py
```

#### ファイルの役割

- `C:\KANBAN\POLLSITE`
    - プロジェクトのコンテナで、名前は任意
- `manage.py`
    - コマンドラインユーティリティ
        - Djangoプロジェクトに対し、様々な操作を行う
- `pollsite`ディレクトリ
    - プロジェクトのPythonパッケージで、importで使用する名前
        - 例えば、`import pollsite.urls`
- `pollsite/__init__.py`
    - 空のファイル、PythonにこのディレクトリがPythonパッケージであることを知らせる
- `pollsite/settings.py`
    - Djangoプロジェクトの設定ファイル
- `pollsite/urls.py`
    - DjangoプロジェクトのURL宣言
- `pollsite/wsgi.py`
    - WSGI(Web Server Gateway Interface)互換Webサーバーとのエントリーポイント
        - Pythonにおいて、Webサーバー/アプリケーションを接続するための、標準化されたインタフェース定義
- `pollsite/asgi.py`
    - ASGI(非同期サーバーゲートウェイインターフェイス)互換Webサーバーのエントリポイント
        - Pythonにおいて、Webサーバー/フレームワーク/アプリケーション間の標準インターフェイスを提供
    - WSGIの後継

### プロジェクトの開発サーバーを起動

- 外側のpollsiteディレクトリで、以下コマンドを実行
```
(venv) C:\kanban\pollsite>python manage.py runserver
... ...
Django version 4.0.5, using settings 'pollsite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```
- ブラウザから起動確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/1377f143-a6a4-b571-f883-214c477ba948.png)

## 投票アプリケーションを作成

### Djangoプロジェクトにアプリケーションを追加
- 所定規約に従ったPythonパッケージで構成される
- Djangoのユーティリティで、基本的なディレクトリ構造を自動生成
    - コーディングに集中できる
### アプリの配置場所
- Pythonパス上の任意場所
- プロジェクトのトップレベルモジュールとしてインポート(サブモジュールではなく)
    - `manage.py`ファイルと同じディレクトリにアプリ作成

### アプリ作成

- VS Codeで、新しいターミナルを開き、仮想環境をアクティベート
```
C:\kanban>venv\.venv\Scripts\activate
```
- `manage.py`ファイルと同じディレクトリで、アプリ作成
```
(venv) C:\kanban>cd pollsite
(venv) C:\kanban\pollsite>dir
... ...
2022/06/05  18:06                 0 db.sqlite3
2022/06/05  16:38               686 manage.py
2022/06/05  18:06    <DIR>          pollsite
(venv) C:\kanban\pollsite>python manage.py startapp polls
```

- `polls`ディレクトリ構成
```
(venv) C:\kanban\pollsite>tree /F polls 
... ...
C:\KANBAN\POLLSITE\POLLS
│  admin.py
│  apps.py
│  models.py
│  tests.py
│  views.py
│  __init__.py
│
└─migrations
        __init__.py
```

### アプリ開発

#### VS Codeにプロジェクトを追加
- VS Codeのメニューで、`ファイル`/`フォルダーを開く`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/9ed2a248-20e6-5177-9708-0ad664e9bde0.png)
- pollsiteディレクトリを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/b105752a-b36d-5c5d-19f5-abe34e6f4dd1.png)

#### ビューを作成(名前: `index`)

- `polls/views.py`を開き、以下のPythonコードを記述
```polls/views.py
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/10287e5b-0089-711e-cea6-62170c2333bf.png)
- URLconfを作成し、ビューを呼び出すためのURLを指定
    - pollsディレクトリに`urls.py`ファイル追加
```polls/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/bfd59aae-1016-00b8-ec52-02fcac724aa6.png)


- ルート`pollsite`の`URLconf`に`polls.urls`モジュールの記述を反映
    - `pollsite/urls.py`で
        - `django.urls.include`をインポート
        - `urlpatterns`のリストに`include()`を挿入
        - `include()`関数の機能
            - 他の`URLconf`を参照可能
            - リクエストのURLから、現在位置までの部分を取り除き、残りの部分のみ`include`された`URLconf`へ渡す
                - こうすることで、URLを簡単にプラグ&プレイ可能に
                    - `polls`アプリは独自の`URLconf`(`polls/urls.py`)を持っているので
                    - どのパスルート下に置いてもきちんと動作する

```pollsite/urls.py
from django.contrib import admin
from django.urls import include, path

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/51b6fbc1-d270-516f-c5d4-6f770dcddff7.png) 

これで、`index`ビューとURLconfを紐付けできました。

#### アプリ動作確認

- VS Codeのターミナルで、仮想環境をアクティベート
```
C:\kanban\pollsite>..\venv\.venv\Scripts\activate
```
- プロジェクトの開発サーバーを起動
```
(venv) C:\kanban\pollsite>python manage.py runserver
... ...
Django version 4.0.5, using settings 'pollsite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
```
- ブラウザで`http://localhost:8000/polls/`にアクセス
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/be1246ba-a999-9217-bc61-8d366f618e13.png)


## おわりに

Djangoチュートリアルを通しながら、基本知識を理解しました。
次回も続きます。お楽しみに。

##### [次回] [Django+Reactで学ぶプログラミング基礎(6): Djangoチュートリアル(投票アプリその2)](https://qiita.com/mingchun_zhao/items/8fe318c2e2a554818793)