はじめに
エンジニアとして働いている私が、話題のClaude Codeを使って実際にWebサービスを開発してみました。結果として、99.99%コードを書くことなく、1週間という短期間で本格的なWebアプリケーションを完成させることができました。
今回開発したのは「CountdownHub」というイベントのカウントダウンタイマーを管理するWebサービスです。実際に運用中で、どなたでもご利用いただけます：
| イベント一覧画面 | イベント詳細画面 | 10秒前のアニメーション |
|---|---|---|
 |
 |
 |
この記事では、Claude Codeを使った開発の実体験を赤裸々にお伝えします。感動した点、困った点、そしてエンジニアとしての将来への不安まで、包み隠さず書いていきます。
開発したサービス：CountdownHub
サービス概要
CountdownHubは、重要なイベントまでの時間をリアルタイムでカウントダウンできるWebアプリケーションです。
主な機能
- アカウント管理: Firebase Authenticationによる認証システム
- イベント管理: イベントの作成、編集、削除
- リアルタイムカウントダウン: 秒単位でのリアルタイム更新
- カテゴリ分類: イベントをカテゴリ別に整理
- 検索機能: イベント名による高速検索
- レスポンシブデザイン: PC・スマートフォン対応
- ソーシャル機能: イベントの共有とソーシャルログイン
技術スタックとアーキテクチャ
フロントエンド
- React 18 + TypeScript: モダンなUI構築
- Tailwind CSS: 効率的なスタイリング
- Vite: 高速なビルドツール
バックエンド
- Node.js + Express + TypeScript: API サーバー
- PostgreSQL: メインデータベース
- Prisma ORM: 型安全なデータベース操作
インフラ・デプロイ
- Vercel: フロントエンドホスティング（無料プラン）
- Render: バックエンドホスティング（無料プラン）
- Firebase Authentication: 認証システム
- Docker + Docker Compose: 開発環境
開発環境
- Claude Code Pro: メイン開発ツール
- VS Code: エディタ（ほとんど触らず）
- Git: バージョン管理
Claude Codeでの開発体験
圧倒的な開発速度
「1週間でここまでできるのか」というのが率直な感想です。私はReact未経験でしたが、Claude Codeが適切なコンポーネント設計から実装まで全て行ってくれました。
コードを書かない開発スタイル
驚くべきことに、VS Codeの編集エディタに触れたのは数える程度でした。開発のほとんどがターミナルでの対話で完結します：
# こんな感じで指示するだけ
$ "検索機能を追加して、リアルタイムで絞り込みできるようにして"
$ "レスポンシブデザインに対応させて"
$ "Firebase認証を統合して"
Claude Codeが自動的に：
- 適切なファイル構成を決定
- 必要なライブラリを選択・インストール
- コンポーネントを実装
- スタイリングを適用
- テストまで実行
エラー解決の自律性
特に印象的だったのは、エラーハンドリングの自律性です。
# エラーログをそのまま貼り付けるだけ
$ [エラーログをコピペ]
これだけで、Claude Codeが：
- エラーの原因を特定
- 修正方針を決定
- コードを修正
- 再テスト
まさに「自律的な問題解決」でした。
視覚的なデバッグサポート
UI上の不具合については、スクリーンショットを撮影してファイルパスを教えるだけで、画像を読み取って適切な修正を行ってくれます。これは特に感動的な機能でした。
知識管理システムの活用
@minediaさんの記事を参考に、プロジェクト知識管理システムを導入しました。
# 一発で知識システムを構築
$ ./scripts/setup-knowledge.sh
Claude Codeは過去の決定や技術的知見を参照してくれますが、時々参照を忘れることもあります。その際は「CLAUDE.mdを確認して」と伝えれば対応してくれます。
躓いたポイントと解決策
2日間の押し問答：React useEffectの無限ループ
最も苦労したのがReactのuseEffect周りでした。アニメーション機能の実装で無限ループが発生し、2日間にわたって解決策を模索しました。
通常の指示では解決できず、最終的に「ultrathink」というキーワードを使うことで、より深い分析を促し、問題を解決できました。
$ "ultrathinkを使って、この無限ループ問題を根本から分析して"
この経験から、Claude Codeにもより深い思考を促すテクニックがあることを学びました。
UI動作の説明スキル
エラーログと違い、Web上の「何となく変な動作」を説明するのは工夫が必要でした。日本語での説明能力が重要だと実感しました。
❌ 「なんか変です」
✅ 「検索入力時に画面がちらつき、文字入力の度にページ全体が再レンダリングされているようです」
デプロイ設定の手動作業
Claude Codeでもカバーできないのが、外部プラットフォームのアカウント作成や設定です：
- Vercelアカウント作成
- Renderアカウント作成
- Firebase プロジェクト設定
- 環境変数の設定
これらは手動で行う必要がありますが、Claude Codeに手順を聞けば丁寧に教えてくれます。ただし、「環境変数って何？」レベルだと少し時間がかかるかもしれません。
開発を通じて感じたこと
感動：技術の民主化
React未経験の私が、モダンなWebアプリケーションを1週間で完成させられたのは純粋に感動的でした。技術の「民主化」を肌で感じる体験でした。
不安：理解できないコードの運用
一方で、自分が理解できないコードをデプロイして運用するという不安もあります。何かトラブルが起きた時、本当に対応できるのか心配になります。
技術力低下への懸念
この開発スタイルを続けていると、個人としての技術力が確実に落ちていくと感じました。
エラーや不具合が発生した時に：
- 原因を自分で調べるのが億劫になる
- すぐにClaude Codeに頼りたくなる
- 問題解決能力が退化していく感覚
これは深刻な問題だと思います。
Claude Code Pro の制限について
Proプランでも使用制限があり、長時間の開発では「物足りなさ」を感じることがあります。
ただし、この制限が強制的な休憩を生み出し、結果的に健康的な開発リズムを作ってくれるという皮肉な効果もありました。徹夜でコードを書き続けるという悪習慣を断ち切ってくれました。
押し問答中にトークン制限が来ると精神的にキツいものがありますが...
エンジニアの未来について
変化する開発現場
今回の経験を通じて、エンジニアの未来について真剣に考えさせられました。
近い将来予想される変化：
- SeleniumやRPAとの統合によるWeb動作テストの自動化
- GUI操作権限の付与によるSaaS設定の自動化
- より高度な自律的開発システムの登場
エンジニアに求められるスキルの変化
従来の「コードを書く」スキルよりも：
- 問題定義能力: 何を作るべきかを明確にする
- 要求整理スキル: あいまいな要望を具体的な仕様に落とし込む
- AI との対話技術: 適切な指示を与える能力
- 品質判断力: 生成されたコードの妥当性を判断する
これらのスキルがより重要になってきそうです。
個人的な立ち位置の模索
正直なところ、エンジニアとしての将来がますます不安になりました。これからどのように立ち振る舞うべきか、真剣に考えなければならない時期に来ていると感じています。
技術的な細かい話
VS Codeターミナルのちらつき問題
開発中、VS Codeのターミナルがちらつく現象が頻発しました。原因は不明ですが、同じ現象を経験された方がいれば情報を教えていただきたいです。
コードの公開について
当初はコードをプライベートにしようと考えましたが、生成AIがここまで進化した今、隠す意味はあまりないと判断しオープンソースにしました。近いうちにリバースエンジニアリングされる時代が来そうです。
実際のサービスをご体験ください
完成したサービスはこちらからご利用いただけます：
https://www.countdownhub.jp/
お試しの際の注意点
- 「当日開催」のイベントは表示されない可能性があります
- 他のタブ（「今週開催」「来月開催」など）で動作をご確認ください
- よろしければアカウント作成・イベント登録もお試しください
フィードバック募集中
このサービスは軌道に乗るかどうか判断できるまで運用を続ける予定です：
- バグ・不具合を発見された方は報告してください
- 機能改善・追加機能のご要望もお聞かせください
- ユーザー体験についてのご意見も歓迎します
まとめ
Claude Codeを使った1週間の開発は、技術の可能性と課題の両面を強く感じさせる体験でした。
良かった点
- 🚀 圧倒的な開発速度: 1週間で本格的Webアプリが完成
- 🤖 自律的問題解決: エラーの大部分を自動解決
- 🎨 高品質な成果物: 未経験技術でもモダンな実装が可能
- 💡 学習効果: 開発プロセスを通じて技術理解が深まる
課題・懸念点
- 😰 技術力低下リスク: 自分で考える機会の減少
- 🔍 ブラックボックス化: 理解できないコードの運用不安
- 💸 コスト: 長時間開発には制限がネック
- 🎯 説明スキル: AIへの適切な指示が重要
今後への期待
Claude Codeのようなツールが更に進化すれば、誰でも高品質なWebサービスを作れる時代が本格的に到来するでしょう。
一方で、エンジニアの価値は「コードを書く」ことから「問題を定義し、解決策を設計する」ことにシフトしていくと感じています。
皆さんも是非Claude Codeを試してみて、この技術革命を体感してみてください。そして、エンジニアとしての未来について一緒に考えていきましょう。
この記事は実際にClaude Codeで開発したCountdownHubの開発体験をもとに執筆しました。サービスは現在も運用中ですので、ぜひお試しください！
GitHub リポジトリ: https://github.com/SatoshiRoppongi/CountdownHub
本番サイト: https://www.countdownhub.jp/
参考
以下、人間による執筆。
今回、一番最初のプロンプトは通常のClaudeを利用して下記の通りに行ました。
webサービスをClaude Codeを使用して開発したいです。（個人開発）
以下要件のサービスを、Claude Codeで効果的に開発できるように、Claude Codeに与える指示分を作成してください。
【効果的な開発】
* 高品質なプロダクトとなるような指示
* Claude Codeのトークンとコストを節約できるような明確な指示
* ハルシネーションを抑える指示
* 以下要件をClaude Code が解釈しやすいように適切にまとめる
* そのままgithubのreadmeにしたいので、人間にもわかりやすいように構造化したドキュメント
* 章立て、適切なインデントなど（マークダウン）
【アプリケーションの機能要件（MVP）】
* イベントカウントダウンまとめサイト
* サービス名称は未定だが、キャッチーで人を惹きつけるような名称にしたい
* 日本全国のイベントをパネル形式（あるいはサムネイル形式、カード形式）で表示。
* パネルには、開始日時（JST）あるいは終了日時（JST）までのカウントダウンが大きく表示されている
* デフォルトではイベント開催日時が近いもの順にソートされている
* 追加順、人気順など他の指標で一般的なソートが可能
* イベント検索機能
* 当サービス内で扱っているイベントの検索・（タグなどによる）絞り込みを行うことが可能
* 初期表示ではN件表示されていて、N件以降のものは、無限スクロールまたはページネーション（Claude Codeの実装が簡単な方）
* カウントダウンが近いものほど、目立つ、惹きつけるようなUIデザイン（パネルを大きく表示するなど）
* パネルをクリックすると、イベント詳細ページが表示される（外部リンクではなく、サイト内のリンク）
* イベント詳細に必要な項目
* イベント開催日時
* イベントタイトル
* イベント概要
* アイキャッチ画像
* サイトURL
* 開催場所
* タグ
* オンライン/オフラインイベント
* コメント
* イベント詳細ページには、コメント欄（またはチャット欄）が表示されていて、コミュニケーションを取ることができる。
* コメントは通報機能など、一般的なコメント機能を用意。MVPでは外部コメントシステムを利用してもOK。
* 管理者画面を作成
* イベント情報管理、コメント管理などこのアプリケーションを運用する上で便利な機能
* MVP開発ではユーザログイン機能は不要。
* ユーザが独自にイベントを追加することが可能
* 誕生日などでグルーピング化し、誕生日のカウントダウンが可能となるようにする
* 管理者がCSV等で一括イベント登録できるような機能を作成
* 終了したイベントは、TOP画面には表示せず、終了したイベント一覧から表示することが可能。
【システム要件・非機能要件・技術要素・パフォーマンス要件】
* MVPでは外部API連携は不要だが、今後、本格稼働で外部API連携も見据えた構成・作りにする。
* 上記要件を満たすために、最適な構成にする
* フロントエンドは、ReactやVue.jsなどのモダンなJavaScriptフレームワークを使用
* バックエンドは、Node.jsやPythonなどのモダンなサーバーサイドフレームワークを使用
* データベースは、MongoDBやPostgreSQLなどのリレーショナルデータベースを使用
* レスポンシブデザインを採用し、PC・スマートフォン・タブレットなど様々なデバイスで快適に利用できるようにする
* セキュリティ対策を講じ、ユーザーデータの保護を行う
* 高速なレスポンスを実現し、ユーザー体験を向上させる
* スケーラビリティを考慮し、将来的なトラフィック増加に対応できるようにする
* 機能拡張が容易な構成
* コードの可読性を重視し、保守性の高いコードを書く
* テストコードを充実させ、品質の高いプロダクトを目指す
* ドキュメントを充実させ、開発者が理解しやすいようにする
* CI/CDを導入し、開発の効率化と品質向上を図る
* 開発環境はDockerを使用し、環境構築の手間を減らす
* GitHubを利用してソースコードの管理とバージョン管理を行う
そして生成された仕様書をそのままclaude code に貼り付けてscaffoldを作成しました。
本記事の執筆には下記のプロンプトを投げました。
> /clear
⎿ (no content)
> これまでの当プロジェクトでのclaude codeを使った開発経験をQiitaの記事にまとめて公開したいと考えています。\
以下の内容を盛り込んで読み応えのある記事をマークダウンで作成してくれますか？あくまで私人間が書いた体裁でおねがいします。\
・開発したもの（要約）\
・機能紹介\
・使用技術（言語、DB）\
・デプロイ先（フロントエンドはVercel, バックエンドはRender (両方とも無料のお試しプラン）、認証はfirebase authenticator)\
・開発期間は1週間ほど\
・claude code はproプラン\
/
⎿ Interrupted by user
> これまでの当プロジェクトでのclaude codeを使った開発経験をQiitaの記事にまとめて公開したいと考えています。\
以下の内容を盛り込んで読み応えのある記事をマークダウンで作成してくれますか？あくまで私人間が書いた体裁でおねがいします。\
・開発したもの（要約）\
・機能紹介\
・使用技術（言語、DB）\
・デプロイ先（フロントエンドはVercel, バックエンドはRender (両方とも無料のお試しプラン）、認証はfirebase authenticator)\
・開発期間は1週間ほど\
・claude code はproプラン\\
・Proプランだと、やはりすぐに制限が来てしまい、少し物足りなさがあるが、強制的に使えなくなることで、使い続けてしまう（ちゃん
と休憩したり寝たりすることができるので裏を返せばこの制限はアリ）\
・デプロイ先のプラットフォームのアカウント作成や設定などはやはり手動でやる必要があるので、全く開発経験がない人がサービスデ
プロイするのは少しハードルがあるかも。でも、手動でのやり方をclaude
codeに聞けば丁寧に教えてくれる。それに従えばいいけど、「環境変数」ってなに？ってレベルだと時間かかるかも。\
・キャプチャとって、ファイルの場所を教えれば、画像を読んで答えてくれる。\
・出力されたエラーをそのまま貼り付けるだけで自律的に解決してくれるが、エラー出てないけどwebサイト上の変な挙動は伝えるのに工夫
する必要がある（日本語での説明能力が求められる）\
・今回の開発で99.99%くらいコードを書いていない。vscodeの編集エディタに触れたのは数える程。ほとんどターミナル\
・vscodeのターミナルがちらつくことがある。原因なんなんだろう（誰か教えて）\
・https://zenn.dev/minedia/articles/claude-code-knowledge-management を参考に、コマンド一発で知識システムを導入。ちゃんと参照
してくれることもあれば、参照を忘れることがある。その時は言ってあげる。\
・筆者はreactの経験はないが、reactでどんどん出来上がっていくのを見て、感動半分、自分が理解できないコードをデプロイして運用す
るという不安半分ある。\
・この開発を続けていると、たしかに個人としての技術力はどんどん落ちていくと感じた。エラーや不具合が発生した時に原因を調べるの
が異常に億劫になり、すぐにclaude codeに頼りたくなる。\
・完成したサイトがこちら https://www.countdownhub.jp/
「当日開催」のイベントはないかもしれないので他のタブを開いて動作を確認してみてください\
・よかったらアカウント作成、イベント登録してみてください\
・このサービスは軌道に乗るか乗らないかわかるまで運用を続けようと思うので、バグや不具合を発見したら教えてください\
・機能改善、追加機能要望があればご連絡ください\
・コードをprivateにしようとも考えたのですが、もはや生成AIの進化がここまでくると隠す意味はあまりなさそうなのでオープンにしまし
た。（隠しても近いうちにリバースエンジニアリングされそう）\
・エンジニアとしての将来がますます不安になりました。これからどのように立ち振る舞うか真剣に考えなければならない\
・開発途中、なかなか解決できない問題があり、2日ほど押し問答した。（reactのuseEffect周りの無限ループ周りとアニメーション周り）
結局一部機能を削る & ultrathinkという言葉を使って解決した\
・押し問答中トークンを消費して制限くるとだいぶ精神的にくるものがある\
・webの動作確認については、近いうちにseleniumと統合した仕組みとかできるんだろうか。また、RPAのようにGUI操作の権限も渡せるよう
になる未来もありそう。そしたらSaaS側の設定とかも自動化が進みいよいよエンジニアの領域がかなり狭くなる\
\
\
(ここからはclaude code向けの指示）\
上記箇条書きで書いたものは思いついたものを羅列しただけなので、こちらの要素を盛り込んだ上、脚色し、章立て、論理的な構成で仕上
げてください。
✻ Thinking…
完全にAI依存だ。。