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

[前回] Django+Reactで学ぶプログラミング基礎(4): 開発環境構築(Redux)

はじめに

開発環境が整いました。
Django公式チュートリアルを実践します。

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.

ブラウザから起動確認

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

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のメニューで、ファイル/フォルダーを開く
pollsiteディレクトリを選択

ビューを作成(名前: `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.")

URLconfを作成し、ビューを呼び出すためのURLを指定
- pollsディレクトリにurls.pyファイル追加

polls/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

ルート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),
]

これで、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/にアクセス

おわりに

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

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

[前回] Django+Reactで学ぶプログラミング基礎(4): 開発環境構築(Redux)

はじめに

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

チュートリアルの内容

アプリ構成

事前準備

プロジェクトを作成

ファイルの役割

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

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

Djangoプロジェクトにアプリケーションを追加

アプリの配置場所

アプリ作成

アプリ開発

VS Codeにプロジェクトを追加

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

アプリ動作確認

おわりに

[次回] Django+Reactで学ぶプログラミング基礎(6): Djangoチュートリアル(投票アプリその2)

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