コンテンツへスキップ

テンプレート

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

よく使われるのは、Flaskなどのツールでも使用されているJinja2です。

FastAPIアプリケーションで直接使用できる(Starletteによって提供される)便利な設定ユーティリティがあります。

依存関係のインストール

仮想環境を作成し、アクティブ化してjinja2をインストールしてください。

$ pip install jinja2

---> 100%

Jinja2Templates の使用

  • Jinja2Templates をインポートします。
  • 後で再利用できる templates オブジェクトを作成します。
  • テンプレートを返すパス操作Request パラメータを宣言します。
  • 作成した templates を使用して TemplateResponse をレンダリングして返し、テンプレートの名前、リクエストオブジェクト、Jinja2テンプレート内で使用されるキーと値のペアを含む「コンテキスト」辞書を渡します。
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 }}

...渡した "コンテキスト" の dict から取得した id を表示します。

{"id": id}

たとえば、IDが 42 の場合、これは以下のようにレンダリングされます。

Item ID: 42

テンプレートの url_for 引数

テンプレート内で url_for() を使用することもできます。これは、パス操作関数で使用されるのと同じ引数をとります。

したがって、以下のセクションでは

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

...これは、パス操作関数 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 アプリケーションによって `/static/styles.css` のURLで自動的に提供されます。

詳細

テンプレートのテスト方法を含む詳細については、Starletteのテンプレートに関するドキュメントをご確認ください。