🐍

Djangoを使用したWebアプリ開発”Hello World”レベルまで

2024/10/19に公開

django

はじめに

Python Vtuberサプーさんの動画を参考にDjangoでローカルホストを起動し、inidex.htmlをブラウザで確認するまでの手順をまとめる。
今回参考にした動画のリンクを一番下に添付しているため、そちらを先に見ていただくことをお勧めする。

【Djangoのインストール】

概要

以下のコマンドでDjangoをインストールを実行することが可能であるが、仮想環境を使用せずにコマンドを実行するとPC本体にグローバルインストールされてしまうため注意が必要。

Djangoインストールコマンド

pip install django

【ファイル構成】

以下の手順では<project_name>フォルダ内をプロジェクトフォルダ、<app_name>フォルダ内をアプリケーションフォルダと説明する。また<app_name>フォルダやmanage.pyが存在しているフォルダをトップフォルダと説明する。

.
├── <app_name>
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── forms.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── manage.py
├── <project_name>
│   ├── __init__.py
│   ├── __pycache__
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
└── templates
    └── <app_name>
        └── index.html

【プロジェクト作成】

概要

Djangoのプロジェクトを作成する。
以下のコマンドを実行することで最後の引数の名前でプロジェクトを作成することができる。

プロジェクト作成コマンド

django-admin startproject <project_name>

【アプリケーション作成】

概要

プロジェクト内でのアプリケーションの分け方は単一機能で一つのアプリケーションになるように分割する。
例）Xのようなサービスの場合、「記事の投稿」「記事の検索」「タイムライン」のような形で分割する。
以下のコマンドを実行することで最後の引数の名前でアプリケーションの作成することができる。

アプリケーション作成コマンド

python manage.py startapp <app_name>

【ルーティング設定】

概要

ルーティング設定とはDjangoがリクエストを受け取った際にどのhtmlを参照するかを振り分けるための設定。

アプリケーションフォルダのルーティング設定

アプリケーションフォルダ内のurls.pyの新規作成する。
<app_name>はひとつ前の手順で作成したアプリケーション名に置き換えて記載する。

from django.urls import path
from . import views

app_name = "<app_name>"
urlpatterns = [
    path("",views.index,name="index"),
]

プロジェクトフォルダー内のルーティング設定

プロジェクトフォルダ内にあるurls.pyを編集する。

urlpatternsの中に下記のように追加することでルーティングの設定ができる。

下記の記述はリクエストがあったpathが<key_word>である場合、<app_name>のurls.pyを参照しルーティングするように設定している。

path("<key_word>", include("<app_name>.urls")),

下記のコードがルーティング設定を追加した後のコード全体になる。

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

urlpatterns = [
    path("admin/", admin.site.urls),
    path("<app_path>", include("<app_name>.urls")),
]

<app_path>を空にすることでlocalhostのルートパスを指定することができる。

アプリケーションフォルダのビューの作成

from django.shortcuts import render
from django.views import View

class IndexView(View):
    def get(self,request):
        return render(request,"<app_name>/index.html")

index = IndexView.as_view()

【index.htmlの配置と設定】

index.htmlの作成

下記のような簡単なhtmlファイルを作成する

<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>app_name</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

index.htmlの配置

トップフォルダにtemplate/<app_name>のフォルダを作成し、その中に先ほど作成したindex.htmlを配置する。

index.htmlの参照設定

プロジェクトフォルダ内のsettings.pyを開きを開きTEMPLATESの設定項目のDIRSにtemplatesのPathを指定する。
”BASE_DIR”はトップフォルダを表わしているため、下記の設定ではトップフォルダ内のtemplates内にhtmlファイルを格納していることを表わしている。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / "templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

【動作確認】

Djangoサーバー起動コマンド

python manage.py runserver

ChromeでLocalHostを起動する

http://localhost:8000/<app_path>

ルーティング設定の際に<app_path>を空に設定した場合はポート番号までの記載で良い。

まとめ

今回はyoutubeで活動されているサプーさんの動画を参考にHello Worldをブラウザに表示するまでの手順をまとめました。フォルダの呼び方などをできる限り合わせて記載したので、動画を見る時の補助として使用していただけると大変嬉しいです。

参考動画

【Django】PythonでWebアプリを作ろう！1時間半でDjangoの基本を学ぶ〜 Webフレームワーク初心者向け〜