コンテンツにスキップ

テンプレート

🌐 AI と人間による翻訳

この翻訳は、人間のガイドに基づいて AI によって作成されました。🤝

原文の意図を取り違えていたり、不自然な表現になっている可能性があります。🤖

AI LLM をより適切に誘導するのを手伝う ことで、この翻訳を改善できます。

英語版

FastAPI では任意のテンプレートエンジンを使用できます。

Flask などでも使われている Jinja2 が一般的な選択肢です。

Starlette によって提供され、FastAPI アプリで直接使える、簡単に設定できるユーティリティがあります。

依存関係のインストール

仮想環境 を作成して有効化し、jinja2 をインストールします:

$ pip install jinja2

---> 100%

Jinja2Templates の使用

  • Jinja2Templates をインポートします。
  • 後で再利用できる templates オブジェクトを作成します。
  • テンプレートを返す path operation に Request パラメータを宣言します。
  • 作成した templates を使って TemplateResponse をレンダリングして返します。テンプレート名、リクエストオブジェクト、Jinja2 テンプレート内で使用するキーと値のペアからなる "context" の辞書を渡します。
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

app.mount("/static", StaticFiles(directory="static"), name="static")


templates = Jinja2Templates(directory="templates")


@app.get("/items/{id}", response_class=HTMLResponse)
async def read_item(request: Request, id: str):
    return templates.TemplateResponse(
        request=request, name="item.html", context={"id": id}
    )

備考

FastAPI 0.108.0、Starlette 0.29.0 以前では、name は最初のパラメータでした。

またそれ以前のバージョンでは、request オブジェクトは Jinja2 用のコンテキスト内のキーと値のペアの一部として渡されていました。

豆知識

response_class=HTMLResponse を宣言すると、ドキュメント UI がレスポンスが HTML であることを認識できます。

技術詳細

from starlette.templating import Jinja2Templates を使うこともできます。

FastAPI は、開発者であるあなたの利便性のために、starlette.templating と同じものを fastapi.templating として提供しています。しかし、利用可能なレスポンスのほとんどは Starlette から直接提供されています。RequestStaticFiles も同様です。

テンプレートの作成

例えば、templates/item.html に次のようなテンプレートを書きます:

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

テンプレートのコンテキスト値

次のような HTML 内で:

Item ID: {{ id }}

...渡した "context" の dict から取得した id が表示されます:

{"id": id}

例えば、ID が 42 の場合は次のようにレンダリングされます:

Item ID: 42

テンプレートの url_for の引数

テンプレート内でも url_for() を使用できます。引数には、対応する path operation 関数で使われるのと同じ引数を取ります。

したがって、次の部分は:

<a href="{{ url_for('read_item', id=id) }}">

...path operation 関数 read_item(id=id) が処理するのと同じ URL へのリンクを生成します。

例えば、ID が 42 の場合は次のようにレンダリングされます:

<a href="/items/42">

テンプレートと静的ファイル

テンプレート内で url_for() を使用し、例えば name="static" でマウントした StaticFiles に対して利用できます。

<html>
<head>
    <title>Item Details</title>
    <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
</head>
<body>
    <h1><a href="{{ url_for('read_item', id=id) }}">Item ID: {{ id }}</a></h1>
</body>
</html>

この例では、static/styles.css の CSS ファイルにリンクします:

h1 {
    color: green;
}

また、StaticFiles を使用しているため、その CSS ファイルは FastAPI アプリケーションから URL /static/styles.css で自動的に配信されます。

さらに詳しく

より詳しい内容(テンプレートのテスト方法など)については、Starlette のテンプレートに関するドキュメントを参照してください。