見出し画像

Flask基礎#3 テンプレートエンジン（Jinja2）

K

Jinja2の基本構文（変数、ループ、条件分岐）

FlaskのJinja2テンプレートエンジンは、HTMLテンプレート内でPythonのような構文を使用して動的なコンテンツを生成できる強力なツールです。

変数の表示:
変数は二重中括弧で囲んで表示します。

<p>こんにちは、{{ user.name }}さん！</p>

ループ:
forループを使用してリストや辞書の要素を繰り返し処理できます。

<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

ループ内では特別な変数loop.indexやloop.index0が使用でき、現在の繰り返し回数を取得できます。

条件分岐:
if、elif、elseを使用して条件分岐を行います。

{% if user.role == 'admin' %}
    <p>管理者としてログインしています。</p>
{% elif user.role == 'user' %}
    <p>ユーザーとしてログインしています。</p>
{% else %}
    <p>ゲストとしてアクセスしています。</p>
{% endif %}

複合条件も使用可能です:

{% if user.is_authenticated and user.role == 'admin' %}
    <p>管理者としてログインしています。</p>
{% endif %}

ループと条件分岐の組み合わせ:

<ul>
{% for item in items %}
    {% if item.is_available %}
        <li>{{ item.name }}</li>
    {% endif %}
{% endfor %}
</ul>

インライン条件式:

<p>{{ 'ログイン済み' if user.is_authenticated else '未ログイン' }}</p>

フィルタの使用:
変数にフィルタを適用して値を変換できます。

{{ comments|length }}

これはcommentsリストの長さを表示します。

テンプレートの継承:
base.htmlを作成し、他のテンプレートで継承することで、共通のレイアウトを維持できます。

{% extends "base.html" %}
{% block content %}
    <!-- ページ固有のコンテンツ -->
{% endblock %}

これらの機能を組み合わせることで、Flaskアプリケーションで動的で柔軟なHTMLテンプレートを作成できます。

Jinja2の構文はPythonに似ているため、Pythonプログラマーにとって学習が容易です。

テンプレートの継承（base.htmlの作成）

Flaskのテンプレート継承は、Jinja2テンプレートエンジンの強力な機能の一つです。

これにより、共通のレイアウトを定義し、個々のページで特定の部分だけを変更することができます。

基本的な手順は以下の通りです：

  1. base.htmlの作成:
    まず、すべてのページに共通する要素を含むbase.htmlを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Default Title{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <header>
        <h1>My Flask App</h1>
        <nav>
            <ul>
                <li><a href="{{ url_for('index') }}">Home</a></li>
                <li><a href="{{ url_for('about') }}">About</a></li>
                <li><a href="{{ url_for('contact') }}">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        {% block content %}
        {% endblock %}
    </main>
    
    <footer>
        <p>&copy; 2023 My Flask App</p>
    </footer>
</body>
</html>

このbase.htmlでは、{% block %}タグを使用して、子テンプレートで上書き可能な部分を定義しています。

  1. 子テンプレートの作成:
    次に、base.htmlを継承する子テンプレートを作成します。例えば、index.html:

{% extends "base.html" %}

{% block title %}Home Page{% endblock %}

{% block content %}
    <h2>Welcome to the Home Page</h2>
    <p>This is the content of the home page.</p>
{% endblock %}

この子テンプレートは{% extends %}タグを使用してbase.htmlを継承し、必要な部分だけを上書きしています。

  1. Flaskアプリケーションでの使用:
    Flaskアプリケーションで、これらのテンプレートを使用します。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html')

@app.route('/contact')
def contact():
    return render_template('contact.html')

if __name__ == '__main__':
    app.run(debug=True)

テンプレート継承の利点:

  1. コードの重複を減らし、保守性を向上させる

  2. サイト全体の一貫性を保つ

  3. 個々のページの変更を容易にする

テンプレート継承を使用することで、効率的で管理しやすいWebアプリケーションを構築できます。

共通のレイアウトを一箇所で管理し、各ページの固有のコンテンツに集中することができます。

静的ファイル（CSS、JS、画像）の提供方法

Flaskでは、静的ファイル（CSS、JavaScript、画像など）を提供するために、「static」というディレクトリを使用します。

このディレクトリは、Flaskアプリケーションのルートディレクトリに作成します。

静的ファイルの基本的な構造は以下のようになります：

/myproject
  /static
    /css
    /js
    /images
  /templates
  app.py

HTMLテンプレート内で静的ファイルを参照するには、url_for()関数を使用します。

例えば：

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
<img src="{{ url_for('static', filename='images/logo.png') }}">

url_for()関数を使用することで、静的ファイルのパスが動的に生成され、ファイル構造が変更された場合でも柔軟に対応できます。

Flaskアプリケーション内では、静的ファイルを提供するための特別な設定は必要ありません。

Flaskは自動的に/staticエンドポイントを作成し、staticディレクトリ内のファイルを提供します。

例えば、以下のようなFlaskアプリケーションがあるとします：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

このアプリケーションで静的ファイルを使用するには、単にstaticディレクトリにファイルを配置し、HTMLテンプレート内でurl_for()関数を使用して参照するだけです。

大規模なアプリケーションや本番環境では、パフォーマンスを向上させるために、NginxやApacheなどの専用のHTTPサーバーを使用して静的ファイルを提供することが推奨されます。

静的ファイルの提供は、Webアプリケーションの見た目や機能性を向上させるために重要です。

CSSでスタイルを適用し、JavaScriptで動的な機能を追加し、画像でビジュアル要素を強化することができます。

Flaskの静的ファイル提供機能を適切に使用することで、効率的で魅力的なWebアプリケーションを構築できます。

テンプレートを使用したナビゲーション付きのWebページを作成

課題

次の要件を満たすFlaskアプリケーションを作成してください：

  1. ホーム、About、Contactの3つのページを持つ

  2. 共通のナビゲーションバーを全てのページに表示する

  3. テンプレート継承を使用して、共通のレイアウトを定義する

  4. 各ページに固有のコンテンツを表示する

  5. 簡単なCSSを適用してスタイリングを行う

回答例

ここから先は

2,257字

¥ 300

期間限定！Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる

サポートもお待ちしております！ 頂いたサポートは今後の創作活動費用として、noteとYouTubeに活用させていただければと考えております！