コンテンツにスキップ

テンプレート

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

一般的な選択肢は Jinja2 で、Flask や他のツールで使用されているのと同じものです。

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.templatingfastapi.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 アプリケーションによって URL /static/styles.css で自動的に提供されます。

詳細

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