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

[前回] 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で学ぶプログラミング基礎(6): Djangoチュートリアル(投票アプリその2)