Sジブンノート

かったものリストサービス開発の振り返り

買ったものリストを投稿・共有できるサービス『かったものリスト』を開発しました。 今回は、そのサービスの紹介と技術的な話をしようと思います。

なぜ作ったのか？

背景

もともと、私のサイトには、かったものリストを表示するページがありました。 書籍やガジェットなどの購入履歴を JSON ファイルで管理し、そのデータをもとに簡単な一覧ページを作成していました。 この一覧ページは、誰かにお気に入りのアイテムを紹介する場面で役立っていました。

しかし、サイトをリニューアルした際に、かったものリストのページがなくなってしまいました。 そこで、『かったものリストをサービスとして独立させよう』 と考えました。

決断

私が求めていたのは、自由にかったものリストを作成し、それを誰でも閲覧できる仕組みです。 この仕組みがあれば、自分のかったものリストを気軽に他の人に紹介できます。

どう作ろうか悩んでいたとき、年末に「2024年に買ってよかったもの」というフレーズを目にしました。 実際に、個人ブログでは購入した商品とその良かった点を自由に記述し、公開するケースが多くあります。 そこで、『これだ！』とひらめき、ベストバイを共有するサービス『かったものリスト』を作ることを決断しました。

どのようなサービスか

URLは以下です。

https://my-buy-items.vercel.app

このサービスは、投稿型で、Notionのように自由な書き方ができます。 画像や埋め込みも可能です。

書いたかったものリストを公開すると、新着リストに掲載されたり、ユーザーごとにまとめて表示されます。 このかったものリストを活用すれば、自分のかったものリストを他の人に簡単に共有できます。

また、以下の機能も備えています。

  • いいね機能
  • 投稿の閲覧数表示

こうして、私が求めていたサービスが完成しました。

開発について

『かったものリスト』は、約1ヶ月の開発期間で完成しました。 初回のGitコミットは2025年1月1日23時31分で、最終的に2025年1月29日18時にリリースしました。

開発には、私オリジナルの個人開発向けのスターターキット を活用しました。 このスターターキットは、T3Stackのコンセプトをベースにし、ホスティングにはVercelを使用しています。

主な構成は以下のとおりです。

  • フレームワーク: Next.js
  • API: tRPC
  • 認証: Auth.js
  • データベース: Vercel PostgreSQL（ORM: Drizzle / クライアント: Drizzle Studio）
  • ストレージ: Vercel Blob
  • スタイル: TailwindCSS、shadcn/ui

また、以下のセットアップもマニュアル化しています。

  • よく使うUI要素（ヘッダー、フッター）
  • OGP、アイコン、マニフェスト、メタデータ
  • GA設定、問い合わせリンク
  • タスク管理用の TODO.md

開発においては、v0とChatGPTを活用しました。
さらに、今回の開発では以下の技術を導入しました。

  • エディタ: Tiptap (Novel)
  • ドラッグ&ドロップ: dndkit
  • アバター編集: react-avatar-editor
  • OGPテキストの改行処理: budoux

終わりに

本記事では、『かったものリスト』の開発経緯と技術構成について紹介しました。 このサービスが、多くの人にとって便利なものになれば嬉しいです。