Jinja2のフィルターはどこで使えるんですか？

Jinja2のフィルターはテンプレート内で変数に対して使います。Pythonコード側ではなく、HTMLテンプレートの中で {{ 変数 | フィルター名 }} のように記述します。

フィルターを複数組み合わせて使うことはできますか？

はい、可能です。{{ 変数 | フィルター1 | フィルター2 }} のように連続して記述すれば順番に処理されます。ただし、出力結果の型に注意して使う必要があります。

upper以外にも使いやすい文字列フィルターはありますか？

たとえば lower で小文字に変換したり、capitalize で先頭だけ大文字にするフィルターもあります。これらはテンプレート内の文字列操作でよく使われます。

Flask入門｜フィルターの基本を理解しよう【チャプター3-01】

ながみえ

一つ前のチャプターではJinja2の基本について学習しました。

今回からはフィルターについて見ていきましょう。

Chapter１：Flask入門編
Chapter２：Jinja2入門編
Chapter３：フィルター編
　・Chapter3-1：フィルターの基本を理解しよう ◁今回はここ
　・Chapter3-2：色々なフィルターを使ってみよう
　・Chapter3-3：カスタムフィルターを理解しよう
Chapter４：フォーム編
Chapter５：データベース編
Chapter６：Flaskの便利機能編
Chapter７：アプリ開発編

FlaskでWebページを作る際、HTMLの中にPythonのデータを表示することがよくあります。

しかし、ただ表示するだけでなく、「文字を大文字にしたい」「数字の小数点以下を丸めたい」など、ちょっとした加工をしたいことがありますよね。

そんなときに便利なのが「フィルター」です。

フィルターを使えば、テンプレート内で簡単にデータを変換したり整形したりすることができます。

今回はその中でも特に基本となる「大文字に変換するフィルター」について学びましょう。

<<前のページ

Flaskの記事一覧

次のページ>>

Flaskで使えるテンプレートフィルターの基本を学ぼう

【Python】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

Flaskテンプレートで使える「フィルター」の基本とは？

フィルターとは、テンプレート内で変数の値を加工・整形するための機能です。

Pythonでいうところの関数のように、変数の値に何かしらの処理を施して、別の形にして表示することができます。

たとえば、名前を表示する際に全て大文字にしたい場合や、数値を小数第2位までに丸めたい場合など、フィルターを使えばHTMLの中で柔軟に対応することができます。

Jinja2では、変数に対して「パイプ（|）記号」を使ってフィルターを適用します。Pythonコードを書かずとも、テンプレート内で値の変換ができるのが大きな特徴です。

Jinja2におけるフィルターの記述方法と注意点

フィルターの書き方には主に2つの形式があります：

シンプルな形式（最もよく使われる）

{{ 変数名 | フィルター名 }}

たとえば、変数 name に "john" という文字列が入っているとき、これを大文字にしたい場合はこう書きます：

{{ name | upper }} <!-- 変数nameにupperフィルターを適用 -->

ブロック形式（複数行にまたがる場合）

{% filter フィルター名 %}
  変換したい内容
{% endfilter %}

この形式は、HTMLの複数行にまたがるような出力に対してフィルターをかけたい場合に便利です。

実例：upperフィルターで文字列を大文字に変換しよう

ここでは、upper フィルターを使って、文字列をすべて大文字に変換する方法を実際のコードで確認しましょう。

以下のふたつのコードをコピーしてブラウザ表示してください。

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")  # もしこのURLにアクセスされたら
def home():
    name = "flask learner"
    return render_template("index.html", name=name) # index.htmlにnameを渡す

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

このコードでは、name という変数に "flask learner" という文字列を入れて、テンプレートに渡しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フィルターの例</title>
</head>
<body>
    <h1>名前（そのまま）: {{ name }}</h1>

    <!-- フィルターを使って大文字に変換 -->
    <h1>名前（大文字）: {{ name | upper }}</h1>

    <!-- ブロック形式でも試してみる -->
    <h1>名前（ブロック式）:</h1>
    {% filter upper %}
        <p>{{ name }}</p>
    {% endfilter %}
</body>
</html>

{{ name }} は単に変数 name の値（”flask learner”）を表示します。
{{ name | upper }} はフィルター upper を通して、”FLASK LEARNER” に変換されます。
ブロック形式の {% filter upper %} も同様に、囲んだ内容全体を大文字にします。

まとめ：フィルターの使い方をおさらいしよう

今回学んだ「フィルター」は、テンプレート内でデータを簡単に加工するための便利なツールです。

特に upper フィルターは文字列を全て大文字にするシンプルかつよく使われる例でした。

フィルターの基本形は {{ 変数 | フィルター名 }}
ブロック形式もあり、複数行に適用できる
upper を使えば文字列をすべて大文字にできる

このようなフィルターを活用すれば、テンプレート内での表示に柔軟性が生まれます。

次回はさらにいろいろな種類のフィルターを紹介していくので、引き続き楽しく学んでいきましょう！

練習問題：文字列を大文字に変えるコードを書こう

【Python】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

Flaskアプリで、テンプレート内に埋め込んだ変数の一部を加工して表示する方法を学習しましょう。

今回のPythonコードでは「こんにちは、flaskの世界へようこそ！」というメッセージをテンプレートに渡しています。

このメッセージをHTMLテンプレート内でそのまま表示し、さらにその一部をJinja2のフィルターを使って大文字に変換するテンプレートファイルを作成しましょう。

この問題の要件

以下の要件に従ってコードを完成させてください。

以下の要件を満たすテンプレートファイル greeting.html を templates フォルダ内に作成すること：

変数 message をHTML内に表示すること（そのまま表示）
変数 message を upper フィルターを使って表示すること（大文字化された部分が分かるようにすること）
{{ message | upper }} を使用して、フィルターの使い方がわかるようにすること

ただし、Flaskアプリ内で以下のようなPythonコードが実行されることを前提とする。

from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def greet():
    message = "こんにちは、flaskの世界へようこそ！"
    return render_template("greeting.html", message=message)

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

ただし、以下のような実行結果となるコードを書くこと。

元のメッセージ: こんにちは、flaskの世界へようこそ！
大文字に変換したメッセージ: こんにちは、FLASKの世界へようこそ！

「こんにちは」などの日本語部分は変化せず、英語部分だけが大文字になります。
これは upper フィルターが英字にだけ作用するためです。

正解コード

例えば、以下のようなプログラムが考えられます。

正解コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>あいさつページ</title>
</head>
<body>
    <!-- 元の文字列を表示 -->
    <p>元のメッセージ: {{ message }}</p>

    <!-- Flaskのフィルター（upper）を使って大文字に変換 -->
    <p>大文字に変換したメッセージ: {{ message | upper }}</p>

</body>
</html>

もっと分かりやすいサイトにするために

この記事を読んで「ここが分かりにくかった」「ここが難しかった」等の意見を募集しています。

世界一わかりやすいFlask学習サイトにするため、ぜひ問い合わせフォームからご意見下さい。

<<前のページ