【ITニュース解説】Build a Perfect Blog with FastAPI: Comment System

ブログにコメントシステムを追加することは、ユーザーが記事に対して意見を述べたり、質問したりできる重要な機能であり、ブログをよりインタラクティブにする第一歩となる。今回の解説では、FastAPIというPythonのWebフレームワークを使って、どのようにしてブログにコメントシステムを構築するかを段階的に見ていこう。ここでは、各記事の下にコメントリストを表示し、ログインしているユーザーがコメントを投稿できる機能の実装が主な目的となる。

まず、コメントのデータをデータベースに保存するための「設計図」を作ることから始める。これはデータモデルの作成と呼ばれる作業である。ブログの投稿（Post）やユーザー（User）と同様に、コメントにも専用のデータモデルが必要だ。models.pyというファイルにCommentという新しいクラスを追加する。このCommentモデルには、コメントの内容を表すcontent、コメントが作成された日時を示すcreatedAt、そして重要なのが、どの投稿に対するコメントなのかを示すpostIdと、どのユーザーがコメントしたのかを示すuserIdである。これらpostIdとuserIdは、それぞれPostテーブルとUserテーブルのIDを参照する「外部キー」と呼ばれるもので、コメントと投稿、コメントとユーザーの間にデータ上のつながりを作る役割がある。

SQLModelというライブラリを使うと、Pythonのクラス定義だけでデータベースのテーブル構造を定義できるため、直接SQL文を書く必要がほとんどなくなる。また、Relationshipという機能を使って、UserモデルとPostモデルにも、関連するコメントを簡単に取得できるようにcommentsというフィールドを追加する。これは「この投稿には複数のコメントが紐づく」「このユーザーは複数のコメントを投稿できる」といった関係性をPythonのコード上で表現するためのもので、これによって、例えばある投稿オブジェクトから、それに属するすべてのコメントをプログラムで簡単に取得できるようになる。これらの変更をコードに加えると、アプリケーションが起動する際にデータベースのテーブルが自動的に作成または更新されるため、手動でデータベースを操作する手間が省ける。

次に、コメントに関する具体的な処理（ビジネスロジック）を実装する。これはcomments_service.pyという新しいファイルにまとめる。ここでは主に二つの機能を持つ関数を作成する。一つはget_comments_by_post_id関数で、これは特定の投稿のIDを受け取り、その投稿に寄せられたすべてのコメントをデータベースから取得する役割を担う。コメントは作成日時が古いものから順に並べ替えられて返される。もう一つはcreate_comment関数で、これは新しいコメントの内容、投稿したユーザーのID、対象の投稿のIDを受け取り、これらを元に新しいコメントデータをデータベースに保存する。これらの関数は、データベースとのやり取りを専門に行うことで、アプリケーションの中核的な処理とデータベース操作を分離し、コードの管理を容易にする。sessionという引数は、データベースとの一時的な接続を表し、この接続を通じてデータの読み書きを行う。

続いて、Webアプリケーションにおいてユーザーからのリクエストを受け付ける「窓口」となるルート（APIエンドポイント）を作成し、既存のルートも更新する。 まず、routers/comments.pyというファイルに、コメントを投稿するための新しいルートを追加する。このルートは、ユーザーがWebページのフォームからコメントを送信したとき（POSTリクエスト）に呼び出される。FastAPIのAPIRouterを使ってルートを定義し、login_requiredという仕組みを使うことで、ログイン済みのユーザーだけがコメントを投稿できるように認証をかける。コメントの内容はフォームデータとして受け取り、先に作ったcreate_comment関数を呼び出してデータベースに保存する。コメントの保存が成功したら、ユーザーは元の投稿詳細ページに自動的にリダイレクトされる。 次に、アプリケーションのメインファイルであるmain.pyで、新しく作ったコメントのルーターをアプリケーションに組み込むことで、その機能が使えるようになる。 さらに、投稿の詳細ページを表示する既存のルート（routers/posts.py内のget_post_by_id関数）も更新する必要がある。これは、投稿ページを表示する際に、その投稿に紐づくコメントも同時にデータベースから取得し、Webページを表示するためのテンプレートに渡す必要があるからである。これにより、投稿の内容と、それに付随するコメントが一体となってユーザーに表示されるようになる。

最後に、ユーザーが実際に目にするWebページの見た目（フロントエンド）を更新する作業に移る。templates/post.htmlファイルを開き、投稿の内容の下にコメントリストを表示する領域と、コメント投稿フォームを追加する。 コメントリストの部分では、サーバーから渡されたコメントデータを一つずつ取り出し、各コメントの内容、コメントを投稿したユーザーの名前（comment.user.usernameで簡単に取得できる）、そして投稿日時を表示するようにHTMLのコードを記述する。 コメント投稿フォームは、ユーザーがログインしている場合にのみ表示されるように条件分岐（{% if user %}）を設ける。ログインしていないユーザーには、コメントを投稿する代わりにログインを促すメッセージとリンクが表示される。 さらに、見た目を整えるために、CSSファイル（public/css/style.css）にコメントセクション用のスタイルを追加する。これにより、コメントリストやフォームが適切にレイアウトされ、情報が見やすくなる。

これらの変更をすべて終えたら、アプリケーションを再起動する。ブラウザで任意の投稿の詳細ページを開くと、新しく追加されたコメントセクションが表示されるはずだ。ログインしてコメントボックスに内容を入力し、送信ボタンを押すと、投稿したコメントがコメントリストに表示されることを確認できるだろう。これで、ブログに基本的なコメントシステムが正常に追加されたことになる。現在のコメント機能はまだシンプルなものだが、今後は投稿者がコメントに返信できる機能など、さらにインタラクティブな要素を追加していくことで、ブログの使いやすさを高めることができる。