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

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

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

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

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

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

2025年4月12日 2025年10月29日ながみえ

【Flask】フィルターの基本を理解しよう｜Chapter3-1

ながみえ

本記事には広告（アフィリエイトリンク）が含まれます。リンク経由で申込が発生した場合、当サイトが報酬を受け取る可能性があります。

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

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

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

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

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

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

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

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

Flask開発を Stream Deck でボタン化しよう！

Flaskは非常に軽量かつシンプルなフレームワークですが、それゆえに定型作業が多く、開発は単調な作業の連続になりがちです。

それこそがFlaskのメリットであり、習得難易度が低い理由でもありますが、単調な作業は退屈で、ミスも起こりやすいでしょう。

そこで役に立つのが Stream Deck 。

このような定型手順が多い作業を “ボタン化” することで視覚化。

圧倒的に効率的かつストレスフリーな開発環境が簡単に手に入ります↓↓

テンプレートフィルターの基本と書き方

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

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

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

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 を使えば文字列をすべて大文字にできる

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

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

サイト改善アンケート｜1分だけ、ご意見をお聞かせください

本サイトでは、みなさまの学習をよりサポートできるサービスを目指しております。
そのため、ご利用者のみなさまの「プログラミングを学習する理由」などをアンケート形式でお伺いしています。

ご協力いただけますと幸いです。

アンケート

３．今後、副業や転職を考えていますか？２．Flaskを学習する主な理由は何ですか？１．このサイトをどのように活用していますか？また、今後どのように活用したいですか？

１．このサイトをどのように活用していますか？また、今後どのように活用したいですか？

この記事だけ、単発で利用する予定
必要な記事をピックアップして参照したい
記事を順番に読み進めて、体系的に学習したい
その他

２．Flaskを学習する主な理由は何ですか？

３．今後、副業や転職を考えていますか？

４．自由にコメント・ご意見・リクエスト等があればご記入ください。（任意）

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

【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学習サイトにするため、ぜひ問い合わせフォームからご意見下さい。

<<前のページ