プログラミング

Flaskでのテンプレート使用法

最終更新： 06/03/2025
1 分の読み

Flaskは軽量で柔軟なPythonのウェブフレームワークであり、ウェブアプリケーションを迅速に開発するための強力なツールです。Flaskの主な特徴の一つは、テンプレートエンジンJinja2を使用して、HTMLファイルを動的に生成できることです。この機能を利用して、Flaskアプリケーションで効果的にウェブテンプレートを作成し、データを表示する方法について詳しく解説します。

1. FlaskのテンプレートエンジンJinja2の基本

Flaskは、Jinja2というPython用のテンプレートエンジンを使用しています。Jinja2は、HTMLテンプレートに変数を埋め込んだり、条件分岐やループを使ったりすることができます。Flaskでテンプレートを使うことで、ビューとデータロジックを分離し、コードの再利用性と可読性を向上させることができます。

関連記事

2. Flaskプロジェクトのセットアップ

まずは、Flaskのプロジェクトをセットアップします。以下のコマンドでFlaskをインストールします。

bash
pip install Flask

次に、基本的なFlaskアプリケーションを作成します。app.pyという名前のファイルを作成し、以下のコードを記述します。

python
from flask import Flask, render_template

app = Flask(__name__)

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

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

このコードでは、Flaskをインポートし、render_template関数を使ってindex.htmlテンプレートをレンダリングしています。

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

次に、templatesというディレクトリを作成し、その中にindex.htmlというテンプレートファイルを作成します。テンプレートファイルには、HTMLとともにJinja2構文を使って動的にデータを埋め込みます。以下は基本的なindex.htmlの例です。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask アプリケーションtitle>
head>
<body>
    <h1>{{ message }}h1>
body>
html>

ここで、{{ message }}はFlaskアプリケーションから渡される動的なデータを表示するためのJinja2の構文です。

4. データの渡し方

Flaskのrender_template関数を使用すると、テンプレートに変数を渡すことができます。home関数を以下のように修正して、messageという変数をテンプレートに渡します。

python
@app.route('/')
def home():
    message = "Flaskを使ったテンプレートのデモ"
    return render_template('index.html', message=message)

これにより、index.htmlテンプレート内の{{ message }}が"Flaskを使ったテンプレートのデモ"に置き換えられます。

5. 条件分岐とループの使用

Jinja2では、条件分岐やループを使ってテンプレートを動的に変更できます。以下に、条件分岐とループの使い方を示します。

条件分岐の例

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask アプリケーションtitle>
head>
<body>
    <h1>Flask アプリケーションh1>
    {% if message %}
        <p>{{ message }}p>
    {% else %}
        <p>メッセージはありません。p>
    {% endif %}
body>
html>

ここでは、messageが存在する場合にはそのメッセージを表示し、存在しない場合には「メッセージはありません」と表示するようにしています。

ループの例

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask アプリケーションtitle>
head>
<body>
    <h1>Flask アプリケーションh1>
    <ul>
        {% for item in items %}
            <li>{{ item }}li>
        {% endfor %}
    ul>
body>
html>

ここでは、itemsというリストの各要素をループで表示しています。

6. HTMLフォームの処理

Flaskでは、HTMLフォームからデータを受け取り、処理することも簡単です。以下に、フォームを使ってユーザーからデータを受け取る方法を示します。

まず、index.htmlにフォームを追加します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask アプリケーションtitle>
head>
<body>
    <h1>名前を入力してくださいh1>
    <form method="POST" action="/">
        <label for="name">名前:label>
        <input type="text" id="name" name="name">
        <button type="submit">送信button>
    form>

    {% if name %}
        <p>こんにちは、{{ name }}さん!p>
    {% endif %}
body>
html>

次に、Flaskのルートでフォームデータを処理します。

python
from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def home():
    name = None
    if request.method == 'POST':
        name = request.form['name']
    return render_template('index.html', name=name)

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

これにより、ユーザーがフォームに名前を入力して送信すると、入力された名前が表示されます。

7. テンプレートの継承

Flaskでは、テンプレートの継承を使って共通のレイアウトを作成することができます。例えば、ヘッダーやフッターを共通化することができます。

まず、base.htmlという基本テンプレートを作成します。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Flask アプリケーション{% endblock %}title>
head>
<body>
    <header>
        <h1>Flask アプリケーションh1>
    header>

    <main>
        {% block content %}{% endblock %}
    main>

    <footer>
        <p>© 2025 Flask アプリケーションp>
    footer>
body>
html>

次に、index.htmlでこのテンプレートを継承し、blockを上書きします。

html
{% extends 'base.html' %}

{% block title %}ホーム{% endblock %}

{% block content %}
    <h2>ようこそ、Flask アプリケーションへh2>
    <p>Flaskを使ったテンプレートのデモp>
{% endblock %}

このように、base.htmlで共通部分を定義し、各テンプレートでblockを使って内容を動的に変更することができます。

結論

Flaskでウェブアプリケーションを開発する際に、テンプレートを使用することは非常に重要です。Jinja2テンプレートエンジンを使うことで、HTMLを動的に生成し、ユーザーからの入力を処理したり、条件に応じて内容を変更したりすることができます。Flaskのテンプレートシステムを効果的に利用することで、アプリケーションの開発がより効率的に、保守性が高いものになります。

最終更新： 06/03/2025
1 分の読み
Back to top button