#1 Python Django による Web 開発入門

みなさま、はじめまして Akron と申します。
今回は機械学習で注目を集めている Python で実装された Web アプリケーションフレームワークである Django を用いた Web 開発の入門講座です。

Django はフルスタックな Web フレームワークであり、様々な機能がすでに実装されているため、学習コストが比較的少なく Web システムの開発を行うことができます。

私自身は一応プロとして、Django の実務経験もあるため、実際の現場の感覚も含めて、初学者にも分かりやすく応用の効く形で進められたらと思っています。Web システムを一通り開発してみることは、きっと多くの学びがあります。是非最後までお付き合いいただけますと幸いです。

では、さっそく始めて行きましょう。

YouTube に講座の動画も配信しましたので、一度ご視聴いただければと思います。(息の吹かれなどノイズが多少気になりますが、ご容赦ください..)

はじめに

本講座の開発環境は下記のとおりです。執筆時 (2021/01) の最新版になります。Windows OS の方は適宜読み替えてもらう必要があります。

■ 開発環境
・macOS 11.1 Big Sur
・Python 3.9
・Django 3.1.5

Python および Django は公式のドキュメントが充実しています。開発に行き詰まったとき、初学者の方は Qiita やブログなど読みやすいメディアをつい探してしまうことが多いように感じますが、なるべく公式のドキュメントを見るように心がけましょう。

3.13.0 Documentation

Django ドキュメント | Django ドキュメント | Django

#1 (今回の講義) で行うこと

Python Django の環境構築、プロジェクト作成、ウェルカムページの確認までを行います。

ソース コード エディタ

現在のトレンドである Visual Studio Code (VSCode) を使いますが、使用しているエディタがあれば、別のエディタでも構いません。VSCode は macOS / Windows OS ともに対応しています。

Visual Studio Code – コード エディター | Microsoft Azure

Python をインストールする

macOS には既定で Python 2.7 がインストールされていますが、Python 2 系のサポートは終了しているため、Python 3 系をインストールしていきます。

~ $ python -V
Python 2.7.16

本講座では Homebrew という macOS 用のパッケージマネージャーを介して、Python 3 をインストールする方法を紹介しますが、他のインストール方法でも問題ありません。

Homebrew

ターミナルを立ち上げて下記のコマンドを入力して、Homebrew をインストールします。Xcode Command Line Tools がインストールされていない場合は、インストールを求められるため、画面の指示に従って操作してください。

~ $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

brew -v で Homebrew のバージョンを確認できれば、インストール完了です。

~ $ brew -v
Homebrew 2.7.2
Homebrew/homebrew-core (git revision d31422; last commit 2021-01-07)

次に brew install python とコマンドを入力してください。現時点ではバージョンを明示的に指定しなくても、Python 3 系がインストールされます。

~ $ brew install python

≈≈≈≈≈≈≈ 省略 ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈

==> python@3.9
Python has been installed as
 /usr/local/bin/python3

Unversioned symlinks `python`, `python-config`, `pip` etc. pointing to
`python3`, `python3-config`, `pip3` etc., respectively, have been installed into
 /usr/local/opt/python@3.9/libexec/bin

You can install Python packages with
 pip3 install <package>
They will install into the site-package directory
 /usr/local/lib/python3.9/site-packages

Python 3.9.1 がインストールされました。Python 2 系と共存している状態になっており、python コマンドでは Python 2系、python 3 コマンドでは Python 3 系が使用できます。

~ $ python3 -V
Python 3.9.1
 
​~ $ python -V
Python 2.7.16

Python をインストールする (Windows OS)
Windows OS の場合は、Microsoft ストアからインストールすることもできますが、公式サイト (python.org) のインストーラー を使用することをお勧めします。(詳細は省きますが、先日ストアでインストールしたことに起因したエラーに出くわしたためです)​

Python Releases for Windows

Windows での Python の使用についてよく寄せられる質問

Python の仮想環境を構成する
通常、macOS に導入した Python をそのまま使用するということはせずに、Python の仮想環境を作り、仮想環境上の Python を使います。Python には pip というパッケージ管理システムがあるのですが、仮想環境を作ることで、プロジェクトごとにパッケージの導入状態を管理することができます。

はじめに、今回 Django で作業するためのワークディレクトリを作成します。ここでは Django というディレクトリを作成しました。

~ $ mkdir Django
~ $ cd Django
Django $

venv コマンドを使って Python の仮想環境を構成します。コマンドは python3 -m venv <ターゲット ディレクトリ> という形式になり、ターゲット ディレクトリが作成され、そこに仮想環境が作成されます。

Django $ python3 -m venv Django

上記のコマンドでは、ワークディレクトリ内に更に Django というディレクトリが作成され、そこに Python の仮想環境が作成されます。

Django $ ls -la ./Django/
total 24
drwxr-xr-x   7 akira  staff   224  1  8 03:42 .
drwxr-xr-x   5 akira  staff   160  1  8 03:05 ..
-rw-r--r--@  1 akira  staff  6148  1  8 03:43 .DS_Store
drwxr-xr-x  25 akira  staff   800  1  8 03:59 bin
drwxr-xr-x   2 akira  staff    64  1  8 02:52 include
drwxr-xr-x   4 akira  staff   128  1  8 03:43 lib
-rw-r--r--   1 akira  staff    75  1  8 02:52 pyvenv.cfg

Python の仮想環境を有効にするには source <ターゲット ディレクトリ>/bin/activate というコマンドを実行します。

Django $ source Django/bin/activate
(Django) Django $

Python の仮想環境が有効になっている状態から、無効に戻す場合には deactivate コマンドを使用します。

(Django) Django $ deactivate
Django $ 

Django をインストールする

執筆時 (2021/1) の最新版である Django 3.1.5 をインストールします。仮想環境が有効になっている状態から、pip install Django==3.1.5 と入力します。

(Django) Django $ pip install Django==3.1.5

Collecting Django==3.1.5
 Downloading Django-3.1.5-py3-none-any.whl (7.8 MB)
    |████████████████████████████████| 7.8 MB 3.4 MB/s
Collecting sqlparse>=0.2.2
 Downloading sqlparse-0.4.1-py3-none-any.whl (42 kB)
    |████████████████████████████████| 42 kB 1.7 MB/s
Collecting pytz
 Downloading pytz-2020.5-py2.py3-none-any.whl (510 kB)
    |████████████████████████████████| 510 kB 8.8 MB/s
Collecting asgiref<4,>=3.2.10
 Downloading asgiref-3.3.1-py3-none-any.whl (19 kB)
Installing collected packages: sqlparse, pytz, asgiref, Django
Successfully installed Django-3.1.5 asgiref-3.3.1 pytz-2020.5 sqlparse-0.4.1

pip freeze と入力するとインストール済みのパッケージの一覧が表示され、Django 3.1.5 がインストールされていることを確認できます。

(Django) Django $ pip freeze
asgiref==3.3.1
Django==3.1.5
pytz==2020.5
sqlparse==0.4.1

pip (パッケージ管理システム) のバージョンが古い場合は WARNING が表示されます。

WARNING: You are using pip version 20.2.3; however, version 20.3.3 is available.
You should consider upgrading via the '/Users/akira/Django/Django/bin/python3 -m pip install --upgrade pip' command.

その際は、画面の指示に従ってコマンドを入力し、pip のアップグレードを行いましょう。

(Django) Django $ /Users/akira/Django/Django/bin/python3 -m pip install --upgrade pip
Collecting pip
 Downloading pip-20.3.3-py2.py3-none-any.whl (1.5 MB)
    |████████████████████████████████| 1.5 MB 4.3 MB/s
Installing collected packages: pip
 Attempting uninstall: pip
   Found existing installation: pip 20.2.3
   Uninstalling pip-20.2.3:
     Successfully uninstalled pip-20.2.3
Successfully installed pip-20.3.3

Django プロジェクトの作成

Django のプロジェクトを作成していきます。Project というディレクトリを作り、その中で Django のプロジェクトを作ることにしました。

(Django) Django $ mkdir Project
(Django) Django $ cd Project/

Django でプロジェクトを作成するためには django-admin startproject <プロジェクト名> というコマンドを入力します。

今回はタピオカドリンクを販売するシステムを作ることに決めたので、'tapioca shop' というプロジェクトを作成します。Django のプロジェクト名にハイフンは使用できません。

(Django) Project $ django-admin startproject tapioca-shop
CommandError: 'tapioca-shop' is not a valid project name. Please make sure the name is a valid identifier.

django-admin startproject tapioca_shop コマンドを入力して、'tapioca_shop' というプロジェクトを作成しましょう。

(Django) Project $ django-admin startproject tapioca_shop

'tapioca_shop' というディレクトリが作成され、必要なファイルが自動的に生成されています。

(Django) Project $ ls -la tapioca_shop/
total 8
drwxr-xr-x  4 akira  staff  128  1  8 03:09 .
drwxr-xr-x  3 akira  staff   96  1  8 03:09 ..
-rwxr-xr-x  1 akira  staff  668  1  8 03:09 manage.py
drwxr-xr-x  7 akira  staff  224  1  8 03:09 tapioca_shop

'tapioca_shop' ディレクトリ内にある manage.py を実行すると Django で使用できるコマンドの一覧が表示されます。

よく使うコマンドとしては、管理者ユーザーの作成 (createsuperuser)、データベースのマイグレーション (migrate)、プロジェクトやアプリの作成 (startapp、startproject)、開発サーバーの起動 (runserver) などのコマンドがあります。

(Django) tapioca_shop $ python manage.py 

Type 'manage.py help <subcommand>' for help on a specific subcommand.
Available subcommands:

[auth]
   changepassword
   createsuperuser
[contenttypes]
   remove_stale_contenttypes
[django]
   check
   compilemessages
   createcachetable
   dbshell
   diffsettings
   dumpdata
   flush
   inspectdb
   loaddata
   makemessages
   makemigrations
   migrate
   sendtestemail
   shell
   showmigrations
   sqlflush
   sqlmigrate
   sqlsequencereset
   squashmigrations
   startapp
   startproject
   test
   testserver
[sessions]
   clearsessions
[staticfiles]
   collectstatic
   findstatic
   runserver

django-admin and manage.py | Django documentation | Django

また、Python は対話モードの機能もあるため、python とコマンドを入力して、インタラクティブシェルを使用できます。

(Django) tapioca_shop $ python
Python 3.9.1 (default, Dec 29 2020, 09:45:39) 
[Clang 12.0.0 (clang-1200.0.32.28)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>> 1+2+3
6
>>> "Ak" + "ron"
'Akron'
>>> exit()

ウェルカムページの確認

Django の開発サーバーを起動して、ウェルカムページを表示してみましょう。python manage.py runserver コマンドを入力します。

既定ではローカルホストの 8000 番ポートを使用して開発サーバーが起動します。python manage.py runserver <ポート番号> の形式でポート番号を変更できます。

(Django) Project $ cd tapioca_shop/
(Django) tapioca_shop $ python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

January 07, 2021 - 18:19:33
Django version 3.1.5, using settings 'tapioca_shop.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

[07/Jan/2021 18:20:15] "GET / HTTP/1.1" 200 16351
[07/Jan/2021 18:20:15] "GET /static/admin/css/fonts.css HTTP/1.1" 200 423
[07/Jan/2021 18:20:15] "GET /static/admin/fonts/Roboto-Light-webfont.woff HTTP/1.1" 200 85692
[07/Jan/2021 18:20:15] "GET /static/admin/fonts/Roboto-Bold-webfont.woff HTTP/1.1" 200 86184
[07/Jan/2021 18:20:15] "GET /static/admin/fonts/Roboto-Regular-webfont.woff HTTP/1.1" 200 85876
Not Found: /favicon.ico
[07/Jan/2021 18:20:15] "GET /favicon.ico HTTP/1.1" 404 1978

ブラウザから http://127.0.0.1:8000/ にアクセスしてください。Django のウェルカムページが表示されます。

Django アプリの追加

Django プロジェクトにアプリを追加します。コマンドは python manage.py startapp <アプリ名> という形式になります

商品を管理する product、注文を管理する order の2つのアプリを追加します。※ 動作に問題はありませんが、アプリ名の命名は複数形 (products、orders) の方が慣例 (デザイン) 的に良いです (すみません、今回命名は修正せずに進めます)

(Django) tapioca_shop $ python manage.py startapp product
(Django) tapioca_shop $ python manage.py startapp order

コマンド入力後に product、order の2つのディレクトリが作成され、各ディレクトリ内にアプリに必要なファイルが生成されています。

(Django) tapioca_shop $ ls -la
total 8
drwxr-xr-x  7 akira  staff  224  1  8 03:26 .
drwxr-xr-x  3 akira  staff   96  1  8 03:09 ..
-rw-r--r--  1 akira  staff    0  1  8 03:19 db.sqlite3
-rwxr-xr-x  1 akira  staff  668  1  8 03:09 manage.py
drwxr-xr-x  9 akira  staff  288  1  8 03:26 orders
drwxr-xr-x  9 akira  staff  288  1  8 03:26 products
drwxr-xr-x  8 akira  staff  256  1  8 03:19 tapioca_shop

商品一覧画面の骨組みの作成

product ディレクトリ配下の views.py を編集していきます。/product にアクセスしたとき、商品一覧を返すようにするための骨組みを作っていきます。

./tapioca_shop/products/views.py

views.py のソース コードを下記の通り変更してください。1行目で django.http モジュールの HttpResponse クラスをインポートしています。3行目で index というメソッドを定義し、HttpResponse("画面の内容を記述") を返すようにします。

from django.http import HttpResponse

def index(request):
   return HttpResponse("product List Page")

作成した index メソッドと URL を紐付けていきます。product ディレクトリ配下に urls.py というファイルを新しく作成します。 urls.py のソース コードを下記の通り変更してください。

./tapioca_shop/products/urls.py

URL 設計のための urlpatterns の形式は下記のようになります。
path('<URL となるパス>', <呼び出される関数>, name='<エントリー名>')

path('', views.index, name='index') と記述した場合は直下 ('') のアクセスに対して、views.index メソッドがエントリー名 index として紐付けられることになります。

from django.urls import path

from . import views

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

続けて、プロジェクトの URL 設計に products.urls を読み込ませるために tapioca_shop 直下の urls.py も編集していきます。urls.py のソース コードを下記の通り変更してください。

django.urls モジュールの include クラスをインポートして、include クラスにより、さきほど作成した products.urls をインポートします。

./tapioca_shop/tapioca_shop/urls.py

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

urlpatterns = [
   path('product/', include('products.urls')),
   path('admin/', admin.site.urls),
]

編集したファイルをすべて保存し、再度 python manage.py runserver を実行 (開発サーバーを起動) します。

January 07, 2021 - 18:35:46
Django version 3.1.5, using settings 'tapioca_shop.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Not Found: /
[07/Jan/2021 18:37:26] "GET / HTTP/1.1" 404 2035

[07/Jan/2021 18:37:34] "GET /product/ HTTP/1.1" 200 17

Not Found: /order
[07/Jan/2021 18:38:01] "GET /order HTTP/1.1" 404 2068

/product にアクセスすると product 配下の views.index メソッドが実行され、HttpResponse クラスに記述した内容がブラウザの画面に表示されます

/order にアクセスしても、まだ URL が紐付けられていないため、HTTP 404 Not Found (ページが見つかりません) が表示されます

ここまでのお付き合い、ありがとうございました。#1 は終了になります。お疲れ様でした。次回 #2 では Model について解説します。

#1 終わりに

お疲れさまでした！いかがでしたでしょうか。当初のところ、この活動は2021年1月中限りを考えておりましたが、想定以上に時間がかかり、#1 しかできていない状態です。反響 (チャンネルの登録者数 15人以上) があれば #2 も作成しますので、お待ちください。今後もすべて無償で提供していきますため、みなさまの学びのお役に立てたら嬉しいです。

@akirayamazaki