Go to Qiita Advent Calendar 2024 Top
LoginSignup
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@mingchun_zhao(趙 明春)inＡＲアドバンストテクノロジ株式会社（ARI）

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

Last updated at Posted at 2022-06-05
[前回] 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.
  • ブラウザから起動確認
    image.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
  • pollsiteディレクトリを選択
    image.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

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

from . import views

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

image.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

これで、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

おわりに

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?