多くのドキュメンテーションサイトツールがありますが、使っていくうちにフラストレーションを感じたことがあるかもしれません。単一のツールでは、あなたの特定のニーズすべてを満たしながら、使いやすいシンプルなものであり続けることは不可能のように思えます。
もしそうなら、自分で構築してみてはいかがでしょうか？
この一連の記事では、Docusaurusに似たドキュメンテーションサイトを段階的に構築していきます。
この記事が最初です。動的なHTMLテンプレートページを返すシンプルなバックエンドサービスを構築することから始めます。
ステップ1：環境セットアップと依存関係のインストール
まず、プロジェクトディレクトリを作成し、必要な依存関係をインストールする必要があります。
プロジェクトディレクトリの作成：
コア依存関係のインストール：
3つの主要なライブラリをインストールします。
fastapi：Webフレームワーク。uvicorn[standard]：FastAPIを実行するためのASGIサーバー。jinja2：HTMLテンプレートのレンダリングに使用されるエンジン。
ステップ2：プロジェクトのスケルトン設定
次に、fastapi-docs-siteのルートディレクトリに以下のファイルとフォルダを作成します。
main.py：ここにすべてのFastAPIアプリケーションロジックとルートが含まれます。templates/：Jinja2はデフォルトでここにHTMLテンプレートファイルを探します。static/：FastAPIは、静的ファイル（次の記事で使用します）を提供するためにこのディレクトリを使用します。
ステップ3：最初のFastAPIアプリ（JSONバージョン）の作成
テンプレートレンダリングを開始する前に、まずFastAPI自体が正しく動作していることを確認しましょう。
main.pyを開き、以下の基本的なコードを入力してください。
ターミナルを開き、fastapi-docs-siteのルートディレクトリにいることを確認して、以下を実行してください。
main:appは、main.pyで作成されたapp = FastAPI()インスタンスを指します。--reload：このパラメータはコードの変更を監視し、サーバーを自動的に再起動します。
これで、ブラウザでhttp://127.0.0.1:8000にアクセスしてください。以下のように表示されるはずです。
ステップ4：Jinja2テンプレートエンジンの設定
素晴らしい、サーバーは実行中です。しかし、JSONではなくHTMLが必要です。
FastAPIにtemplatesディレクトリを見つけて使用する方法を指示する必要があります。
main.pyを修正してください。
ステップ5：最初のHTMLテンプレートの作成
templates/フォルダ内に、新しいファイルを作成します。index.htmlです。
<h1>{{ page_title }}</h1>に注目してください。これは純粋なHTMLではありません。{{ ... }}はJinja2の変数構文です。すぐに、「Homepage」のような値をFastAPIバックエンドからこのpage_title変数に動的に渡します。
ステップ6：TemplateResponseでのテンプレートレンダリング
最後のステップとして、ルート / をJSONを返さないように、代わりにindex.htmlテンプレートをレンダリングするように修正しましょう。
これを行うには、以下のツールをインポートする必要があります。
Request：Jinja2が正しいURLとコンテキストを構築できるようにするために必要です。HTMLResponse：HTMLの返却専用にFastAPIが提供するレスポンスクラスです。
main.pyを以下のように修正してください。
--reloadを有効にしていた場合、サーバーは自動的に再起動されたはずです。
ページ http://127.0.0.1:8000 をリフレッシュしてください。
JSONは消え、レンダリングされたHTMLページに置き換わり、<h1>タグの内容が動的に置き換わっているのがわかります。
プロジェクトのオンラインデプロイ
ドキュメンテーションサイトは、みんなが訪問できるようにするためのものです。ローカルで実行するだけでは十分ではありません。次に、オンラインでデプロイできます。
簡単なデプロイオプションはLeapcellを使用することです。これは、FastAPIを含むさまざまな言語やフレームワークのプロジェクトをホストできるWebアプリホスティングプラットフォームです。
以下の手順に従ってください。
1.Webサイトでアカウントを登録します。
2.プロジェクトをGitHubにコミットします。手順についてはGitHubの公式ドキュメントを参照してください。Leapcellは後でGitHubリポジトリからコードを取得します。
3.Leapcellページで「Create Service」をクリックします。
4.FastAPIリポジトリを選択すると、Leapcellが必要な構成を自動入力しているのが表示されます。
5.下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイホームページに戻ります。ここでLeapcellがドメインを提供していることがわかります。これはブログのオンラインアドレスです。
まとめ
おめでとうございます。FastAPIプロジェクトのセットアップと基本的なHTMLテンプレートレンダリングの実装という、最初のステップを無事に完了しました。
他のドキュメンテーションサイトを使用したことがあるなら、そのコンテンツはHTMLで手書きされていないことに気づいたかもしれません。あなたはMarkdownを書き、Webページが自動的に生成されます。
次の記事では、このコア機能、つまり実際のMarkdownファイル（例：docs/hello.md）を動的に読み込み、HTMLに解析し、Webテンプレートに注入する機能を実装します。
Xでフォローする：@LeapcellJapan
関連記事：
