Claude Codeでウェブサービスを作った話

Claude Codeがすごい！と巷で話題になっていますね。

私も早速使ってみてとりあえず、アプリを作ってみました。

作ったのは、カードゲームの対戦成績を記録することができるサービスです。

私が個人的に趣味でカードゲームとしてMTGアリーナをしていて、その戦績を記録することができるアプリがほしかったからです。

・カードゲームの戦績記録アプリ「DeckWin」

機能としては

・デッキ登録

・対戦フォーマット登録

・技術スタックは以下の通りになっています。

フロントエンド

React 19.1.0 – UIライブラリ
TypeScript 4.9.5 – 型安全な開発
Material-UI (MUI) 7.1.1 – UIコンポーネントライブラリ
Emotion – CSS-in-JS スタイリング
React Router DOM 7.6.2 – ルーティング
date-fns 4.1.0 – 日付処理バックエンド・認証
Firebase 11.9.1 – バックエンドサービス
- Firebase Authentication (Google認証)
- Firestore (データベース)
- Firebase Hosting (予定)
開発・ビルドツール
Create React App – プロジェクトセットアップ
React Scripts 5.0.1 – 開発サーバー・ビルド
Node.js – 開発環境デプロイ・インフラ
Vercel – ホスティング・CI/CD
npm – パッケージ管理分析・監視
Google Analytics – アクセス解析テスト
Jest – テストフレームワーク
React Testing Library – コンポーネントテスト状態管理・データ管理
React Context API – 認証状態管理
React Hooks – ローカル状態管理
LocalStorage – ローカルデータ保存（フォールバック）コード品質
ESLint – コード品質チェック
TypeScript – 型チェック

作成するのにかかったコスト

・Cloude Codeの月額利用費用 20ドル + トークン10ドルくらい

ということで、30ドル(現在のドル円レートでいうと5000円位）のコストがかかっていることになります。API利用費用という点でいうと、10ドル=1500円くらいかなというかんじです。

工数としては、6時間くらいかなと思います。大体1日くらいでできたかんじですね。

詰まったところとして、Google Authの部分で少し手間取ったくらいで、その他の部分はわりとあっさりとAIがやってくれました。

問題点として、はたしてこういった機能がほしいユーザにたいしてどうリーチするかという問題がありますが、ひとまずは自分が使うことが目的なので、最低限の用途としての目的は果たしています。

コストは少しかかってしまったものの、開発するのかかった工数と、それに対してのクオリティとしては申し分ないかなというかんじです。

それにしてもこのくらいのアプリであれば1日でほぼコーディングなしで作れるというのは、すごい時代になりましたね。

関連記事