【Django】Webアプリケーション開発の基本設定

Posted at 2025-01-23

はじめに

Djangoで開発をする際の基本設定・操作の覚え書き。
以下のYoutubeを参考にした。
【Django】PythonでWebアプリを作ろう！1時間半でDjangoの基本を学ぶ〜 Webフレームワーク初心者向け〜

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

プロジェクトの作成

django-admin startproject [Project Name]

作成したプロジェクトフォルダに移動して、

アプリケーションの作成

python manage.py startapp [App Name]

ルートの設定

[Project Name]/[App Name]/urls.pyを作成
これによってviews.pyとHTMLファイルを紐づけていく。

[App Name]/urls.py

from django.urls import path
from . import views

app_name = "[App Name]"
urlpatterns = [
    path("", views.index, name="index"),
]

[Project Name]/[Project Name]/urls.pyを編集
これはプロジェクト全体の設定なので、編集することは少ない。

[App Name]/urls.p

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('[App Name]/', include("[App Name].urls")),
]

settings.pyの編集

INSTALLED_APPS
マイグレーションの際にこのアプリケーションを参照させる。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    '[App Name].apps.[App Name]Config'
]

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',
            ],
        },
    },
]

言語とタイムゾーン

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

ログイン・ログアウトの実装

startapp accounts で新しいアプリケーションを作成。

accounts/urls.py を作成

urls.py

from django.contrib.auth.views import LoginView, LogoutView
from django.urls import path

app_name = "accounts"
urlpatterns = [
    path("login/", LoginView.as_view(), name="login"),
    path("logout/", LogoutView.as_view(), name="logout"),
]

全体のルーティングを設定のために、以下の二つを追加。

urls.py

    path("accounts/", include("accounts.urls")),
    path("", include("django.contrib.auth.urls")),

setttings.py

settings.py

# ログイン、ログアウト後の遷移画面
    LOGIN_REDIRECT_URL = "/diary/"
    LOGOUT_REDIRECT_URL = "/login/"

以上を設定した上で、HTMLを編集していく。

ログイン画面

ログイン

<h2>ログイン</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">ログイン</button>
</form>

ログアウトボタン

ログアウト

<form action="{% url 'accounts:logout' %}" method="post">
    {% csrf_token %}
    <button type="submit">ログアウト</button>
</form>

ターミナルでの操作

サーバーの起動

サーバーの起動

python manage.py runserver

マイグレーションの作成と実行

マイグレーションの作成

python manage.py makemigrations

マイグレーションの実行

python manage.py migrate

管理者ページの作成

[App Name]/admin.py において

admin.py

from django.contrib import admin
from .models import Book

admin.site.register(Book)

この設定をした上で、サーバーをとめ、ターミナルで

管理者ページ

python manage.py createsuperuser

を実行。ユーザー名やメールアドレス、パスワードを設定する。設定後、http://127.0.0.1:8000/admin/ からログイン可能になる。

CSS の設定

プロジェクトフォルダ (startapp で作成されるフォルダ)に、static/[App Name]/css/base.css ファイルを作成し、base.css を適当に作成する。

settings.py を編集する。（パスを通すイメージ）

settings.py

STATIC_URL = "static/"

STATICFILES_DIRS = [
    BASE_DIR / "static"
]

base.html (extend で他のHTMLファイルに引用されるHTMLファイル）に css を適用する。

base.html

<head>
    ~~~~~~~~
    {% load static %}
    <link rel="stylesheet" href="{% static '[App Name]/css/base.css' %}">
</head>

他にもクラス特性など（ボタンなどに）もHTMLファイル内で設定していく。

JavaScript の設定

先ほど CSS の設定で作成した static フォルダ内に、js/base.js とJavaScript ファイルを作成する。settings.py は CSS で設定したのでここでは触らなくて問題ない。

base.js の編集

枠組みの作成

document.addEventListener('DOMContentLoaded', function(){
    # ここに機能を実装する function を書いていく
});

現在時刻を逐次表示する機能を書いたのがこちら。

現在時刻の表示

document.addEventListener('DOMContentLoaded', function(){
    function updateCurrentTime() {
        const now = new Date();
        const formattedTime = now.toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        document.getElementById('current-time').textContent = formattedTime;
    }

    // 初回実行と1秒ごとの更新
    updateCurrentTime();
    setInterval(updateCurrentTime, 1000);
});

これをHTMLファイルで読み込むようにするには、「まず base.html でインポートしておき、これをそれぞれのページのHTMLファイルで使用していく」というイメージ。使用する際にはgetElementById("ID")で決めたIDを使用する。

base.htmlでのインポート

<head>
    ~~~~~~~~
    {% load static %}
    <link rel="stylesheet" href="{% static 'diary/css/base.css' %}"> <!--これはcssファイルのインポート-->
    <script src="{% static 'diary/js/base.js' %}"></script> <!--これがJavaScriptファイルのインポート-->
</head>

インポートした機能の各ページでの使用

<div id="current-time"></div>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up