概要
昨今のAIコーディングのブームに乗っかり、Claude Maxプラン(100＄/month)を使って色々遊んでみました。
ゲームプログラマとしてやっているブログですが、試しにWebページを作りました。
毎日毎日紛争のニュースとかあっても世界史に疎すぎてよくわかんないので、
簡単に把握できる機能が欲しいなと思い作ってみました。
地図上の国をクリックすると、他の国と仲良しとか険悪とかわかるアプリです。
（Supabaseのプロジェクトを一定期間触ってないと停止するので、開いてもデータ取れない可能性が高い）
world-relations-viewer.vercel.app
技術スタック
フロントエンド
- React 18 - UIライブラリ
- TypeScript - 型安全性とコード品質向上
- Vite - 高速ビルドツール・開発サーバー
- Tailwind CSS - ユーティリティファーストCSSフレームワーク
地図・可視化
- Leaflet - オープンソース地図ライブラリ
- react-leaflet - ReactとLeafletの統合
- GeoJSON - 国境データ（GitHub datasets/geo-countries）
バックエンド・データベース
- Supabase
デプロイ・インフラ
- Vercel - フロントエンドホスティング
- GitHub - ソースコード管理・CI/CD
開発にかかった時間
7時間で、一旦これで公開していいかくらいになりました。
しかもそのうち4時間くらいはデータベースにデータを書きこんでいた時間だったり、Claude CodeにMCPツール連携する正解がわからなくて悩んでた時間なので、2,3時間あればできたと言えます。
開発の様子
コードは全てClaude Codeに書いてもらいました。フロントエンドのVite + React + Typescript、VercelのGithub連携でデプロイするCI、そしてバックエンドのSupabaseの使用に関してはこちらから指示しましたが、地図表示のライブラリなどは任せました。
また、SupabaseはローカルMCPサーバが公式に提供されているので、Supabaseに登録する国家間関係データについては全てClaude Code上で依頼して、内容も書きこみも全てClaude Codeが行いました。
感想
通常の開発においてClaude Codeは非常に優秀だと思いました。Claudeのモデルの優秀さもあるんですが、これまでと違ってチャットを切り替えなくてもいい感じにコンテキストを取捨選択したり圧縮してくれたりするのがとても良い体験です。もちろんMCPクライアントを備えていてCLIベースというのも開発者目線ではセンスがいいですし。
ただ、利用者の頭の中に結構具体的な設計が無いと厳しいのかなとは思います。
AIエージェントというのは曖昧な指示でも突っ走ってしまう傾向があるので、細かく設計を決めて言葉で指示を出せるかどうかでかなり出力が変わる。まぁこれは人間でも同じですが、人間の場合部下が優秀なら上流が多少雑でも自分の愚かさに気付かないでいられるので。
あとは値段ですね。ccusageというClaude CodeをもしAPI従量課金で使っていたら～を知れるツールを見る限り、10日で270＄くらい使っているようなので、Maxプランは非常にお買い得ではあります。あるんですが、でも月100＄は個人だと躊躇するよなぁと思います。
開発に使うAIとアプリに使うAI
今回の国家間関係性アプリだと、関係性のデータはAIが作ったとはいえ、SupabaseのDBに書きこまれたものです。でもアプリとしてもっと楽に作るなら、その場でLLMに問い合わせて関係性を書いてもらった方が多分楽なんですよね。ただそれはAPI利用料がかかるので今回はやっていません。
なんか、LLMというのが精度は別にしてやれそう感がある範囲が広く、使うにしても使用箇所の判断は簡単に見誤りそうだなぁという懸念があります。
個人的には素直に開発に使うツールとしての活用に慣れていくのが無難なんじゃないかと思っています。開発者なので。
