個人開発において最も大切なのは「アイデアを熱いうちに形にすること」だと考えています。今回は、新プロジェクト「PoiStack」を開発する際に採用した技術スタックと、その選定理由について共有します。

開発効率を最大化する選定

PoiStackの開発期間は約2週間です。この短期間でカレンダー機能、共同編集機能、レスポンシブデザインを実現するために、使い慣れているツールとモダンなフレームワークを組み合わせました。

Frontend

React / Next.js

Styling

Tailwind CSS

Backend

Firebase / Supabase

Deployment

Vercel

1. Next.js (App Router)

ページ遷移の速さとSEOの両立を考え、Next.jsを採用しました。App Routerによる効率的なデータフェッチングと、OGP画像の動的生成機能(Metadata API)が非常に便利です。ポイ活情報はSNS(Xなど)でシェアされることが多いため、OGP対応は必須でした。

2. Tailwind CSS

デザインをゼロからCSSで書くのは時間がかかります。Tailwind CSSを使うことで、HTMLクラスだけで直感的にスタイリングを完結させることができました。レスポンシブ対応(スマホ表示)もスムーズに行えました。

3. 共同編集の裏側

カレンダーのイベント情報は、リアルタイムに更新される必要があります。今回はバックエンドの構築時間を短縮するため、BaaS(Backend as a Service)を活用しました。ユーザーが投稿した内容が即座に反映される体験を、最小限のコードで実現しています。

AIエージェントの活用

今回の開発では、AIエージェント(Claude Code 等)をフル活用しました。「適質多産」の考えに基づき、複雑なロジックや定形コードの生成をAIに任せることで、自分はサービスの本質的な体験設計に集中することができました。

まとめ

「とりあえず動くものを作る」ためには、今のWeb開発環境は最高に整っています。PoiStackも、これからどんどん技術的な技術的なテコ入れをしていく予定ですが、まずはこのスタックでスタートできたことに満足しています。

皆さんの個人開発の参考になれば幸いです!

← 前の記事:PoiStack 開設のきっかけ 一覧 次の記事:PoiStack の活用ポイント →