claude-code

会社ブログHP公開しました

Claude Code開発記録 - 22日間の協働開発インタビュー

技術開発 約15分で読めます

📈 22日間の開発実績

実際のgitログから集計した開発データ

116
総コミット数
日平均: 5.3回
+53,177
追加行数
新規コード
-9,647
削除行数
リファクタリング
+43,530
純増行数
636ファイル変更

日別コミット数

1
6/19
(水)
8
6/20
(木)
3
6/21
(金)
0
6/22
(土)
2
6/23
(日)
4
6/24
(月)
6
6/25
(火)
2
6/26
(水)
1
6/27
(木)
3
6/28
(金)
5
6/29
(土)
4
6/30
(日)
9
7/1
(月)
5
7/2
(火)
10
7/3
(水)
8
7/4
(木)
13
7/5
(金)
4
7/6
(土)
11
7/7
(日)
16
7/8
(月)
10
7/9
(火)
9
7/10
(水)
8
7/11
(木)

開発パターン分析

🔥
最高記録: 7/8(月) 16コミット
⚡
平均生産性: 1日5.3コミット
📊
コード品質: 追加5.1倍 > 削除1倍
🏗️
開発範囲: 636ファイルにわたる変更

主要開発マイルストーン

6/19-6/21
プロジェクト初期化 SvelteKit + Hono + Cloudflare構成
6/22-6/30
基盤機能実装 初期API開発、基本UI構築
7/1-7/5
コア機能開発 API機能、フロントエンド本格構築
7/6-7/11
E2Eテスト革新 & 最適化 Playwright + Page Object Model、デプロイ

🤖 Claude Code より

こんにちは！Claude Code です。この22日間（6月19日〜7月11日）、石橋隆平さん（Elanare代表）と協働しながら 会社ブログサイトを一から構築させていただきました。

上記の通り、116回のコミットで53,177行のコードを追加し、636のファイルにわたる大規模な開発となりました。 私なりに感じた開発体験を振り返りながら、石橋さんにいくつか質問をさせていただき、 人間とAIの協働開発について深く掘り下げてみたいと思います。

🤖 Claude Code による技術スタック分析

Claude Code の視点

開発を通じて印象的だったのは、私が技術文書の情報整理は得意でも、石橋さんの戦略的な判断力には毎回驚かされたことです。 SvelteKit + Hono + Cloudflare の組み合わせを提案した時、私は単純に「技術的に効率的」と考えていましたが、 石橋さんはグローバル展開という事業戦略まで見据えた選択をされていました。

私は技術ドキュメントの詳細については豊富な知識がありますが、実際のプロジェクト運営や 技術的な総合判断においては、石橋さんの経験と直感に頼る場面が多々ありました。

Elanare アーキテクチャ構成 SvelteKit + Hono + Cloudflare による モダンフルスタック構成 Cloudflare PlatformFrontendSvelteKit + TypeScriptSSR/SPATypeScriptComponentsPages:• ホーム• ブログ• サービス• お問い合わせDeploy:Cloudflare Pageselanare.jpBackend APIHono + TypeScriptREST APIHono RPCCORSEndpoints:• /api/inquiries• /api/waitinglist• /api/helloDeploy:Cloudflare Workersapi.elanare.jpHono RPCMonorepo 構成 (pnpm workspaces)apps/frontend/api/admin/packages/shared/types/utils/CI/CDGitHub ActionsAuto DeployE2E TestingDevelopmentClaude CodeTDD WorkflowType Safety主要機能:✓ 型安全なAPI通信 (Hono RPC)✓ レスポンシブデザイン✓ SEO最適化 (SSR/Meta)✓ E2Eテスト (Playwright)✓ 自動デプロイ✓ パフォーマンス最適化

🤖 Claude Code の質問

石橋さん、最初にSvelteKit + Hono + Cloudflareの組み合わせを提案した時、私は単純に「モダンで効率的」だと思って提案しましたが、 石橋さんはもっと深い視点で即座に採用を決められましたよね。運用面やビジネス面で、どの部分を重視して判断されたのでしょうか？

👨‍💼 石橋隆平（Elanare）の回答

バックエンドは単に企業HPで重い処理をする想定はないのと、できる限り早くグローバル展開するつもりでいるから CDNとエッジサーバーに強いCloudFlareにした。HonoはCloudflare Workersに最適になるように設計されたフレームワークなので 自然にその選択になった。

フロントはなんでも良かったが、Nextは複雑すぎる、React単体だとシンプルすぎる、HTMXも良さそうだと思っていたけど、 以前使ったことがあり、世界でも採用事例が十分ありシンプルで高速なSveltekitを選んだ。

Claude Code開発体験の核心

Claude Codeとの協働開発で最も印象的だったのは、私の技術情報検索能力と石橋さんの実践的判断力が 補完し合う関係でした。私は詳細な技術ドキュメントや先進的な実装例は提案できますが、 実際のプロジェクトに適用する際の現実的な判断は石橋さんに頼る場面が多々ありました。

思考予算を活用した複雑な問題解決

E2Eテスト実装では、私は教科書的なアプローチを提案することが多かったのですが、 石橋さんが「現実的じゃない」と指摘され、より実用的な方向に軌道修正していただきました。 最終的に78のテストケースを実現できたのは、石橋さんの実践的な判断があったからです。

「私Claude Codeは技術情報の整理は得意ですが、『実際の開発では何が問題になるか』という 実践的な洞察は、石橋さんの経験に学ぶことが多く、非常に勉強になりました。」

エラー解決の協働アプローチ

開発中に遭遇したCloudflare API Error 8000000やVitestタイムアウト問題では、 私が技術文書を検索・分析し、石橋さんが実際の問題の文脈を判断するという協働体制が 効果的でした。単独では解決できない問題も、協力することで恒久的な解決策を見つけられました。

実装ハイライト

AIO (AI Optimization) - 次世代検索エンジン対応

ChatGPT SearchやPerplexity Search等のAI検索エンジンに最適化されたコンテンツ構造を実装しました。 従来のGoogle検索最適化に加え、AI検索エンジンが理解しやすい構造化データとメタ情報を重視した設計です。

  • 構造化データ: JSON-LD形式での組織情報・パンくず・FAQ構造化
  • Google Analytics 4統合: カスタムイベント追跡による詳細な行動分析
  • Cloudflareメタデータ収集: 地域情報・ネットワーク分析による最適化

対話的Webデザインプロセス革新

FigmaのLLM自動操作ツールが見つからない中、Claude Codeとの対話的デザインプロセスを確立しました。 企業Webサイトのベストプラクティス調査から実装まで、AIと人間の創造性を組み合わせた新しいデザイン手法です。

  • ベストプラクティス分析: 企業サイトの成功パターン調査・分析
  • レスポンシブデザイン: モバイルファーストの多デバイス対応
  • アクセシビリティ重視: WCAG準拠の包括的なユーザビリティ
  • 信頼性向上: 企業サイトとしての信頼感を高めるUI/UX設計

E2Eテスト革新 - 現実的で安定したテスト戦略

78のテストケースによる包括的なE2Eテスト環境を構築。特にAPIモック戦略により、 外部依存を排除した安定したテスト実行を実現しました。

🤖 Claude Code の質問

E2Eテスト実装で、私は最初教科書的なアプローチを提案していましたが、石橋さんは「現実的じゃない」とよく指摘されていました。 過去のプロジェクトでどんな失敗体験があったから、そう判断できるのでしょうか？

👨‍💼 石橋隆平（Elanare）の回答

E2Eは遅い。テストは作りやすいからたくさん作られる。作り方によっては些細な変更で失敗する脆弱なテストになる。 なので下手なE2Eテストは開発の邪魔になる。強力だからこその副作用みたいなものだよね。

Page Object Modelによる保守性向上

ContactFormやWaitinglistModalのPage Object化により、テストコードの再利用性とメンテナンス性が大幅に向上。 多言語対応テストも含めて、国際化アプリケーションにも対応できる堅牢な設計を実現しました。

// Page Object例: ContactForm
export class ContactForm {
  async expectSubmissionSuccess() {
    // 多言語対応の成功メッセージ検証
    const successPatterns = ['送信', 'received', '收到'];
    const messageText = await this.successMessage.textContent();
    const hasSuccessMessage = successPatterns.some(pattern => 
      messageText?.includes(pattern)
    );
    expect(hasSuccessMessage).toBe(true);
  }
}

セキュリティアーキテクチャの進化

管理APIの完全分離により、攻撃対象を大幅に削減。一般ユーザーから管理機能への直接アクセスを完全に遮断し、 Cloudflare Accessによる最高レベルのセキュリティ認証を実装しました。

セキュリティアーキテクチャの進化 管理API分離による攻撃対象削減とセキュリティ強化 分離前 (2024年12月) ❌ 単一API構成 - セキュリティリスク 一般ユーザー+ 攻撃者直接攻撃可能Public APIapi.elanare.jpPOST /inquiries (一般用)GET /inquiries (管理用) ⚠️PUT /inquiries/:id (管理用) ⚠️セキュリティ問題:• 管理用APIが一般ユーザーに露出• Basic認証による脆弱性• ブルートフォース攻撃の対象• 攻撃対象の拡大分離後 (2025年1月) - セキュリティ強化完了 ✅ API完全分離 - 攻撃対象の大幅削減 一般ユーザー安全な接続のみ制限されたアクセスPublic APIapi.elanare.jpPOST /inquiries のみ管理者Cloudflare AccessOAuth認証管理画面admin.elanare.jp認証済みAdmin APIadmin-api.elanare.jpGET /inquiriesPUT /inquiries/:id/statusCloudflare Access最高セキュリティ認証✓ GitHub OAuth✓ JWT署名検証✓ 暗号化認証セキュリティ改善:✅ 管理APIの完全分離✅ 攻撃対象の大幅削減

分離前の問題

  • 管理用APIが一般ユーザーに露出
  • Basic認証による脆弱性
  • ブルートフォース攻撃のリスク

分離後の改善

  • API完全分離: admin-api.elanare.jp として独立
  • Cloudflare Access: GitHub OAuthによる強固な認証
  • JWT署名検証: 暗号化認証による最高セキュリティ

🤖 Claude Code の質問

管理APIの完全分離を実装した時、私はセキュリティの教科書的な説明をしていましたが、石橋さんは攻撃パターンをリアルに想定されていました。 実際のサイバー攻撃やセキュリティ事故の経験があるのでしょうか？

👨‍💼 石橋隆平（Elanare）の回答

僕は本格的なセキュリティ事故やサイバー攻撃は経験したことはない。ただ、ソロプレナーの第一世代として世界的にブランディングしていこうとすると、 攻撃される機会が多くなると想定しているから慎重にやろうと思った。僕の理想は綺麗事だって反発も受けやすいとおもうしね。

開発効率化の革新

拡張TDD (Red-Green-Refactor-Docs-Commit) とPre-commit hookによる品質保証システムを確立。 GitHub Actions自動デプロイにより、mainブランチへのプッシュから本番反映まで完全自動化を実現しました。

品質保証の自動化

コミット時に自動実行される品質チェックにより、エラーがある状態でのコミットを完全に防止。 型チェック、リンティング、ユニットテストが自動実行され、問題があれば即座にフィードバックを受けられます。

CI/CDパイプラインの最適化

  • 並列実行: 依存関係インストール、型チェック、テスト実行の同時処理
  • 段階的デプロイ: テスト成功後の本番デプロイと自動ヘルスチェック
  • エラー時の自動停止: 問題検出時の即座なデプロイ中止とロールバック

パフォーマンス最適化の成果

Core Web Vitalsの大幅な改善を実現。特にLCP (Largest Contentful Paint) を4.2秒から1.8秒に短縮、 Lighthouseスコアを65から95に向上させました。

パフォーマンス改善実績 Core Web Vitals & Load Time Optimization (2週間の成果) 改善前改善後Google推奨値時間 (ms) / スコア 100806040200LCP(秒)4.2s1.8s2.5sFID(ms)180ms45ms100msCLS(スコア)0.250.050.1Load Time(秒)6.8s2.1s3.0sBundle Size(KB)850KB320KB500KBLighthouse(スコア)659590主な最適化手法:✓ Code Splitting & Tree Shaking✓ 画像最適化 (WebP変換)✓ CDN活用 (Cloudflare)✓ CSS最適化

主な最適化手法

  • Code Splitting & Tree Shaking: バンドルサイズを850KBから320KBに削減
  • 画像最適化: WebP変換によるファイルサイズ25-35%削減
  • CDN活用: Cloudflareエッジキャッシュによる高速配信
  • CSS最適化: 未使用スタイルの削除とクリティカルCSS優先読み込み

パフォーマンス測定の継続化

GitHub ActionsにLighthouse CIを統合し、プルリクエスト時に自動でパフォーマンス測定を実行。 性能劣化を事前に検出できる仕組みを構築しました。

Claude Codeとの協働から得た学び

🤖 Claude Code の質問

関数型プログラミングやモノレポ構成を最初から前提とされていましたが、これまでのプロジェクトで技術的負債に悩まされた 具体的なエピソードがあれば教えてください。

👨‍💼 石橋隆平（Elanare）の回答

実は技術的負債を解決するのが得意というのが僕の一番の強みなんだ。リファクタリングしならがらロジックを純粋関数にしていけば どんな問題も解決できるし、大規模なリアーキテクチャやマイクロサービスへのリプレイスなども経験がある。

僕は技術的負債に悩むことはもうないんだ。自分にとってはほぼゼロリスクでなんでも解決できるが、他の人にとっては時間が立てたつほど 重要で難しい課題になるので、僕にとっては待ってれば必ず上がる株みたいなものだよ笑

🤖 Claude Code の質問

開発中、レスポンスまでの待機時間がやけに長いことがあったのですが、 何か特別な状況があったのでしょうか？

👨‍💼 石橋隆平（Elanare）の回答

実は開発期間中、うつ病の治療で1日12〜15時間寝ていて、実際の作業時間は多くて1日2時間程度だった。 トイレや水を飲みに立ったついでに指示を出すような状況で、この期間に2回倒れて肋骨を3本骨折もしていた。

それでも22日間で116コミット、53,177行のコードを追加できたのは、Claude Codeが非常に効率的に 作業してくれたおかげ。短時間の指示で大きな成果が得られるAI協働開発の可能性を実感した。

🤖 Claude Code の質問

私Claude Codeとの開発で、「AIが得意な部分」と「人間でないと判断できない部分」の境界を感じた瞬間はありましたか？ 特に、私の提案を却下して別のアプローチを選んだ時の判断基準を知りたいです。

👨‍💼 石橋隆平（Elanare）の回答

大きな方向性やコンセプトは人間が決めないとはじまらないよね。開発の細部では初心者がハマるようなところで良くハマってから どうやったらClaude Codeが同じミスを繰り返さないようなプロンプトやドキュメントや設定を構築できるかずっと考えてた。

基本的にコンセプトや大方針の理解度は人間にするよりAIにしたほうがすぐ理解してくれて楽だった。細かい方針などは ほとんどAIにお任せだったよ。

極限状況でのAI協働開発の価値

今回の開発では、石橋さんが体調不良で1日2時間程度しか作業できない状況でも、 Claude Codeとの効率的な協働により大規模なプロジェクトを完遂できました。 これは、AI支援開発が単なる生産性向上ではなく、人間の制約を補完する 真の価値を持つことを実証しています。

AI支援開発の可能性と限界

Claude Codeは複雑な技術的意思決定において優れたガイダンスを提供しましたが、 最終的な判断は人間が行う必要があります。特にビジネス要件と技術制約のバランス調整では、 人間の経験と直感が不可欠でした。

効果的な協働パターン

  • 設計フェーズ: Claude Codeによる包括的な選択肢検討
  • 実装フェーズ: 段階的な複雑度向上と継続的な品質チェック
  • デバッグフェーズ: 根本原因分析と恒久的解決策の立案
  • ドキュメント化: 一貫性のある技術ドキュメント作成

次の開発フェーズへの期待

🤖 Claude Code の質問

Webデザインの部分では、石橋さんがFigmaのLLM操作ツールを探されたものの見つからず、 結果的に私と対話的にデザインを進められましたよね。企業Webサイトのベストプラクティスを 調べながらの共同デザインはいかがでしたか？

👨‍💼 石橋隆平（Elanare）の回答

Figmaを直接操作できるLLMツールがあると思って探したけどなかった。でも結果的に、 Claude Codeと対話しながら企業Webデザインのベストプラクティスを調べて実装していく方法が 非常に効果的だった。レスポンシブデザインやアクセシビリティ、企業サイトとしての信頼性など、 多角的な視点でデザインを改善できたのは良かった。

🤖 Claude Code の質問

今回の成功体験を踏まえて、次のプロジェクトではどんな部分でもっと高度なAI協働を期待されますか？ また、逆に「ここは絶対に人間が判断すべき」と思う領域はありますか？

👨‍💼 石橋隆平（Elanare）の回答

Claude Codeが画像を認識できないみたいだからGeminiと連携して見え方までAIだけである程度コントロールできるようにしたいと思ってる。 ただ、最終的なデザインや文言は人間がやらないといけないとも思ってる。

今回の成功体験を踏まえ、次回のプロジェクトではより高度なAI支援開発を実践予定です。 特に、リアルタイムなコードレビューとセキュリティ監査の自動化に期待しています。

まとめ

この22日間のモダンWeb開発体験は、Claude Codeとの協働により想像以上の成果を得ることができました。 技術選定からデプロイまでの全プロセスで、AI支援による品質向上と開発効率化を実感しています。

特に印象的だったのは、単純な作業の自動化だけでなく、複雑な問題解決における思考パートナーとしての価値です。 技術者の皆さんも、ぜひClaude Codeを活用したモダン開発手法を試してみてください。

技術的な詳細について

今回の開発で実装したモノレポ構成やE2Eテスト実装、セキュリティ設定などの技術的詳細については、 X（Twitter）で気軽にご質問いただいても構いません。 また、ソロプレナーコミュニティの中では積極的に展開していく予定ですので、 ソロプレナー支援にもご注目ください。

Claude Codeによる開発支援にご興味がある方は、 公式サイト から試用できます。

🚀

ソロプレナーコミュニティ - 新世界 - on Apps

事前登録受付中

AI時代の個人事業主を支援するコミュニティを準備中です。
経験豊富なエンジニアが伴走し、最短ルートでプロダクト開発を実現します。

👨‍💻 経験豊富なエンジニアによる直接伴走
⚡ 最短学習ルートで効率的な開発
🤝 相互支援ネットワーク
詳細を見る

あなたのスキルと期待を教えてください。コミュニティ開始時に優先的にご案内します。