Flaskで部分キャッシュを実現！Jinja2とFlask-Cachingでサイトを高速化する方法

Flaskで部分テンプレートをキャッシュする方法（Jinja2活用）

先生と生徒の会話形式で理解しよう

生徒

「FlaskでWebサイトを作っていますが、ページ全体ではなく、特定の部品だけをキャッシュして使い回すことはできますか？」

先生

「もちろんです。Jinja2というテンプレートエンジンとFlask-Cachingを組み合わせれば、サイドバーや共通のランキング一覧といった一部分だけを賢く保存できますよ。」

生徒

「ページ全体をキャッシュするのと、どう違うんですか？」

先生

「ページ全体だとログイン状態によって表示を変えるのが難しくなりますが、部分キャッシュなら動的な部分を残しつつ、重い処理だけを高速化できるんです。さっそく仕組みを見ていきましょう！」

1. 部分キャッシュとは何かを学ぼう

Webサイトを表示する際、サーバーの中では「HTMLを組み立てる」という作業が行われています。この組み立て作業は、実は意外とパソコンに負担がかかります。特に、データベースからたくさんの情報を読み込んでリストを作ったり、複雑な計算をして結果を表示したりする場合、表示が遅くなってしまうことがあります。

そこで登場するのが「キャッシュ」という技術です。これは、一度組み立てたHTMLの部品を、一時的に専用の倉庫に保管しておく仕組みのことです。次に同じ部品が必要になったとき、またゼロから組み立てるのではなく、倉庫から完成品をサッと取り出すだけで済むようになります。これが「パフォーマンス最適化」の第一歩です。

「部分キャッシュ」とは、ページ全体を丸ごと保存するのではなく、例えば「人気記事ランキング」や「最新のコメント一覧」といった、特定のパーツだけを切り出して保存することを指します。これにより、ユーザーの名前を表示する部分は常に新しく保ちつつ、重たい処理が必要なパーツだけを高速に表示することができるのです。

2. Jinja2テンプレートエンジンとキャッシュの関係

Flaskでは、HTMLを作成するために「Jinja2（ジンジャツー）」というテンプレートエンジンを使っています。これは、HTMLの中にPythonのような命令を書き込んで、動的なページを作るための道具です。Jinja2には、特定の範囲を指定して「ここはキャッシュする場所だよ」と教える機能があります。

通常、Flask-Cachingという拡張機能を導入すると、Jinja2の中で「cache」という特別なタグが使えるようになります。このタグで囲んだ部分は、指定した時間だけ内容が保存され、その間はプログラムが実行されなくなります。つまり、サーバーの計算時間を節約し、サイト全体の表示速度をアップさせることができるわけです。これを適切に使うことで、SEO（検索エンジン最適化）にも良い影響を与えることができます。読み込みが速いサイトは、Googleなどの検索エンジンからも高く評価されやすいためです。

3. 準備しよう！ライブラリのインストールと基本設定

まずは、キャッシュ機能を使うための準備をしましょう。パソコンの「ターミナル」や「コマンドプロンプト」を開いて、以下の命令を入力します。これは、Flask-Cachingという便利な道具をあなたのパソコンにインストールするための魔法の言葉です。


pip install Flask-Caching

インストールが終わったら、Flaskのプログラム（Pythonファイル）の中で、キャッシュを使うための設定を書きます。ここでは、一番簡単な「SimpleCache（シンプルキャッシュ）」という、パソコンのメモリ内に一時保存する方法を使ってみましょう。


from flask import Flask, render_template
from flask_caching import Cache

app = Flask(__name__)

# キャッシュの設定を辞書形式で作ります
config = {
    "DEBUG": True,          # デバッグモードを有効にします
    "CACHE_TYPE": "SimpleCache", # メモリに保存する設定です
    "CACHE_DEFAULT_TIMEOUT": 300 # デフォルトで300秒保存します
}

app.config.from_mapping(config)
cache = Cache(app)

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

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

これで、Python側の準備は整いました。次はHTMLファイル側で、どの部分をキャッシュするか指定する方法を見ていきましょう。

4. HTML内でキャッシュタグを使ってみる

Jinja2のテンプレート（HTMLファイル）の中で、特定の部分をキャッシュするには、「cache」タグを使います。このタグで囲まれた範囲が、キャッシュの対象になります。以下の例では、サイドバーの部分を5分間（300秒）キャッシュするように指定しています。


<!DOCTYPE html>
<html>
<head>
    <title>部分キャッシュのテスト</title>
</head>
<body>
    <h1>マイページへようこそ</h1>
    <p>ここは毎回新しく表示されます。</p>

    {% cache 300, 'sidebar' %}
    <div id="sidebar">
        <h3>人気記事ランキング</h3>
        <ul>
            <li>記事その1</li>
            <li>記事その2</li>
            <li>記事その3</li>
        </ul>
        <p>最終更新: {{ now }}</p>
    </div>
    {% endcache %}
    </body>
</html>

「cache 300, 'sidebar'」という部分に注目してください。最初の数字は保存する時間（秒）、後ろの文字は、このキャッシュに付ける名前（キー）です。名前を付けることで、サーバーはどの部品を保存しているかを識別できるようになります。一度表示されると、300秒間は「最終更新」の時刻が変わらなくなるのが確認できるはずです。

5. 変数を使って動的にキャッシュを切り替える方法

時には、表示する内容によってキャッシュを分けたいことがあります。例えば、ブログのカテゴリーごとに異なるランキングを表示する場合です。この場合、キャッシュの名前に変数を含めることで、カテゴリーごとに別々のキャッシュを作成できます。これを「動的なキー設定」と呼びます。


{% cache 600, 'ranking', category_id %}
<div class="ranking-box">
    <h3>カテゴリー：{{ category_name }} の人気順</h3>
    </div>
{% endcache %}

このように書くと、カテゴリーIDが「1」の時と「2」の時で、別々のキャッシュデータが作成されます。もし変数を使わずに名前を固定してしまうと、どのカテゴリーを開いても同じ内容が表示されてしまうというミスが起こります。初心者の方が最初につまずきやすいポイントですので、しっかり覚えておきましょう。変数を活用することで、より柔軟で高機能なWebアプリケーションを構築することが可能になります。

6. 重い処理を関数にしてキャッシュを活用する

テンプレート内だけでなく、Python側で時間がかかる処理（関数）をキャッシュすることも大切です。例えば、ニュースサイトから最新情報を取ってくる処理などは、毎回行うと時間がかかります。これをキャッシュしておけば、テンプレートに渡すデータそのものが速く用意できるようになります。


import time

# この関数は時間がかかる処理だと仮定します
@cache.memoize(timeout=600)
def get_heavy_data(user_type):
    print("重たい処理を実行中...")
    time.sleep(3) # 3秒間わざと待機させます
    if user_type == "premium":
        return ["限定記事A", "限定記事B", "限定記事C"]
    else:
        return ["一般記事1", "一般記事2"]

@app.route("/data/<u_type>")
def show_data(u_type):
    # 初回は3秒かかりますが、2回目以降は一瞬で終わります
    data_list = get_heavy_data(u_type)
    return render_template("data.html", items=data_list)

「@cache.memoize」という魔法の言葉（デコレータ）を使うと、関数の「引数」まで考慮して結果を覚えてくれます。つまり、プレミアム会員用と一般会員用のデータを別々に保存してくれるのです。テンプレートでの部分キャッシュと、この関数キャッシュを組み合わせることで、サイトのパフォーマンスは劇的に向上します。これこそが、プロが現場で行っているチューニングの技術です。

7. キャッシュを消去するタイミングと注意点

キャッシュを導入した際に必ず直面するのが「情報が古くなってしまう」という問題です。新しい記事を書いたのに、サイトには前の記事が表示されたまま、といった状況です。これを防ぐには、適切な保存時間（タイムアウト）の設定が必要です。頻繁に更新される部分は短めに、滅多に変わらない部分は長めに設定しましょう。

また、プログラムから手動でキャッシュを消すこともできます。特定のデータが更新された瞬間に、関連するキャッシュを削除する命令を出すのです。これを「キャッシュ・インバリデーション（無効化）」と言います。難しい言葉ですが、要するに「古い作り置きを捨てて、新しく作り直す」という操作のことです。開発中はキャッシュが原因でプログラムの変更が反映されないこともあるため、不具合かな？と思ったら一度キャッシュを疑ってみるのが良いでしょう。

8. パフォーマンスをさらに引き出すためのコツ

Flaskでの部分キャッシュを使いこなせるようになったら、さらに上のステップを目指しましょう。今回は「SimpleCache」を使いましたが、よりアクセスが多い本格的なサイトにする場合は「Redis（レディス）」という専用のキャッシュサーバーを使うのが一般的です。Redisを使うと、複数のサーバーでキャッシュを共有できるようになり、さらに強力な高速化が可能になります。

また、キャッシュする範囲を「細かくしすぎない」ことも大切です。あまりにも細切れにキャッシュしすぎると、今度はキャッシュを管理するための処理自体が重くなってしまうという本末転倒なことが起こります。大きな塊で、かつ計算に時間がかかる部分を見極めてキャッシュを適用するのが、センスの良いエンジニアへの第一歩です。まずは自分の作ったサイトの中で、どこが一番遅いかを確認することから始めてみてください。計測と改善の繰り返しこそが、Web開発の醍醐味です。

公的機関での指導実績【Flask Web開発実践セミナー】