ウェブサイト検索

Django の MVT アーキテクチャの仕組み: モデル、ビュー、テンプレートの詳細

Djangoは高レベルのPythonフレームワークです。堅牢なWebアプリケーションの構築において、シンプルさと効率性で人気があります。

Django のアーキテクチャの中心となるのは、Model-View-Template (MVT) パターンです。 Django の能力を最大限に活用したい場合は、モデル、ビュー、テンプレートがどのように相互作用するかをよく理解することが重要です。

Django をまったく初めて使用する場合でも、初心者でも、この記事は、これらのコンポーネントがどのように機能し、相互作用して動的 Web アプリケーションを作成するかを示す包括的なガイドとして役立ちます。

さらにわかりやすくするために、これらのコンポーネントの相互接続性をより深く理解するのに役立つ簡単なアプリケーションを構築します。

すでに興奮している場合は、まっすぐに入りましょう！

これが私たちがカバーするものです：

  • 前提条件

  • MVT アーキテクチャとは何ですか?

  • モデルコンポーネント

  • ビューコンポーネント

  • テンプレートコンポーネント

  • MVT ワークフローを示す図

  • MVT の実世界の類似点

  • すべてをプロジェクトにまとめる

  • 結論

前提条件

手順を進めるには、次のものが必要です。

  • クライアント/サーバー アーキテクチャなど、Web アプリケーションがどのように動作するかについての基本的な理解。

  • Pythonの基本的な知識。

MVTアーキテクチャとは何ですか？

MVTパターンは、Webアプリケーションのコードベースとワークフローを整理するためのDjangoのアプローチです。このアーキテクチャを構成するコンポーネントは、モデル、ビュー、およびテンプレートです。各コンポーネントは特定の関数を実行し、プロセスを他のコンポーネントに渡して実行します。

コンポーネントとそれらが実行する特定の機能を簡単に見てみましょう。

  • モデル: データ レイヤーとも呼ばれ、データを管理し、データベースと対話します。

  • ビュー：ロジックレイヤーとも呼ばれ、中間として機能し、ロジックを処理し、データフローを管理します。

  • テンプレート：プレゼンテーションレイヤーとも呼ばれ、ユーザーインターフェイスでHTMLコンテンツをレンダリングします。

Djangoアプリケーションでのコンポーネントとその役割についてのアイデアが得られるので、各コンポーネントとそれらがアーキテクチャでどのように相互作用するかを広範囲に調べます。

モデルコンポーネント

モデルは Django アプリケーション内のデータの構造と相互作用を管理し、データが果たす重要な役割によりモデルを Django アプリケーションの基盤とします。

Djangoモデルは、リレーショナルデータベースとPythonコードの間のギャップを埋めるオブジェクトリレーショナルマッピング（ORM）と呼ばれる強力な機能を利用しています。 Pythonオブジェクト（クラス）をデータベーステーブルに変換し、属性を列に、インスタンスをそれらのテーブル内の行に変換します。

ORM の大きな利点の 1 つは、SQL クエリを作成する代わりに Python オブジェクトを使用してデータベースと対話できることです。これは、聴衆が理解できるように、ある言語を別の言語に変換する翻訳機と考えてください。この場合、ORM は Python コードをデータベースが実行できる SQL コマンドに変換し、その逆も行います。

Djangoモデルは、すべてのデータベース関連のロジックをカプセル化し、保存するデータの青写真として機能するデータベースの構造を定義します。

Django モデルの一般的な形式

Djangoでは、すべてのモデルが特定の宣言の方法に従います。モデル宣言の基本構造は次のとおりです。

class <model_name>(models.Model):
    <field_name> = models.<field_type>(<optional_field_characteristics>)

それを分解しましょう：

  • class: Django でモデルを定義するために使用されるキーワード。

  • model_name: モデルの名前。

  • models.model ：モデルクラスが継承する基本クラス。

  • field_name ：データベース列の名前。

  • field_type: charField、BooleanField など、フィールドが保持するデータのタイプを指します。

  • optional_field_characteristics: max_length、default など、フィールドの動作をさらに定義するために使用されます。

モデルの例

ここまでのモデルについてすべてを理解したので、タスク リスト用のモデルを構築します。通常、タスクのタイトル、説明、タスクが完了したかどうかを示すインジケーターが含まれます。

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

このモデルで：

  • タスクはモデルの名前です。

  • タスクモデルには3つのフィールドがあります。

    • title: 最大 100 文字のテキストを保持する CharField。

    • 説明：a textfield より長いテキストの場合。

    • completed: True または False 値を格納する BooleanField (デフォルトは False)code>。

ビューコンポーネント

Django ビューは、ユーザーのリクエストを処理し、応答を返す役割を果たします。これらは、モデル オブジェクトからデータを収集し、それらに対して論理操作 (特定の基準に基づくクエリなど) を実行し、表示のためにデータをテンプレートに渡すことにより、モデルとテンプレートの間のブリッジとして機能します。

ビューは、アプリケーションの複雑さと要件に応じて、関数またはクラスベースとして記述できます。

Django ビューの一般的な形式

ビューの基本構造は次のとおりです。

def <view_name>(request):
    # View Logic goes in here....
    return render(request, <template>, <context>)

分析してみましょう:

  • view_name ：ビュー関数の名前。

  • リクエスト：クライアントからDjangoサーバーに送信されたHTTP要求は、フォームの送信またはボタンをクリックすることからトリガーされる可能性があります。

  • return render: HTML 応答の生成に使用されます。かかる：

    • リクエスト：リクエストオブジェクト。これには、着信リクエストに関する情報が含まれています。

    • テンプレート：レンダリングするテンプレートファイル。

    • Context ：テンプレートで利用可能にする変数が含まれています。通常、辞書の形式で提供されます。

例を表示

タスク リストを続けると、ビューは次のようになります。

def task_list(request):
    # Logic goes in here...
    return render(request, <template>, {'tasks': tasks})

テンプレートコンポーネント

Djangoテンプレートは、ブラウザで最終的なHTML出力をレンダリングする責任があります。 HTMLとDjangoのテンプレート言語の組み合わせを使用して、データの表示方法を定義します。

djangoテンプレート言語では、テンプレートタグを使用する {％％} およびテンプレート変数 {{}} HTMLテンプレートにDjangoモードを入力します。このモードでは、ビューで定義された変数にアクセスし、テンプレート内の制御構造を使用できます。

テンプレートは、CSSまたはお気に入りのCSSフレームワークのいずれかを使用して、ユーザーインターフェイスをより表示しやすくすることもできます。

テンプレートの例

私たちのテンプレートは、Django のテンプレート言語を使用した通常の HTML ファイルです。タスク リスト テンプレートは次のようになります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>
</body>
</html>

このテンプレートで：

  • ループのは、タスクリストの各タスクを繰り返します（ビューのコンテキストとして渡されたことを忘れないでください）。

  • 各タスクについて、タスクのタイトルと explectent ステータス（「完了」または「完了」のいずれか）を出力します。

  • tasks リストが空の場合、{% empty %} ブロックは「利用可能なタスクがありません」というフォールバック メッセージを表示します。

MVT ワークフローを示す図

この図は、DjangoのMVTアーキテクチャ内でデータがどのように流れるかを示しています。

MVTの実世界の類推

あなたがレストランに行って、お気に入りの食事を注文すると想像してください。レストランには舞台裏で、それぞれの料理の作り方をまとめたレシピ本があります。シェフはレシピを使用して、注文どおりに食事を調理します。準備が完了すると、サーバーは見栄えの良い方法で食事を届けます。

シェフがレシピに従って料理を作るのと同じように、ビューはモデルを使用してデータを収集し、処理します。最後に、料理を提供するサーバーと同様に、テンプレートは最終出力が明確で魅力的な形式でユーザーに表示されることを保証します。

すべてをプロジェクトにまとめる

このセクションでは、記事で例として使用したタスク リストの設定方法を最初から最後まで説明します。最終的には、完全なフローで MVT アーキテクチャを備えた機能的なアプリケーションが完成するはずです。

Pythonをインストールする

まず、Pythonがインストールされていることを確認してください。 Pythonの公式Webサイトにアクセスして、最新のPythonバージョンをダウンロードできます。

Djangoプロジェクトとアプリをセットアップします

次にDjangoをインストールします。 pip を使用してインストールできます。

pip install django

フォルダーを作成し、お気に入りのコードエディターで開きます。

次のコマンドを次のように実行して、次のように次のようなコマンドを実行して、新しいDjangoプロジェクトとアプリを作成します。

django-admin startproject myproject 
cd myproject
django-admin startapp myapp

モデルを定義します

あなたの myapp/models.py ：

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    completed = models.BooleanField(default=False)

フォームを作成します

タスク モデルに基づいた Django フォームが必要なので、Django ModelForm を使用してフォームを作成します。

myapp でファイルを作成し、forms.py という名前を付けて、次のコードを挿入します。

from django import forms
from .models import Task

class TaskForm(forms.ModelForm):
    class Meta:
        model = Task
        fields = ['title', 'description', 'completed']

このコードで：

  • タスク は .models からインポートされます。

  • class taskform（forms.modelform）：これにより、 taskform と呼ばれる新しいクラスが作成されます。

  • classメタ：：djangoの modelform が使用する特別なクラスで、フォームの構成を提供します。 meta クラスは、関連するモデルとフィールドをフォームに含めることにより、フォームを作成する方法をDjangoに伝えます。

  • model=task ：フォームが基にしているモデルを指定します。この場合、フォームはタスクモデルに基づいています。

  • fields=['title'、 'description'、 '完了'] ：タスク>モデルのどのフィールドをフォームに含めるべきかを指定します。これにより、フォームに表示されるモデルフィールドを制御でき、モデル内のすべてのフィールドではなく、特定のフィールドのみを含めるようにカスタマイズできます。

ビューを作成します

myapp/views.py に次のコードを挿入します。

from django.shortcuts import render,redirect
from .models import Task
from .forms import TaskForm

def task_list(request):
    tasks = Task.objects.all()    # Retrieve all tasks

    if request.method == 'POST':    # Handle form submissions
        form = TaskForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('task_list')  # Redirect to avoid duplicate submissions
    else:
        form = TaskForm()

    # Pass tasks and the form to the template
    return render(request, 'task_list.html', {'tasks': tasks, 'form': form})

この見方では、

  • taskform は forms からインポートされます。

  • このコードは、リクエスト メソッドが POST であるかどうかを確認し、ユーザーがフォームを送信したことを示します。

  • メソッドが POST の場合、送信されたデータ (request.POST) を使用して TaskForm のインスタンスを作成します。

  • フォームは、 form.is _valid（）を使用して検証され、有効な場合、フォームはデータベースに保存されます。

  • 保存後、ユーザーは重複した送信を防ぐためにタスク リスト ページにリダイレクトされます。

テンプレートを定義します

myApp ディレクトリで、テンプレートフォルダーを作成します。 Templatesフォルダー内で、ファイルを作成し、 task_list.html に名前を付けます。ユーザー入力を収集し、UIのリストに表示するフォーム要素を追加する必要があります。

task_list htmlファイルには、次のことがあります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task List</title>
</head>
<body>
    <h1>Task List</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task.title }} - {{ task.completed|yesno:"Done,Not Done" }}</li>
        {% empty %}
            <p>No tasks available.</p>
        {% endfor %}
    </ul>

    <h2>Add a New Task</h2>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Add Task</button>
    </form>
</body>
</html>

追加されたフォームコードでは次のようになります。

  • データを送信するための post メソッドを備えたHTMLフォームを作成しました。 CSRF攻撃から保護するために、 {％csrf_token％} が含まれています。

  • フォーム フィールドは、{{ form.as_p }} を使用してレンダリングされ、各フィールドが <p> タグ内に表示されます。

  • 最後に、「タスクの追加」というラベルの付いた送信ボタンが提供され、ユーザーはフォーム データを送信できます。

フォルダー構造

この点に到達した後、アプリを正しい方法で構成する場合は、クロスチェックすることが重要です。フォルダー/ファイル構造がどのように見えるかは次のとおりです。

└── ?myproject
    └── ?myapp
        └── ?__pycache__
        └── ?migrations
        └── ?templates
            └── task_list.html
        └── __init__.py
        └── admin.py
        └── apps.py
        └── forms.py
        └── models.py
        └── tests.py
        └── urls.py
        └── views.py
    └── ?myproject
        └── ?__pycache__
        └── __init__.py
        └── asgi.py
        └── settings.py
        └── urls.py
        └── wsgi.py
    └── db.sqlite3
    └── manage.py

プロジェクトの URL を構成する

myproject/urls.py に、 myApp にURLを含めます

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

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

アプリをプロジェクト設定に追加する

myapp を myproject/settings.py のインストール済みアプリのリストに追加します。

INSTALLED_APPS = [
    'myapp',      # added our myapp app
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

サーバーを実行する

これらのコマンドを入力して、移行を適用し、サーバーを実行します。

python manage.py migrate

python manage.py runserver

ブラウザで http://127.0.0.1:8000/ にアクセスして、アプリをテストします。

ファイナルルック

フォームを使用していくつかのタスクを追加した後のタスク リスト アプリがブラウザ上でどのように表示されるかを次に示します。必要に応じて、テンプレートのスタイルをさらに改善することができます。

結論

この記事では、DjangoのMVTアーキテクチャのコンポーネント、それらがどのように相互作用するか、Webエクスペリエンスをシームレスにする方法について学びました。また、それが実際にどのように機能するかを確認するための簡単なプロジェクトを構築しました。今、それをよりよく理解することを願っています。

この記事を読んで気に入っていただけましたら、X で私をフォローするか、LinkedIn で私とつながって、さらにプログラミングの記事や投稿をご覧ください。

次回でお会いしましょう！