Claude Code CLI 開発体験記
はじめに
「Claude Code CLI」が凄いという事で、かねてより作りたかった創造的思考を支援するWebアプリケーション「Creative Thinking Studio」を開発しました。
この記事では、Claude Code CLIとの協働開発のポイント、今後の展望を、実際の経験を元に振り返ります。
プロジェクト概要
開発したアプリケーション
Creative Thinking Studio - ブレインストーミングとアイデア発散を支援するWebアプリケーション
主な機能
- テーマ管理: アイデア発想のテーマを作成・管理
- ブレインストーミング: テーマに基づいたアイデア投稿・編集
- アイデア発散: オズボーンのチェックリスト、SCAMPER等のフレームワークを使った体系的なアイデア展開
- アイデア組み合わせ: 既存アイデアをランダムに組み合わせて新しい発想を生成
- 手動・LLM自動実行: 人間の思考とAIの力を使い分け
技術スタック
- フロントエンド: Vue 3 + TypeScript + Element Plus
- バックエンド: Python FastAPI
- LLM: Gemini + LangGraph
- 開発ツール: Claude Code CLI + Cursor
- DB: PosgreSQL + Surperbase
- フロント公開: Vercel
- API公開: Render
Claude Code CLIとの開発体験
開発プロセスでの学び
1. 実装の前に設計をさせる
Claude Code CLIは、推論(多分それはこんな感じですよねと行間を埋める力)が非常に高い。
ただ、逆に雑な指示をすると、意図しない実装をしてしまい、それを直すのに苦労する。
なので、基本は、
要望から設計書を書いてもらう → 設計書を人間が見てイメージと合ってるか確認 → 実装
という流れが良さそうです。
2. 設計書の時点でなるべくシンプルに分かりやすく
設計書を書いてもらった時点で、余計に複雑になってないかチェックが必要。
例えば、
画面設計では、余分な画面がないか、また、余分なパラメータがないかなど。
API設計では、余分なAPIエンドポイントがないか。余計なリクエスト、レスポンスがないか。
今後の展望
課題
- 動作確認後の修正はCursorでやった方が早いと感じたが、MPCサーバ？でここらも効率化できそう
良かった点
- とにかく早い高品質。Cursorのみと比較して数倍早く開発できる
気をつける事
- その後の拡張性を保つ、機能の追加をしやすい状態を保つためになるべくシンプルな状態を保つ
今後のCreative Thinking Studioの拡張機能案
- 個人認証によるチーム毎のアイデア出し
- RSSによるニュースからのテーマ抽出
- 様々なアイデア発想法の組み込み
作ったのはこんなアプリですー✨
１、ホーム画面
デザインは勝手にやってくれました。。。
２、テーマ作成、選択画面
３、アイデア一覧画面
発散機能がついとります🚀
４、発散フレームワーク選択機能
オズボーンのチェックリストのお出ましー😎
５、自分で考えるかLLM様に頼むか選べる機能
６、LLM様の回答を確認画面
記事執筆: 2025年8月