バイブコーディングメインで、どこまでいけるか
年末年始のまとまった時間を使って、久しぶりに個人開発をしました。
今回のテーマは 「バイブコーディング中心で、どこまで作れるか」 です。
結論から言うと、
1週間で、以前なら半年はかかっていた規模のものができました。
サイトはこちら
技術スタック
スピードと運用の楽さを重視した構成です。
- Next.js
- Vercel
- Supabase
- GitHub Actions
コスパを意識して、無料でかつ使いやすいを重視。
個人開発としては、かなり相性が良い組み合わせでした。
アーキテクチャについて
フロントエンドの構成は、
Bulletproof React の考え方を参考にしています。
- 機能単位で責務を分離
- 将来的な拡張を前提とした構成
- 個人開発でも破綻しにくい設計
「とにかく早く作る」だけでなく、
あとから触る自分が困らないことを重視しました。
参考にした資料はこちらです。
- Bulletproof React
https://github.com/alan2207/bulletproof-react - Bulletproof React is best architecture（Zenn）
https://zenn.dev/manalink_dev/articles/bulletproof-react-is-best-architecture
features 配下に機能をまとめることで、
- データ取得
- UI
- 型定義
をセットで管理でき、
LLMにコードを読ませるときも文脈が伝わりやすくなりました。
利用した LLM
今回は Claude Code（MAXプラン）をメイン に使用しました。
補助的に以下も併用しています。
- ChatGPT
- Gemini
設計・実装・リファクタ・ちょっとした詰まりの解消まで、
ほぼ常に LLM と対話しながら進めるスタイルです。
実装したウェブアプリ
株式・ETF・投資テーマを横断的に整理・ウォッチするための個人用アプリです。
実装した主な機能
企業マスタ
- 日本株
- 米国株
- ETF（米国）
を一元管理。
新高値銘柄のウォッチ機能
- GitHub Actions で定期実行
- 日本株 / 米国株 / 米国ETF を対象
- 日次で「新高値銘柄」をチェック
完全に個人用途ですが、実用性はかなり高いです。
企業 × テーマ管理
- 投資テーマのマスタ管理
- 企業とテーマの紐づけ
- テーマの類義語管理
あとから分析・記事化しやすい構成を意識しています。
ブログ機能
- Markdown 入稿
- 技術メモや相場の振り返り用
Qiita や note とも相性の良い形式です。
PWA 対応
- PWA 対応
- ロゴ設定
- OGA（OG画像）対応
スマホからも確認することが多いので、意識して作りました。
管理画面
個人開発ですが、自分用のWebサイトなので管理機能はしっかり作りました。
- 企業マスタ管理（単体 / 一括登録）
- 投資テーマ管理（単体 / 一括登録）
- 企業とテーマの紐づけ
- テーマ類義語管理
- 記事入稿
- 日毎の新高値サマリー入稿
「あとから拡張する前提」の設計です。
LLM前提での開発スタイル
今回かなり意識したのは、 **「LLMにどう指示すると破綻しにくいか」**です。
- 実装前に設計意図を文章で書かせる
- DB構造は自動生成された型定義を参照させる
- 「既存コードを壊さない」と明示的に指示する
- 曖昧な指示（例:「いい感じに」）は使わない
これだけで、修正のやり直し回数が体感でかなり減りました。
また適宜Claude.mdはしっかり改修して、開発体験の向上を意識しました。
LLMは「速い実装者」ですが、方向性を決めるのは人間なので、ここをおろそかにすると大変になる印象があります。
開発期間
だいたい 1週間。
正直、これまでの感覚だとここまでの機能を実装することを考えると 最低でも半年 はかかっていたと思います。
感想
LLM × バイブコーディングの破壊力は本当にすごい。
- 実装スピードが段違い
- 詰まる時間が激減
- 「考えること」に集中できる
個人開発においては、「全部を自分で書く力」よりも
正しく設計して、正しく LLM を使う力の方が
重要になってきている気がします。
そして何より、いちばんの感想としては
バイブコーディング楽しい！！！
引き続き改善・追加をしながら、
使い倒していく予定です。
同じように個人開発している方の参考になれば幸いです。