お気に入り機能を追加しました

メンバーシップ機能の実装に続いて、お気に入り機能を追加しました。

「あの記事、あとで読み返したい」 「このアプリ、また使いたい」

そんなときに、ハートボタンをクリックするだけで保存できます。

できること

• ブログ記事やアプリの詳細ページでハートボタンをクリック
• クリックするとお気に入りに追加、もう一度クリックで解除
• ダッシュボードでお気に入り一覧を確認
• メンバー限定コンテンツもお気に入り可能
• 未ログインの場合はサインインページへ誘導

技術的な仕組み

データベース（Supabase）

favoritesテーブルを新設しました。

CREATE TABLE favorites (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_email TEXT NOT NULL REFERENCES memberships(email),
  content_type TEXT NOT NULL,  -- 'blog', 'app' など
  content_slug TEXT NOT NULL,  -- 記事やアプリのslug
  created_at TIMESTAMPTZ DEFAULT NOW(),
  UNIQUE(user_email, content_type, content_slug)
);

ポイントはUNIQUE制約。同じユーザーが同じコンテンツを重複登録できないようにしています。

API Routes（Next.js）

お気に入りの操作は/api/favoritesエンドポイントで処理します。

• POST - お気に入り追加
• DELETE - お気に入り解除
• GET - お気に入り状態チェック

いずれもNextAuthのセッションで認証チェックを行い、未ログインユーザーのリクエストは401で拒否します。

FavoriteButton（React Client Component）

ハートボタンはClient Componentとして実装。ページ読み込み時にAPIでお気に入り状態を取得し、クリックで追加/解除をトグルします。

設置場所

4種類の詳細ページにボタンを配置しました：

• ブログ記事 - Share欄の横
• アプリ紹介 - タイトル下
• メンバー限定ブログ - 日付の横
• メンバー限定ツール - 説明文の下

ダッシュボードでは、お気に入り一覧がリンク付きで表示されます。

一覧ページのハートマーク表示

詳細ページのボタンだけでなく、一覧ページでもお気に入り状態がひと目でわかるようにしました。

ブログ一覧・アプリ一覧・メンバー限定ブログ一覧・メンバー限定ツール一覧の各カード右上に、お気に入り済みのコンテンツには赤いハートアイコンが表示されます。

これにより、一覧を眺めるだけで「どれをお気に入りにしたか」がすぐにわかります。

技術的には、各一覧ページのServer Componentでユーザーのお気に入り情報をサーバーサイドで取得し、カードコンポーネントにisFavoritedプロパティとして渡しています。APIリクエストなしでページ描画時にハートが表示されるので、表示も高速です。

Claude Codeとの開発

今回もClaude Codeに実装を任せました。

• SQLスキーマ設計
• CRUD関数（lib/favorites.ts）
• APIエンドポイント
• FavoriteButtonコンポーネント
• 4つの詳細ページへの配置
• ダッシュボードへの一覧追加
• 一覧ページへのハートマーク表示対応

これだけの実装が、指示から数分で完了。ビルド確認まで含めてもすぐにデプロイできました。

まとめ

お気に入り機能は小さな機能ですが、「また見返したい」を簡単にできるのは地味に便利です。一覧ページのハートマークのおかげで、お気に入りしたコンテンツを見失うこともありません。

ぜひサインインして、気になる記事やアプリをお気に入り登録してみてください。ダッシュボードからいつでもアクセスできます。