【初心者向け】Windows上のDjangoで初歩的なアプリを作って表示させる方法の解説

1つ前の記事「【初心者にわかりやすく】WindowsにPython仮想環境を作り、Djangoをインストールする手順・方法を解説」では、初心者にWindowsにDjangoをインストールする方法をわかりやすく解説しました。

今回はそのインストールしたDjangoで簡単なアプリを作ってみる方法を解説します。

前提作業と環境：Djangoのインストール

今回の作業は、

• Windows10
• Djangoインストールずみ
• 仮想環境を起動ずみ（アクティベートずみ）
• 作業は（Powershellではなく）コマンドプロンプトを使用

という条件から始めます。これらの前提作業については、上述のように1つ前の記事「【初心者にわかりやすく】WindowsにPython仮想環境を作り、Djangoをインストールする手順・方法を解説」をご覧ください。

【初心者にわかりやすく】WindowsにPython仮想環境を作り、Djangoをインストールする手順・方法を解説

プロジェクトのフォルダへ移動

前回の作業で、Pythonの仮想環境（名前は、Django_on_AWS）を以下の場所につくりました。

c:\Users\hogehoge\Django_on_AWS

hogehogeというのが、みなさんが使っているPCにおけるユーザー名（アカウント名）です。そのフォルダの中に仮想環境名Django_on_AWSというフォルダを作っています。

まずそのプロジェクトフォルダへ移動します。コマンドプロンプト上（上述のように仮想環境はアクティブになっている状態です）で、

(Django_on_AWS) c:\Users\hogehoge>cd c:\Users\hogehoge\Django_on_AWS

と入力して実行。「cd」の後には、みなさんがこれから作るコードを保存したい場所を設定しましょう。

こうすると当初の、

(Django_on_AWS) c:\Users\hogehoge>

という表示が、

(Django_on_AWS) c:\Users\yasumitsu\Django_on_AWS>

と変わります。

プロジェクトの作成

新プロジェクト作成とその名前の付け方の注意点

ではそのDjango_on_AWSフォルダの中に、新しいプロジェクト（名前はmysite）を作ってみましょう。

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS>django-admin startproject mysite

これで、「mysite」というプロジェクト名のフォルダがDjango_on_AWSフォルダの中に作られます。公式ドキュメントでは「mysite」となっているのでそのまま使っています。

なおプロジェクト名については公式ドキュメントで次のような注意が書かれています。

プロジェクトの名前を付けるとき、組み込みの Python モジュールや Django のコンポーネントの名前を使わないようにしてください。とりわけ、 django (Django 自体と名前が衝突します) や test (組み込みの Python パッケージ名と名前が衝突します) を使わないようにしましょう。

プロジェクトの初期ファイルを確認

作成したそのtest01フォルダ内にどのようなデータが新しく作られたのか確認してみましょう。次のように入力します。

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS\mysite>dir /s /b

結果は、

c:\Users\hogehoge\Django_on_AWS\mysite\manage.py
c:\Users\hogehoge\Django_on_AWS\mysite\mysite
c:\Users\hogehoge\Django_on_AWS\mysite\mysite\asgi.py
c:\Users\hogehoge\Django_on_AWS\mysite\mysite\settings.py
c:\Users\hogehoge\Django_on_AWS\mysite\mysite\urls.py
c:\Users\hogehoge\Django_on_AWS\mysite\mysite\wsgi.py
c:\Users\hogehoge\Django_on_AWS\mysite\mysite\__init__.py

となりました。mysiteフォルダの中に、manage.pyというファイルと、そしてmysiteフォルダという同名のフォルダがまた作られ、その中にいくつかのファイルがあります。

開発用サーバーの起動と停止

起動

続いて開発用サーバーというものを起動させます。開発用サーバーが何かは今のレベルでは無視しましょう。

次のコマンドを入力して実行させます。

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS\mysite>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.
December 09, 2022 - 14:52:36
Django version 4.1.4, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

この中に赤文字で、

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.

が出現すると思いますが、これはデータベースについてのメッセージです。しかし、データベースについては今回の作業では使う必要はないので完全無視でOKです。

また上の結果の中に、

http://127.0.0.1:8000/

というアドレスが登場しています。これにアクセスしてみましょう。ブラウザでhttp://127.0.0.1:8000/を開きます。アドレスバーに入力してもらっていいです。次のように表示されるでしょう。

これでDjangoでの開発環境が最低限整ったことになります。

Windowsでの停止方法

起動させたサーバーですが、一度停止させます。

その停止方法ですが、上の起動時のメッセージの中で、

Quit the server with CTRL-BREAK

と書かれています。

これはサーバーを終了させたいならば「CTRL」キーと「BREAK」キーを押せという指示ですが、これ意味がわかりませんよね。Windows用の多くのキーボードに「BREAK」というキーはないのではないでしょう。

実は、大体のWindows用キーボードでは「CTRL」キー＋「Pause」キーでいけます。（Pauseキー自体がないものもあるかもしれませんが、その場合は「Pause」キーのかわりに、「Fn」キー＋「P」キーでいけることが多いようです）。

こうしたキーを押して一度停止させます。すると、コマンドプロンプトは再び、

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS\mysite>

という表示に戻ります。ここから次の作業を進めます。なお後ほどまた起動させます。

プロジェクトとアプリの違いとは？

プロジェクトとアプリの違いですが、公式ドキュメントでは次のように説明されています。

プロジェクトとアプリケーション

What’s the difference between a project and an app? An app is a web application that does something — e.g., a blog system, a database of public records or a small poll app. A project is a collection of configuration and apps for a particular website. A project can contain multiple apps. An app can be in multiple projects.

簡単にいえば、アプリとはウェブアプリケーションのことで、たとえばブログとか、性格診断テストサービスとか、占いサービスとかのネット上のサービス（WEBサイト）ですね。プロジェクトとは、そうしたアプリと設定データなどをまとめたものです。

1つのプロジェクト内に複数のアプリが存在することがありますし、1つのアプリが複数のプロジェクトで使われることもあります。

アプリの作成と表示

上述のように、これまでの作業で開発の最低限の環境が整ったので、毎度おなじみのHello Worldを表示させるアプリを作っていきます。

では、上の作業に続きでコマンドプロンプトが次のようになっている状態から始めます。

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS\mysite>

このmysiteフォルダの中にmanage.pyが入っていますが、manage.pyが入っているフォルダが基準になっているか確認してください。

続いて、今回は「helloworld」というアプリを作るので、

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS\mysite>python manage.py startapp helloworld

と入力して実行。

こうするとhelloworldというフォルダができて、その中にいろいろファイルが入っています。確かめてみてください。そしてそのhelloworldフォルダの中に、「views.py」というファイルがあります。それをVS Codeなどのエディタで開きます。

その中身を次のように入力（コピペでOK）してください。

from django.shortcuts import render

# Create your views here.

from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, world. Hello Worldのindexページです.")

終われば上書き保存します。

次に、そのview.pyと同じフォルダに「urls.py」というファイルを作ります。そして、その中身は次のようなコードにします。

from django.urls import path

from . import views

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

このようにして保存しましょう。

最後に、Django_on_AWS>mysiteフォルダにあるurls.pyを開いてから同様に、その中身が次のコードになるようにします。

"""mysite URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import include, path

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

終われば上書き保存を。

そこまで終われば開発用サーバーを次のようにして再び起動させます。

(Django_on_AWS) c:\Users\hogehoge\Django_on_AWS\mysite>python manage.py runserver

そして、アプリ名を使った以下のURLにブラウザでアクセスしましょう。

 http://localhost:8000/helloworld/

このように無事に表示されました。

view.pyの関数indexに書いたものが表示されました。これによりview.pyというものはユーザーに表示される画面を作るプログラムなのでは？となんとなく推測できますね。