DjangoとBootstrap 5の統合: 実践ガイド

DjangoとBootstrap 5の基本

DjangoはPythonで書かれたフリーでオープンソースのWebフレームワークで、”Don’t Repeat Yourself”の原則に基づいて設計されています。これは、開発者が冗長なコードを書くのを避け、主要なWeb開発タスクに集中できるようにすることを意味します。

一方、Bootstrapは最も人気のあるHTML、CSS、およびJavaScriptのフレームワークで、レスポンシブなモバイルファーストのWebプロジェクトを開発するためのものです。Bootstrap 5は、jQueryに依存しない最新のメジャーリリースで、JavaScriptの改善、CSSカスタムプロパティの新しいAPI、およびVanilla JavaScriptの使用が特徴です。

DjangoとBootstrapを組み合わせることで、開発者は効率的に美しい、レスポンシブなWebアプリケーションを作成できます。この組み合わせは、バックエンドのロジックを処理するDjangoの強力さと、フロントエンドのユーザーインターフェースを構築するBootstrapの柔軟性を組み合わせたものです。

次のセクションでは、Bootstrap 5をDjangoプロジェクトにどのように統合するかについて説明します。それには、Bootstrap 5のインストール、Djangoのsettings.pyへの登録、ベーステンプレートの作成、個々のテンプレートの作成、およびviews.pyの作成が含まれます。これらのステップを通じて、DjangoとBootstrap 5を使用してWebアプリケーションを効率的に構築する方法を理解できます。

Bootstrap 5のインストール

Bootstrap 5をDjangoプロジェクトに統合する最初のステップは、Bootstrap 5をインストールすることです。以下に、Bootstrap 5をインストールする手順を示します。

Bootstrapの公式ウェブサイトからダウンロード

Bootstrapの公式ウェブサイトから最新バージョンのBootstrapをダウンロードします。ダウンロードしたファイルを解凍し、CSSとJavaScriptのファイルを取得します。
静的ファイルのディレクトリに追加

Djangoプロジェクトの静的ファイルのディレクトリ（通常はstaticディレクトリ）に、ダウンロードしたBootstrapのCSSとJavaScriptのファイルを追加します。
静的ファイルの設定

Djangoのsettings.pyファイルにて、STATICFILES_DIRS設定を更新し、Bootstrapのファイルが含まれているディレクトリへのパスを追加します。

以上が、Bootstrap 5をDjangoプロジェクトにインストールする基本的な手順です。次のセクションでは、このインストールしたBootstrapをDjangoプロジェクトでどのように使用するかについて説明します。: Bootstrap公式ウェブサイト

settings.pyへの登録

Bootstrap 5をインストールした後、Djangoプロジェクトで使用できるようにするためには、settings.pyファイルにBootstrapを登録する必要があります。以下に、その手順を示します。

settings.pyファイルを開く

Djangoプロジェクトのルートディレクトリにあるsettings.pyファイルを開きます。
STATICFILES_DIRS設定を更新

settings.pyファイル内のSTATICFILES_DIRS設定を更新します。この設定は、静的ファイルが格納されているディレクトリへのパスのリストです。BootstrapのCSSとJavaScriptファイルが格納されているディレクトリへのパスを追加します。

python STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]

上記のコードでは、BASE_DIRはプロジェクトのルートディレクトリを指し、'static'は静的ファイルが格納されているディレクトリ名です。

以上が、Bootstrap 5をDjangoのsettings.pyファイルに登録する手順です。これにより、Djangoプロジェクト全体でBootstrapを使用できるようになります。次のセクションでは、ベーステンプレートの作成について説明します。

ベーステンプレートの作成

DjangoとBootstrap 5を統合するための次のステップは、ベーステンプレートを作成することです。ベーステンプレートは、すべてのページで共通の要素（ヘッダー、フッター、ナビゲーションバーなど）を定義するためのものです。以下に、ベーステンプレートの作成手順を示します。

テンプレートディレクトリの作成

Djangoプロジェクトのルートディレクトリにtemplatesディレクトリを作成します。
ベーステンプレートの作成

templatesディレクトリ内にbase.htmlという名前の新しいHTMLファイルを作成します。このファイルがベーステンプレートとなります。
Bootstrapのリンクの追加

base.htmlファイル内に、BootstrapのCSSとJavaScriptファイルへのリンクを追加します。これにより、すべてのテンプレートでBootstrapを使用できるようになります。

“`html
<!DOCTYPE html>

Document
{% load static %}
```
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
```
“`

上記のコードでは、{% load static %}は静的ファイルを読み込むためのDjangoのテンプレートタグで、{% static '...' %}は静的ファイルへのパスを生成します。

以上が、ベーステンプレートの作成手順です。これにより、すべてのページで共通のレイアウトとスタイルを適用できます。次のセクションでは、個々のテンプレートの作成について説明します。

テンプレートの作成

ベーステンプレートが作成された後、個々のページに対応するテンプレートを作成します。以下に、その手順を示します。

テンプレートファイルの作成

Djangoプロジェクトのtemplatesディレクトリ内に新しいHTMLファイルを作成します。このファイル名は、それが対応するビュー関数の名前と一致するようにします。
ベーステンプレートの継承

新しく作成したテンプレートファイルの先頭に、以下のコードを追加します。これにより、ベーステンプレートが継承され、その内容が新しいテンプレートに適用されます。

html {% extends 'base.html' %}
コンテンツの追加

{% block content %}と{% endblock %}の間に、ページ固有のコンテンツを追加します。これにより、ベーステンプレートの該当部分が上書きされ、新しいコンテンツが表示されます。

html {% block content %}  {% endblock %}

以上が、個々のテンプレートの作成手順です。これにより、各ページで独自のコンテンツを表示しつつ、共通のレイアウトとスタイルを維持できます。次のセクションでは、views.pyの作成について説明します。

views.pyの作成

テンプレートが作成された後、それらを表示するためのビューを作成します。以下に、その手順を示します。

views.pyファイルの作成

Djangoプロジェクトのアプリケーションディレクトリにviews.pyという名前の新しいPythonファイルを作成します。このファイルは、ビュー（すなわち、ユーザーに表示されるWebページ）を定義する場所です。
ビュー関数の作成

views.pyファイル内に新しい関数を作成します。この関数は、特定のURLがリクエストされたときに実行され、HTTPレスポンスを返します。

“`python
from django.shortcuts import render

def home(request):
return render(request, ‘home.html’)
“`

上記のコードでは、homeという名前のビュー関数を作成しています。この関数は、リクエストオブジェクトを引数に取り、render関数を使用してhome.htmlテンプレートをレンダリングします。
URLconfの更新

Djangoプロジェクトのurls.pyファイルを開き、新しく作成したビュー関数へのURLパターンを追加します。

“`python
from django.urls import path
from . import views

urlpatterns = [
path(”, views.home, name=’home’),
]
“`

上記のコードでは、ルートURL（''）がリクエストされたときにhomeビューが呼び出されるように設定しています。

以上が、views.pyの作成手順です。これにより、各テンプレートに対応するビューが作成され、それらのビューを特定のURLに関連付けることができます。これで、DjangoとBootstrap 5を統合するための基本的な手順は完了です。