Django Templatesの基礎：初心者のための完全ガイド

皆さん、こんにちは！今日はDjango Templatesの基礎について説明します。 ジャンゴでウェブ開発を始めていますか？それともこれから始めようと思っていますか？ いずれにしても、Djangoテンプレートは必ず知っておくべき重要な部分です。 最初は難しく感じるかもしれませんが、心配しないでください！この記事では、Djangoテンプレートの基礎を簡単かつ楽しく学ぶことができます。

Django Templatesとは？

Django Templates 기초 참고 이미지1

Django Templatesは HTMLページを動的に生成するツールで、Djangoフレームワークでウェブページの 表現(view) 部分を担当します。単純なHTML文書を越えて、テンプレートはデータベースから取得した情報や動的データと組み合わせて、ユーザーにカスタマイズされたコンテンツを提供します。これにより フロントエンドとバックエンドのつながり 役割を果たし、再利用性と保守性を高めることに大きく貢献します。

主な特徴

  1. 動的データ表現
    • テンプレート言語を使用してPythonのデータ(文字列、リスト、オブジェクトなど)をHTMLページに表現することができます。
    • 例：データベースから取得したユーザー名や商品リストをページに表示。
  2. テンプレート言語
    • Djangoは独自の テンプレートタグとフィルターを提供します。
    • 条件文、反復文などの基本的なプログラミング構造をHTMLに統合することができます。
    • はい： {% if user.is_authenticated %} <p>ようこそ、{{ user.username }}さん！</p> {% else %} <p>ログインしてください。</p> {% endif %}
  3. 再利用可能なコンポーネント
    • テンプレートは を含むと を拡張するを活用して複数のページで共通要素(例えば、ヘッダー、フッター)を再利用することができます。
    • 例：すべてのページに共通して適用される基本レイアウトテンプレートの作成。
  4. クライアント・サーバーコラボレーション
    • サーバーでデータを準備し、テンプレートを使って最終的なHTMLを生成し、クライアント（ブラウザ）に配信します。
    • これにより、クライアントは複雑なロジックなしでシンプルなHTMLレンダリング結果を受け取ることができます。

Django Templatesの役割

  • ウェブページ設計図を提供します：データとロジックを分離して、開発者がページのコンテンツとデザインを直感的に構成することができます。
  • フロントエンドとバックエンドの連携強化: バックエンド開発者はデータとビジネスロジックに集中し、フロントエンド開発者はテンプレートを通じてデザインとユーザーエクスペリエンスに集中することができます。

Django Templatesの基礎：基本構造を作る

まず、プロジェクトディレクトリに下記のような構造で'templates'フォルダを作ってみましょう。

myproject/
    ├── myapp/
    ├── myproject/
    ├── templates/
    └── manage.py

そして settings.py ファイルにtemplatesディレクトリを追加する必要があります。 'DIRS'です：[BASE_DIR / 'templates']、 (多くの方がここで多くの間違いをするのですが、必ず コンマ ( , ) を忘れないでください！)

TEMPLATES = [...
    {{{}}を指定します。
        'BACKEND': 'django.template.backends.django.DjangoTemplates'、
        'DIRS'です：[BASE_DIR / 'templates']、
        'APP_DIRS'：True、
        ...
    }、
]

最初のTemplateを作成する

さあ テンプレート フォルダ内に home.html ファイルを作ってみましょう。下記の例は一般的なhtmlファイルと変わりません。 Django Templatesの基本的な内容を説明する観点で作ってみました。

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>My Django Site</title>
</head>
<body>
    <h1>こんにちは、Djangoの世界へようこそ！</h1>
    <p>これは私の最初のDjango templateです。</p>
</body>
</html>

テンプレートを使用する

templateを使うためにはviewでrender関数を使う必要があります。 views.py ファイルに次のように書いてみてください。# がある行はコメント(説明)なので、参考だけしてください。

# Djangoのshortcutsモジュールでrender関数を取得します。
# render関数は指定されたテンプレートファイルをレンダリングしてHTTP応答を返すため使います。

from django.shortcuts import render

# ビュー関数の定義: home
# この関数はURLリクエストに応答するために呼び出されます。
# - request: Djangoで自動的に渡されるHttpRequestオブジェクトで、ユーザーのリクエスト情報を含みます。

def home(request)：
    # render関数：
    # - 最初の引数: requestオブジェクトを渡します。
    # - 第2引数：レンダリングするテンプレートファイルの名前('home.html')を指定します。
    # - 第3引数(オプション)：テンプレートに渡すデータ(Context)辞書を追加で渡すことができます。
    # - 戻り値：レンダリングされたHTMLを含むHttpResponseオブジェクトを返します。

    return render(request, 'home.html')

Templateにデータを渡す

viewからtemplateにデータを渡すことができます。

# home ビュー関数の定義
#ユーザーが特定のURLにアクセスすると、このビュー関数が呼び出されます。
def home(request)：
    # コンテキスト辞書を作成します。
    # - テンプレートに渡すデータを定義します。
    # - ここでは'name'キーに'withdraw'という値を割り当てました。
    # - テンプレートで{{ name }}でデータにアクセスすることができます。
    context = {'name': '撤退'}。
    return render(request, 'home.html', context)

そして、templateでこのデータを使用することができます

# {{ }}はDjangoテンプレート言語で使う変数表現です。
#ビュー関数で渡されたコンテキスト辞書のnameキー値を参照します。
# 例：ビュー関数でcontext = {'name': '撤退'}で渡された場合、{{ name }}は'撤退'に置換されます。

<h1>こんにちは、{{ name }}さん！</h1>

Templateタグを使う

Template 태그 사용하기 설명 이미지

Django Templates言語は、HTMLと動的データを組み合わせるために テンプレートタグと 変数式を提供します。様々なタグを一つずつ説明します。

1. {% if ... %} / {% else %} / {% endif %}

  • 条件文タグで、特定の条件に応じてHTMLコンテンツを分岐処理することができます。
  • もし タグの中に条件式を記述します、 その他は条件が満たされないときに実行される部分です。
  • エンディフで条件文を終了します。

コード例

{% if user.is_authenticated %}
    <p>ようこそ、{{ user.username }}様！</p>
{% else %}
    <p>ログインしてください。</p>
{% endif %}

操作方法

  • user.is_authenticated:
    • Djangoが提供するユーザーオブジェクト(ユーザー)の属性で、ユーザーが認証されたかどうかを返します。
  • 条件によって：
    • ユーザーがログインしている場合： <p>ようこそ、[ユーザー名]様！</p> 出力。
    • 非ログイン状態の場合： <p>ログインしてください。</p> 出力。

2. {% for ... in ... %} / {% end for %}

  • 繰り返し文タグで、リストやクエリセットなどの反復可能なオブジェクトを巡回してHTMLコンテンツを動的に生成します。
  • のために タグ内に繰り返すオブジェクトを指定します、 エンドフォーで繰り返し文を終了します。

コード例

    。
{項目%の項目%}の項目について
    
  • {{ item }}
    •  
  • {{ item }}
    •  
  • {{ item }}
{% endfor %}

 </ul

操作方法

  • アイテム
    • 文脈 辞書から渡されたリストまたはクエリセットです。
  • 繰り返し処理
    • アイテムの各要素(項目)を
    • 。 タグ内に挿入して出力します。
  • 例えば、 context = {'items'：['りんご', 'バナナ', 'さくらんぼ']}。の場合：
    • リンゴ
    • バナナ
    • チェリー
</ul

3. {{ ... }} (変数式)

  • 変数式は 文脈から渡されたデータを出力する役割をします。
  • 中括弧({{ }}) 内に変数名を書くと、その値がテンプレートに表示されます。

コード例

<p>ようこそ、{{ user.username }}様！</p>

操作方法

  • user.username
    • 文脈から渡された ユーザー オブジェクトの ユーザー名 属性を出力します。
  • 例えば、 user.username = '撤退'の場合： <p>いらっしゃいませ、撤収様！</p>

タグの概要と追加説明

タグ説明例
{% if ... % }条件に応じてコンテンツを表示します。{% if user.is_authenticated %}
{% else %}条件が満たされないときに実行されます。{% else %}
{% endif %}条件文を終了します。{% endif %}
{% for ...in ...%}。リスト、クエリセットなどの反復可能なオブジェクトを巡回してコンテンツを生成します。{% in items % for item %}... {% endfor %}
{{ ... }}変数式で、 文脈から渡されたデータを出力します。{{ user.username }}
{% include ... % }他のテンプレートファイルを挿入して、共通の要素を再利用することができます。{% include 'header.html' %}
{%は......%を拡張します。｝他のテンプレートをベースに現在のテンプレートを拡張します。{% は 'base.html' % を拡張します。｝
{% block ... %}拡張テンプレートの特定の部分を定義したり、オーバーライドします。｛%ブロック内容 %}... {%エンドブロック%}。

Djangoテンプレート言語のメリット

  1. コードとデザインの分離: HTMLとPythonコードを分離してメンテナンスを簡単にします。
  2. 直感的な文法: Python開発者が簡単に習得できる直感的な文法を提供します。
  3. 動的コンテンツ生成: 繰り返し文と条件文で柔軟にデータを処理し、ユーザーカスタムコンテンツを提供します。
  4. 再利用の可能性: を含む, を拡張する, ブロック タグでテンプレートの再利用性を最大化します。

Template フィルタを使用する

Template 필터 사용하기 설명 이미지

Djangoテンプレートフィルターは 変数の出力を修正したり、変形したりするために使用されるツールです。パイプ(|)記号を使用して変数に適用し、テンプレートでデータを簡単かつ直感的に操作することができます。

例示説明

djangoコピー編集
タイトル: {{ title|upper }}

内容: {{ content|truncatewords:30 }}
 
content: {{ content|truncatewords:30 }}
  1. {{ title|upper }}:
    • タイトル 変数の文字列を すべて大文字に変換します。
    • はい： title = "Hello World"ラーメンの結果は HELLO WORLDです。
  2. {{ content|truncatewords:30 }}:
    • 内容 変数の文字列を単語基準で 最大30ワードにカットします.
    • 長いテキストを要約したり、表示スペースを制限する場合に便利です。
    • はい： content = "長文で文字数が多いですが..."ラーメンの結果は これは長い文章で...です。

静的ファイルを扱う

정적 파일 다루기 설명 이미지

CSS、JavaScript、画像などの静的ファイルを扱うには {%負荷静的%}。 タグを使用します：

{%負荷静的%}。
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<img src="{% static 'images/logo.png' %}" alt="로고">

URLを処理する

templateでURLをハードコーディングする代わりに {% url %} タグを使用してください：

<a href="/ja/{% url 'home' %}/">ホームへ</a>

これにより、URL設定が変更されてもtemplateを修正する必要がありません。

仕上げ

以上でDjango templatesの基礎についてみてみました。 templatesを活用すれば、動的で柔軟なウェブページを簡単に作ることができます。次はtemplateの継承を学んでみてください。 templateの継承を使うとコードの重複を減らしてウェブサイトの構造をもっと体系的に管理することができます。

Djangoテンプレートは最初は複雑に見えるかもしれませんが、少し練習すればすぐに慣れることができます。 練習を続けながら、テンプレートの様々な機能を探ってみてください。頑張ってください！

参考までに、Djangoのコア機能を全体的に見たい方は、こちらをご覧ください、 Django MTVパターンをマスターする：モデル、ビュー、テンプレート、フォームの完全ガイド ポストをご覧ください。

테리 이모티콘
( 楽しくコーディングしましょう！ )

類似の投稿