Re:Claude Codeで始める自動アプリ開発

はじめに

こんにちは。株式会社ネクスウェイでエンジニア1年目をしているHERUESTAです。

Claude Codeが流行っている中で、AIエージェントに実装をしてもらうという開発体験がどうなのかが気になり、今回issue→PR作成までを行ってもらいました。

📖 この記事はこんな方におすすめです

• Claude Codeって名前は聞いたことあるけど、実際どうなの という方
• 実際の使用感や体験談が聞きたい という方

参考情報

• 今回の記事では、Claude Codeにissue作成→PR作成までを行ってもらう環境を、下記の記事の手順に従って構築いたしました。これらの記事のおかげで、スムーズに環境構築を行うことができました。ありがとうございました

  • Claude Codeによるissueの仕方についての記事
    https://zenn.dev/ktakayama/articles/fa1712687e9b13

  • Claude Codeによる実装→PR作成の仕方についての記事
    https://qiita.com/getty104/items/e706923b66f4659dec24

動作環境

使用技術

🎯 作成アプリ

私の好きなVtuberグループである「ぶいすぽっ！」の切り抜きのみを表示したアプリを作りました

なぜこのアプリを作ったか
YouTubeで検索すると色んな動画が混在していて、「切り抜きだけをサクッと見たいなあ...」という場面がよくありました。
そんな時に「これClaude Codeで作ってもらえるかも」と思い立ったのがきっかけです。

Claude Codeの貢献度
APIキーの設定とYouTube APIでの動画登録部分以外は、ほぼ全てClaude Codeが作成してくれました
特にフロントエンド部分は一発でデザインまで含めて完璧に書いてくれて、正直驚きました。

実際の動作がこちらになります
https://vkiri-front.vercel.app/

お気に入りの爆速回転スライドショー

GitHub

🚀 Claude Codeでのアプリ開発手順

📋 基本的な流れ

1. 📝 /create-issue でissueを作成してもらう
   → 「こんな機能がほしい」を伝えるだけです

2. 🔍 内容チェック
   → 足りない部分があれば修正依頼、OKなら次へ

3. ⚡ /exec-issue #issue番号 で実装→PR作成まで一気に

4. ✅ 動作確認
   → 問題なければマージ、課題があれば追加のissue作成

5. 🔄 1〜4の繰り返し
   → 完成まで続けます

ポイント： 一つ一つのissueは小さく区切ることで、Claude Codeが理解しやすくなります

では、実際の様子を見ていきましょう

⚙️ 私の使用環境

• Claude Codeのプラン：Proプラン
• モデル：Claude Sonnet 4を使用

💰 料金について：Proプランは月額課金ですが、十分足りました。このボリュームの個人開発であれば、Proプランで十分そうです。

🛠️ 事前準備

Claude Codeを使う前に、少し準備が必要です。

Claude Codeのセットアップは公式に詳しく記載があったので、公式に従ってセットアップしてください

• 【anthropic公式】Claude Codeのセットアップ

1️⃣ Claude Codeの初期設定

/init

このコマンドで .claude フォルダが作成されます。ここが設定の中心地になります。

フォルダ構成はこんな感じです：

.claude/
├── CLAUDE.md            // プロジェクトの情報をClaude Codeに伝える
├── commands/            // 自作コマンドを格納
├── projects/            // プロジェクト固有の設定
├── settings.json        // 権限設定（push禁止なども設定可能）

2️⃣ GitHub CLIのインストール

Claude CodeがGitHubと連携するために必要です。
Claude Codeがissueの作成やPRの作成を行うために、GitHubのAPIを使います。その時に gh コマンドが必要になります。

インストール方法：

• 公式インストールガイド
• 日本語ドキュメント

⚠️ つまずきポイント：gh auth login でGitHubにログインするのを忘れがちです。インストール後は必ずログインしましょう。

1️⃣ issueをClaude Codeで作成してもらう

📚 参考記事の紹介

以下の記事を参考にissueを作成するコマンドを作成しました：

• Claude Codeが書いたissueはClaude Codeに書いてもらう

🎬 実際の様子

私が実際に打ったプロンプト：
「TOP画面を作成してください」

Claude Codeのすごいところ

「TOP画面を作成してください」というざっくりした指示に対して、Claude Codeは以下のような対応をしてくれました：

1. 📂 プロジェクト構造を自動解析
2. 🤔 適切な質問を投げかけてくれる
3. 💡 具体的な提案をしてくれる

> /create-issue is running… TOP画面を作成してください

claude
⏺ TOP画面を作成するためのissueを作成する前に、現在のプロジェクト状況を確認し、いくつか質問させていただきます。

⏺ Read(README.md)
  ⎿  Read 54 lines (ctrl+r to expand)

⏺ List(.)
  ⎿  Listed 778 paths (ctrl+r to expand)

⏺ Search(pattern: "package.json")
  ⎿  Found 0 files 

⏺ プロジェクトの構造を確認しました。フロントエンドはNext.jsで、バックエンドはRailsのAPIという構成ですね。現在、動画詳細ページ（/video/[id]）はあるようですが、TOP画面についていくつか質問があります：

  質問

  1. TOP画面の要件について：
    - READMEによると「いいね数の多い動画を並べる」とありますが、具体的にどのような機能が必要でしょうか？
    - 動画の一覧表示、検索機能、フィルタリング機能などは含まれますか？
  2. 現在の状況について：
    - 現在のTOP画面（/front/src/app/page.tsx）はどのような状態でしょうか？
    - 完全に新規作成が必要ですか、それとも既存のものを改修しますか？
  3. デザイン・UI要件について：
    - 具体的なデザイン要件やワイヤーフレームはありますか？
    - レスポンシブデザインは必要ですか？
    - 使用すべきUIコンポーネントライブラリはありますか？

  現在のページを確認してから、より具体的なissueを作成したいと思います。

⏺ Read(front/src/app/page.tsx)
  ⎿  Read 269 lines (ctrl+r to expand)

⏺ 現在のTOP画面の状況を理解しました。基本的な機能は実装されているようですが、いくつかの改善点があります。更に詳細を確認するために、コンポーネントの状況も見てみましょう。

⏺ List(front/src/components)
  ⎿  Listed 13 paths (ctrl+r to expand)

⏺ Read(front/package.json)
  ⎿  Read 34 lines (ctrl+r to expand)

⏺ プロジェクトの詳細を把握しました。現在のTOP画面は基本機能は実装済みですが、READMEの要求に完全に対応していません。以下の質問で要件を明確にしてからissueを作成します：

  TOP画面の要件確認

  現在の実装状況：
  - ✅ 動画一覧表示（VideoGrid）
  - ✅ スライドショー機能（VideoSlideshow）
  - ✅ ページネーション
  - ✅ ChakraUIベースのレスポンシブデザイン

  READMEとの差異：
  - ❌ 「いいね数の多い動画を並べる」が実装されていない（現在は全動画表示）
  - ❌ ライバー別フィルタリング機能がない
  - ❌ 検索機能がない

  質問：

  1. TOP画面の優先順位：
    - 現在は「全動画表示」ですが、「いいね数順」に変更しますか？
    - それとも両方の表示モードを切り替えできるようにしますか？
  2. 必要な新機能：
    - ライバー別フィルタリング機能は必要ですか？
    - 検索機能は必要ですか？
    - ソート機能（いいね数、投稿日など）は必要ですか？
  3. デザイン要件：
    - 現在のデザインは維持して機能追加のみですか？
    - それとも大幅なデザイン変更が必要ですか？

  これらの要件が明確になったら、適切に分割した複数のissueを作成します。

実際に作成したissueになります
https://github.com/HERUESTA/Vkiri_front/issues/6

2️⃣ 実装→PR作成まで行ってもらう

📚 参考記事（Part 2）

以下の記事を参考に実装→PRを作成するコマンドを作成しました：

• Claude CodeにIssueのタスクを遂行→PRの作成まで行なってもらう

🛠️ 私の環境での工夫

Docker環境で開発していたので、参考記事を基にdocker関連のコマンドを使うように設定を調整しました。
Claude Codeは環境に合わせて柔軟に対応してくれるので、「Docker使ってますよ」とか「Windows環境ですよ」みたいな情報を伝えると良いです。

⏺ Issue #4の内容を確認しました。このIssueはCLOSED状態ですが、実装を進めてみます。まず現在の状況を確認し、最新のmainブランチから開始します。

⏺ Update Todos
  ⎿  ☒ Issue #4の内容を理解し、README.mdの状況を確認する           
     ☐ mainブランチにチェックアウトし、最新のリモート状況を取得する
     ☐ 適切な命名でブランチを作成・チェックアウトする
     ☐ README.mdに「こんにちは」を追加する
     ☐ 変更をコミットする
     ☐ PRを作成する
     ☐ PRテンプレートを確認する

⏺ Update Todos
  ⎿  ☒ Issue #4の内容を理解し、README.mdの状況を確認する           
     ☐ mainブランチにチェックアウトし、最新のリモート状況を取得する
     ☐ 適切な命名でブランチを作成・チェックアウトする
     ☐ README.mdに「こんにちは」を追加する
     ☐ 変更をコミットする
     ☐ PRを作成する
     ☐ PRテンプレートを確認する

⏺ Bash(git checkout main && git pull origin main)

実際のPRは以下になります
https://github.com/HERUESTA/Vkiri_front/pull/7

🎯 実際に使ってみた正直な感想

🌟 よかった点

1. issueとPRの作成が非常に優秀

普段「issueとPR作成は面倒だなあ...」と思っていましたが、Claude Codeは以下のような対応をしてくれました：

• 📝 詳細で読みやすいissue を一発で作成
• ✅ TODOリスト形式 で管理しやすく整理
• 🎯 AIが理解しやすい構造 で書いてくれる

2. フロントエンドの完成度が非常に高い

Next.jsをあまり理解していない私でも、Claude Codeが書いたコードは：

• 🚀 一発で動作する
• 🎨 デザインも含めて完璧
• 📱 レスポンシブ対応済み

修正がほとんど必要なかったことには本当に驚きました

注意すべき点

技術力向上には工夫が必要

以下の点で注意が必要だなと感じました。Claude Codeがほぼ全て作成してくれるので：

• 「アプリができて終了」 で終わらせると技術力アップにつながらない
• 「なぜこのコードで動作するのか」 を考える習慣が大切
• 「もっと良い書き方はないだろうか」 という探究心も必要

最後に

今回Claude Codeを使ってみて、個人開発のハードルがグッと下がったように感じました。
ただ、その中でもしっかりと理解する姿勢を常に考えていないと、いつのまにかAIに指示されている側に回ってしまうかもしれません。私自身も、そう言った点を注意しながら今後もアプリ開発やAgentの付き合い方を考えていきたいと思います。