ClaudeCodeを使った初めての個人開発でいろいろ学んだ
はじめに
初めて個人開発してみました。
シンプルな習慣トラッカーです。
試験的に作ったものなので、詰めきれていないところがあってお恥ずかしいのですが、よければ見てみてください。一応、プレミアムユーザ向けの課金機能も入れてます。
今回は、初めて個人開発した上で気づいたことをまとめます。自分のメモも兼ねています。
世界中の誰かの助けになれば幸いです。
アプリの主な機能
-
習慣トラッキング機能 - 日々の習慣をグリッドで可視化
-
習慣管理 - 習慣の作成、編集、削除
-
友達との習慣共有 - 他のユーザーとの習慣の共有機能
-
統計情報表示 - 継続日数や達成率の確認
-
データエクスポート機能 - CSV/JSON形式でのデータ出力
-
ユーザー認証 - Firebase Authenticationによるログイン
-
マイページ機能 - ユーザー情報の管理と設定
-
データ永続化 - Cloud Firestoreによる安全なデータ保存
-
レスポンシブデザイン - モバイル・デスクトップ対応
-
プレミアムプラン - Stripe決済による有料プラン
プラン構成
- Basic（無料）- 基本的な習慣トラッキング機能
- Premium（月額$2、年額$12、生涯$36）- データエクスポート、詳細統計等
技術スタックとか
技術スタック
- FW: Next.js 15.5.0 / TypeScript
- スタイル: Tailwind CSS / Material icon
- 認証: Firebase Auth
- DB: Cloud Firestore
- デプロイ: Google Cloud Run
- CDN/DNS: Cloudflare
- 決済: Stripe
その他
- エディタ：vscode
- コード生成：Claude Code Pro
各技術について感じたこと
使った技術についての使いごごちなど、初心者なりに感じたことを書き殴っていきます。技術的に事実じゃない箇所があれば教えてください。
▫️ Nextjs
安定。ほぼ一択。
▫️ Typescript
生成AIでコード生成させる際は一見ムダに思えた。ただ、AIが現状を確認する用&デバッグする用に型定義は必須だと実感。
▫️ Tailwindcss
以前はMUIを使っていた時期もあったが、Tailwindcssの方がより細かい修正がしやすく、シンプルで好き。
▫️ Material Icon
Tailwindcssと一緒に使うとgood。以前はHeroiconを使っていたが、Heroiconよりバリエーション豊富でなんでも出てくる。CDN使うといちいちインポートしなくていいので便利(レイテンシは知らん)。
▫️ Firebase Auth
便利。簡単に認証できたしダッシュボードもシンプルで見やすい。メール認証にすこし手こずったけどなんとか実装。
▫️ Firestore
今回のケースについては文句なし。無料枠多いのもgood。
▫️ Stripe
本格的に使ったのは初めて。最初は用語や概念に迷ったが、開発に困らない分はなんとか理解できた。テスト環境とcli操作も整っているので好き。
▫️ Cloud Run
よい。ローカル開発からdockerで環境管理するのは環境汚さないのでgood。cli整備されてるし、独自ドメインも付与できたので好き。
ただ、アクセス0でも毎日100円弱課金され続けてるのが懸念(自分の設定ミス？)。月3000円出費は個人開発初期には痛い。改善の余地あり。
▫️ Cloudflare
ドメイン購入/DNS/CDNで使用。仮に同じ構成をGoogleCloudで整備すると、普通に月数千円かかるのでCloudflareの方がお得。無料枠が多いことを実感。
上記で触れたデプロイ先についても、Cloudflare workersにすれば基本料0になる？ 引き続き検討したい。
以上です。
ちなみにこの感想は、Xのポストの内容 をそのまま転記したものです。
よければフォローしてください！
感じたこととか気づき
やっぱclaude codeバカになってる？
- そんな気がする
- 少し難しいタスクを与えると1発ではうまくいかながち。3ラリーくらいでパスする印象。
- Proプラン（sonnet）だからしょうがないのかも。
- でも前はもっと汲み取ってくれていた気がする。
- 頻繁に/clearして会話履歴をリセットすることでなんとか解決。
- 最新だと治ったっぽい？
開発初期のデータ管理
- 開発初期からDBに繋ぐのは避けた。理由は、バグ発生時に切り分けが面倒&初期はシンプルに進めたかったから。
- DBの代わりに、ユーザデータや習慣データは、最初はローカルにjsonファイルを置き、そこを読み書きする方式にした
- ある程度コアな機能ができた段階で、 firestore連携にした
- しかし、いざfirestoreに移行した後も、その痕跡が残っていて、claude codeがそれをちゃんと（？）読んでしまい、いろんなバグを生んだ
- 結論：後が面倒だからやらない方が良かった。初期からDB繋いだ方が良さそう。
git戦略
- 複数ターミナル起動して、それぞれでclaude code立ち上げて細かい単位で区切った機能ごとに実装した
- ただ、複数立ち上げてはいるが、同時実行はしない。コンフリクトしないように。
- 実装が完了したら、git status/diff/checkout/add/commit/push/pr/mergeしてmainと統合。これもclaudeにおまかせ。
- 終わったターミナルは削除していく方式。
- 感想：個人開発ならブランチ切って実装とかは効果薄いかも。そこに時間と脳のリソースを使うよりも爆速で開発してアジャイルに回した方がいい。
初めてやってみたこと
- stripe決済のあれこれ
- cloudflareからドメイン取得、dns/cdn機能使用
- 独自ドメインをcloud runにマッピング
マーケ
- solomakerとsolo（サ終したらしい）で共有。数十回くらいはみられたらしいが、特にアプリへのアクセスはなし
- Xで共有。数名のアカウント作成はあるが、継続利用はなさそうで、プレミアムユーザへの移行ももちろんなし
次回改善点&効率化できる項目
- stripe / firebase auth / firestore / claudeflare 周りは今回で理解が深まったし、今回作ったコードの環境変数を変えるだけで流用できるようにしたから、次回は爆速なはず
- stripe決済はテストモードで正しく機能することをよく確認してから本番へ移行すること。変な時期に本番に移行してしまったので、なんか無駄な本番決済を繰り返してしまった。
- 「本番環境に楽に移行できるように」の考えが強すぎて、途中からnpm run devを使わずに、npm run build / startを使っていた。その分、毎度のビルド時間が無駄だった。npm run devでコア技術を実装して、終盤からnpm run build/startの運用にする。（あたりまえ？）
- firebaseとの通信部分など、APIが不揃いな状態でUI実装や各種詳細処理の実装を進めてしまった。そのため、無駄や手戻りが生まれてしまった。機能実装の前に、ユーザやデータのCRUDができるAPIや管理者だけが実行できる強APIを充実させておく。
- 重要度が低い機能ばかり実装して、後から必須機能の追加などをする謎ムーブかました。もっと初期でMVPを確立し、その時点でcloud runにデプロイしておき、その後に詳細機能の実装をアジャイルに進めるべきだった。
- 今回は日本語で設計したが、次回は英語で開発してみたい
その他
- 開発進捗をスクラップに書き残し、それを元にこの記事を作成した。Zennで当初から想定されている理想的な使い方ができたと思う。
さいごに
世界中の誰かの助けになれば幸いです。
Discussion