優れたNest.jsブログを構築する：投稿のタグ

前のチュートリアルでは、ブログに訪問者追跡を追加し、各記事の人気度を視覚的に確認できるようにしました。

ブログはどう見てもかなり完成に近づいていますが、まだ何かが足りないようです。ブログにはすでに多くの記事がありますが、ユーザーはそれらの中で迷ってしまうかもしれません…。では、ユーザーは興味のあるトピックをどのように素早く見つけることができるでしょうか？

その通り、ブログにはタグ機能が必要です。

タグは、記事のテーマや内容を表示するために使用されます。記事には複数のキーワードを割り当てることができます（例：「テクニカルチュートリアル」、「Nest.js」、「データベース」）。

次の2つのチュートリアルで、ブログシステムにタグ機能を追加します。このチュートリアルでは、まず記事の作成および編集時にタグを設定するサポートを実装します。

ステップ1：データモデリングとリレーションシップの構築

まず、この新しい概念に対応するモジュールとエンティティを作成しましょう。

src/tags ディレクトリに tag.entity.ts を作成します。

次に、投稿とタグの間の関連を確立するために src/posts/post.entity.ts ファイルを更新する必要があります。

1つの投稿には複数のタグを持つことができ、1つのタグは複数の投稿に関連付けることができます。これは 多対多 のリレーションシップです。

@JoinTable() は多対多のリレーションシップを定義するために必要なデコレーターです。Post と Tag の関連を管理するために、結合テーブル post_tags_tag を作成する必要があります。

新しいテーブルとフィールドを作成するために、次のSQLステートメントを実行してください。

Leapcell でデータベースを作成した場合、

ウェブサイトのデータベース管理ページに移動し、上記のステートメントをSQLインターフェイスに貼り付けて実行するだけで、グラフィカルインターフェイスを使用してSQLステートメントを簡単に実行できます。

タグの作成と検索を処理するサービスを作成し、投稿を作成する際のこれらの関連を処理するように PostsService を更新する必要があります。

このサービスのロジックは比較的単純で、主にタグの検索または作成に焦点を当てています。

src/tags/tags.module.ts を開き、TypeOrmModule を登録します。

src/tags/tags.service.ts で：

create および findOne メソッドを変更する必要があります。

まず、PostsModule に TagsModule をインポートします。

次に src/posts/posts.service.ts を更新します。

最終ステップは、EJSテンプレートを変更して、投稿の作成および編集時にタグを設定できるようにし、投稿詳細ページにタグを表示することです。

views/new-post.ejs を開き、タグを入力するためのフォームフィールドを追加します。

簡単にするため、ここでは複数のタグにコンマ区切りの入力を利用しています。実際のプロジェクトでは、ユーザーエクスペリエンスを向上させるために、専用のタグ入力コンポーネント、既存タグの自動マッチングなど、より複雑なUIコンポーネントやロジックを使用できます。

views/post.ejs を開き、投稿のメタデータにタグを表示します。

アプリケーションを再起動します。

ブラウザを開き、にアクセスします。

新しい投稿を作成すると、下部にタグ入力ボックスが表示されます。

Nest.js, Tutorial のように、コンマで区切ってタグを入力し、送信します。

送信後、投稿詳細ページに移動すると、投稿のタグが正常に表示されていることがわかります。

これで、ブログはタグの作成と表示をサポートするようになりました。ただし、ユーザーはまだタグで記事をフィルタリングすることはできません。この機能は次のチュートリアルで実装します。

過去のチュートリアル:

Xでフォローする：@LeapcellJP

関連記事：