プログラミング

Flaskでテンプレートを使う方法

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

Flaskのアプリケーションでテンプレートを使用する方法について、完全かつ包括的な解説を行います。Flaskは、Pythonで作られた軽量なWebフレームワークであり、HTMLのテンプレートエンジン「Jinja2」を使用して、動的なWebページを作成することができます。このテンプレートエンジンを利用することで、PythonとHTMLを効率よく連携させることが可能です。以下では、Flaskでテンプレートを使う方法を具体的に解説します。

1. Flaskでの基本的なセットアップ

Flaskでテンプレートを使うためには、まずFlaskをインストールし、基本的なアプリケーションを作成する必要があります。以下はFlaskのインストールと基本的なセットアップの手順です。

関連記事
bash
pip install Flask

次に、簡単なFlaskアプリケーションを作成します。例えば、以下のように「app.py」というファイルを作成し、Flaskアプリケーションを初期化します。

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アプリケーションを作成し、ルートURL（/）にアクセスしたときにindex.htmlというテンプレートを表示するようにしています。

2. テンプレートフォルダの設定

Flaskでは、デフォルトで「templates」フォルダをテンプレートの格納先として認識します。このため、Flaskプロジェクトのディレクトリ構成は以下のようにするのが一般的です。

bash
/your-project
    /templates
        index.html
    app.py

ここで、templates/フォルダ内にHTMLテンプレートを配置します。render_template()関数を使って、Flaskがこのテンプレートファイルを探し、レンダリング（表示）します。

3. HTMLテンプレートの作成

index.htmlというHTMLテンプレートを作成します。Flaskでは、Jinja2テンプレートエンジンを使用して、Pythonのデータを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>こんにちは、{{ name }}さん！h1>
body>
html>

ここでは、{{ name }}という部分がJinja2の構文です。この部分はFlaskアプリケーション内でPythonコードから渡されたnameという変数に置き換わります。

4. 動的データの渡し方

Flaskでテンプレートにデータを渡すには、render_template()関数を使用し、テンプレートに変数を渡します。例えば、以下のようにnameという変数をテンプレートに渡すことができます。

python
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name='太郎')

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

上記のコードでは、render_template('index.html', name='太郎')という記述で、nameという変数に「太郎」という値を渡しています。テンプレート内の{{ name }}が「太郎」に置き換わり、次のようなHTMLがブラウザに表示されます：

html
<h1>こんにちは、太郎さん！h1>

5. テンプレートでの条件分岐とループ

Jinja2では、テンプレート内で条件分岐やループを使うこともできます。例えば、以下のように条件分岐を使って、ユーザーがログインしているかどうかを表示することができます。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ログイン状態title>
head>
<body>
    {% if logged_in %}
        <p>ようこそ、ログインしています！p>
    {% else %}
        <p>ログインしてください。p>
    {% endif %}
body>
html>

このテンプレートにデータを渡すには、Flask側で次のようにします。

python
@app.route('/')
def home():
    return render_template('index.html', logged_in=True)

logged_inという変数がTrueの場合、「ようこそ、ログインしています！」というメッセージが表示されます。

また、リストをループして表示することもできます。

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

そして、Flask側で次のようにリストデータを渡します。

python
@app.route('/')
def home():
    items = ['リンゴ', 'バナナ', 'オレンジ']
    return render_template('index.html', items=items)

この場合、テンプレートではリスト内の各アイテムが順番に表示されます。

6. テンプレートの継承

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 %}基本タイトル{% endblock %}title>
head>
<body>
    <header>
        <h1>サイトのヘッダーh1>
    header>
    <main>
        {% block content %}コンテンツ{% endblock %}
    main>
body>
html>

次に、base.htmlを継承するテンプレートを作成します。

html
{% extends 'base.html' %}

{% block title %}ページタイトル{% endblock %}

{% block content %}
    <p>このページのコンテンツです。p>
{% endblock %}

このように、{% extends 'base.html' %}でbase.htmlを継承し、{% block %}タグを使って内容を埋め込むことができます。

7. Flaskテンプレートのデバッグ

Flaskでは、debug=Trueを設定してアプリケーションを実行することで、テンプレートエラーが発生した場合に詳細なエラーメッセージが表示されます。これにより、テンプレートのデバッグが容易になります。

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

これにより、テンプレートのエラーが発生した場合に、ブラウザに詳細なエラーメッセージが表示され、問題を迅速に解決することができます。

結論

Flaskでテンプレートを使用することは、動的なWebページを作成するための強力な手段です。Jinja2テンプレートエンジンを使って、PythonのデータをHTMLに埋め込むことができ、条件分岐やループ、テンプレートの継承など、さまざまな機能を活用することができます。Flaskのシンプルな構造と、Jinja2の柔軟なテンプレートエンジンを使うことで、効率的にWebアプリケーションを開発できます。

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