NTTドコモR&Dの技術ブログです。

トップ > アドベントカレンダー2025 > Claude Codeを用いたVibe Coding開発のすすめ

Claude Codeを用いたVibe Coding開発のすすめ

アドベントカレンダー2025 生成AI アプリ開発 python

Claude Codeを用いたVibe Coding開発のすすめ

はじめに

こんにちは、NTTドコモ プロダクト技術部 後藤/谷田部と申します。
最近、社内で新規サービス創出に向けて生成AIを活用し、実装から検証までのサイクルを高速に回す機会が増えてきました。 そこで今回は、実際に自分たちが業務を通じてClaude CodeでVibe Codingを実践する中で得られた、「それなりに規模が大きいアウトプットをスムーズに出す」ために役立つTipsを紹介したいと思います。

この記事の対象者

  • Vibe Coding(AIコーディング)を始めてみたい/始めたての初心者の方
  • Vibe Codingで簡単なWebアプリなどを作ってみて、少しステップアップしたい初中級者の方

Vibe Codingとは

近年、AI技術の進化により可能となったとあるプログラミング手法の呼び名のこと。 ※語原としてはOpenAIの共同創業者であるアンドレイ・カルパシー氏が提唱したと言われています

AIに「こんな感じでよろしく！」と、雰囲気（バイブス）やノリでざっくりお願いして、コードを書いてもらう開発スタイルで、ただコードを出力してもらうだけでなくて要件定義から設計書の作成、フォルダ作成やテストも全て自動でやってもらうこともできます。

AIは意外とおっちょこちょい

上の文章だけを見ると全部AIに任せてしまえば何でも開発できるの？と疑問に思う方もいるかもしれません。 確かに新機能のPoCやライブラリ/OSSの技術検証にてClaude Codeを用いたVibe Codingを行うことで、手作業でコーディングするときと比較して生産性が500倍ぐらいになりました。

一方で、Vibe Codingで開発規模が大きくなるとこんな問題に直面することがありました。

  • AIが勝手に進めすぎて何を変更したのかわからなくなる
  • 変更記録としてファイルが大量生成されて収拾がつかない
  • 良かれと思ってAIが変な変更を入れ、バグが生じる
  • デバッグが難航すると勝手にタスクをクローズされたり、後回しにされる
  • 何度もAIとやり取りしすぎてトークン消費数が膨大になってしまう
  • AIが作った感満載のUIになってしまう

これらの課題について、解決していくためのTipsを紹介します。

Tip0:環境準備

Vibe Codingを実践する上で、エディタ上でLLMのAPIを呼び出せるようにする必要があります。

Claude CodeをCursorから呼び出すためにはClaude Codeの有料プランに契約しておく必要があります。一度もVibe Codingを試したことがないしお金を払うのはハードルが高い、、と考える方向けに無料で同じクオリティで出来る方法が最近発表されたのでまずはそちらでお試しいただく形でもよいかもしれないです。(2025/11/28時点) Google が発表した AI エディタ「Antigravity」で「Claude code」を呼び出すというものです。

参考記事：https://qiita.com/yokko_mystery/items/bb5615ebcd385a597c41 qiita.com

ただここでは筆者の開発環境に合わせてCursorとClaude Codeをセットアップする手順を説明させていただきます。今後バイブコーディングを活用していく中ではおすすめのセットとなります。

簡単にイメージ図を作成しましたが、このようにエディタである「Cursor」経由でLLMの「Claude Code」を呼び出して、実際にコード等を行ってもらうようなイメージになります。

イメージ図

0-1.AIエディタ「Cursor」のインストール

まずは「Cursor」というエディタをインストールします。 CursorはVS Codeをベースに、AI機能が深く統合されたエディタです。 今回はこのCursorからLLMを呼び出します。

  • 公式サイト（ https://cursor.sh/ ）から、ご自身のOS（Mac, Windows, Linux）に合ったインストーラーをダウンロードして実行してください。

0-2. Claude Codeの設定

公式(https://code.claude.com/docs/ja/overview)を参考にCloude Codeを設定します。

(macはCursorで Command + J でターミナルを開き、コピーしたコマンドを実行するだけです。windowsはWSLをインストールしておく必要があります。詳しくは下記記事を参照ください)

windowsの人向け:https://zenn.dev/acntechjp/articles/eb5d6c8e71bfb9

0-3. Claudeの呼び出し

設定が完了したあとに、「claude」とエディタに打ち込むとエディタでClaude codeが呼び出せるようになります(※初回呼び出し時のみ認証登録が必要です)

Claude呼び出し画面

これで準備完了です。あとは自然言語で「○○のようなwebアプリを作って~」と書けば自動でファイルも作成してコード生成してくれます。

Tip 1: MCPを導入しよう

ここからは実際にVibe Codingをしていくうえで参考となった便利なTipsを紹介していきます。

1-1:MCPとは？

MCPは「Model Context Protocol（モデル・コンテキスト・プロトコル）」の略です。

簡単に言うと、AI（特にChatGPTのようなLLM）が外部にある様々なデータやツール（ファイル、データベース、Webサービスなど）と安全かつ効率的に連携するための「橋渡し」をしてくれる共通的な通信規格のことです。

AIは言葉を理解して文章を作るのは得意ですが、それ単体では「インターネットの最新情報を検索する」「あなたのパソコンの中のファイルを読み書きする」「会社のデータベースから売上データを引っ張ってくる」といった現実世界のアクションはできません。 MCPの仕組みを利用していろんな情報をサーバーから簡単にLLMが取得できるようになったため、それぞれに適したMCPサーバーとつなげることでAIがより専門家としての行動をできるようになります。

イメージ(MCPサーバーを追加)

1-2:MCPを導入してみる

では実際にCursor上でMCPを有効化してみましょう。

今回はSerena MCPというMCPを導入してみます。

一番簡単な方法は、自分が今作成しているプロジェクトフォルダ内 に直接記入をするという方法です。

まずはプロジェクトに .mcp.jsonフォルダを作成します。 フォルダの作成くらい自分でもすぐにできますがこれもAIにお願いしてしまいましょう

.mcp.jsonフォルダの作成

これで作成できます。

次に作成した .mcp.json へ 下記文章をコピーして貼り付けます。

{
  "mcpServers": {
    "serena": {
      "command": "uvx",
      "args": [
        "--from",
        "git+https://github.com/oraios/serena",
        "serena-mcp-server",
        "--context",
        "ide-assistant"
      ]
    }
  }
}

最後にターミナル上で下記を入力すればつなぎこみが完了します。 ※今のClaudeを呼び出しているターミナルとは別でターミナルを開いて入力する必要があるのでご注意ください

claude --mcp-config=".mcp.jsonファイルのパス←環境に合わせて入力してください"

claude --mcp-config

実際につなぎこみができたかどうかについてはClaudeを呼び出しているターミナルに/mcpと入力すればわかります

/mcp

つなぎこみが完了すれば例えば“serenaを使ってプロジェクト構造を分析してコードを最適化して”とClaude上で入力するとコードレビューを行ってくれるようになります。

1-3:便利MCPまとめ

自分が使っている便利と感じたMCPツールを紹介します。

  • Serena MCP

プロジェクト全体のコードを理解して改善提案してくれます。例えば「このコード重複してるよ」「この関数使われてないよ」「ここをこう書き直せば速くなるよ」といった提案を自動でしてくれます。

  • Figma MCP

Figmaで作ったデザインを、Claudeが直接見れるようになります。「このボタンのデザインをコードにして」と言えば、Figmaを開かなくても、色やサイズ、フォントを正確に取得してHTMLやReactコンポーネントを作ってくれます。デザインとの連携が格段に楽になります。

  • Supabase MCP

データベースの操作をClaude経由でできるようになります。「ユーザー数を教えて」「先月の売上データを集計して」と聞けば、SQLを書かなくても直接データベースから情報を取得して教えてくれます。また、テーブル作成やデータ追加も対話形式でできます。

Tip 2: GitHubとClaude.mdを使ってみよう

2-1:はじめに

Vibe Codingは簡単なWebアプリを作る分にはかなり有用ですが、そこからステップアップして多くの機能をつけ足そうとするとどんどん収集がつかなくなります。

そこでGitHubとの連携をお勧めします。既にご存じの方も多いでしょうが、GitHubはGitベースのバージョン管理プラットフォームのことです。

※解説記事：【図解解説】これ1本でGitをマスターできるチュートリアル！【完全版】 #GitHub - Qiita

Vibe Codingにおいて特に重要なメリットは以下です：

  • AIやユーザーが何を変更したのか確認し、動作確認済のバージョンに復元できる
  • 謎ファイルが乱立しない
  • Issue機能でタスク管理がやりやすい(2-2で説明します)

導入方法はClaude Codeに「Gitと連携したい。タスクをIssueで管理したい。全部教えて！」と伝えて、不明点を聞きながら進めて行けばOKです。

この操作をさらにClaude Codeにやらせるイメージです：GitHub CLI を導入して Web 画面をポチポチせずに GitHub を使いこなす方法 #GithubCLI - Qiita

2-2:開発内容をGitHub Issueにまとめよう

Claude Codeは変更履歴を.mdファイルに残すのが大好きなので、何かするたびに開発記録として.mdファイルが大量生成されることにより、解決課題・残課題・バグ原因の検索性が非常に悪くなります。

ファイルの大量生成

そのため、GitHub Issueを用いてチケット方式で管理すると便利です。Claude Codeに対してやりたいことを伝えると下記のようにチケットを起票し、それに準拠して開発を進めるようなルールを作りました。

※GitHub Issueとは？：【初心者向け】GitHub Issue でタスク管理してみよう！

これによって「Issue#16を読んで実装進めて」「Issue#7のバグ対処を優先して進めて」のように指示を出しやすくなります。

Claudeが作成したタスクリスト。見やすい！
コメントを追記しながら勝手に進んでいく

2-3:ルールを厳守するようにClaude.mdに呪文を書こう

Claude Codeは我流で進めがちなので、Claude.mdにちゃんとルールを記載してGitHub Issueによるタスク管理方法を厳守させましょう。これはプロジェクトを進めるうえでClaude Codeが厳守するルールブックのようなものです。

デフォルトでは作成されないので、プロジェクトのルートディレクトリにClaude.mdファイルを作成しておきましょう (もちろんClaudeに作らせてもOK) 。

また、Claudeは賢すぎるので

  • 「OOO機能の実装やるね」→頼んでない or 優先順位がおかしい
  • 「テスト完了したからクローズするね」→完了してない
  • 「バグ解消したからクローズするね」→解消してない

ということが多くあるので、これらのケースも確実に潰せるルールを記載しておくべきと考え、Issue起票時やクローズ時には人の目による承認式にしました。多少手間はかかるものの、2025年12月現在では人によるチェックは入れたほうがいいと思います。

以上をまとめて、私は下記のようなフレーズをClaude.mdに記載しています。 参考になれば幸いです。

# 開発方針

## タスク管理

****すべてのタスクはGitHub Issueで管理する****

- GitHub Issueのみ使用
- TODO.mdは使用しない
- TodoWriteツールは使用しない

---

## Issue作成フロー

### 1. 大元のIssue作成（ユーザー承認必須）

1. Claude: Issue起票案を提示
   - タイトル
   - 本文（背景、内容、受け入れ条件）
   - ラベル案（あれば）
   可能であればテンプレートに従う

2. ユーザー: 承認 or 修正依頼

3. Claude: `gh issue create` で作成

4. 以降は自由に作業

****重要****: 大元のIssue作成は必ずユーザー承認を得ること

### 2. サブタスク・コメント（Claude判断で自由）

- Issue内のチェックリスト追加
- 進捗コメント追加
- デバッグ結果の追記
- テスト結果の報告

****自由度****: サブタスクとコメントはClaude判断で自由に追加可能

### 3. Issue完了・クローズ（ユーザー承認必須）

1. Claude: 完了報告コメントを追加
   - 実施内容
   - テスト結果
   - 関連コミット

2. ユーザー: 確認・承認

3. Claude or ユーザー: `gh issue close` でクローズ

---

## Issue作成基準

****✅ Issue作成対象****（大元のIssue）:
- 複数ステップが必要な作業
- デバッグ・試験（結果記録が必要）
- 機能追加リクエスト
- バグ報告
- リファクタリング

****❌ Issue作成不要****:
- 1ステップで完了する作業
- 単純な情報提供・質問への回答
- ドキュメントの誤字修正（軽微なもの）

---

##テンプレート
Issue起票時は下記に準拠すること
いずれにも当てはまらない場合は新しくテンプレートを作成してもよい

**バグ報告テンプレート**

## 現象
[バグの概要]

## 再現手順
1. [手順1]
2. [手順2]
3. [手順3]

## 期待される動作
[本来どう動くべきか]

## 実際の動作
[実際にどう動いたか]

## 環境情報
- OS:
- Python/Node.js:
- ブランチ:

## エラーログ

[ログを貼り付け]

## 調査結果
[調査内容を随時追記]

**機能追加テンプレート**

## 背景・目的
[なぜこの機能が必要か]

## 要件定義
- [ ] 要件1
- [ ] 要件2
- [ ] 要件3

## 受け入れ条件
- [ ] 条件1
- [ ] 条件2

## 技術的検討事項
- 技術選定:
- パフォーマンス:
- 互換性:

## 実装計画
1. [ステップ1]
2. [ステップ2]
3. [ステップ3]

**デバッグ・試験テンプレート**

## 目的
[デバッグ・試験の目的]

## 対象
- ファイル:
- 機能:

## 試験項目
- [ ] 項目1: [内容]
- [ ] 項目2: [内容]
- [ ] 項目3: [内容]

## 結果

### 項目1
- 結果: ✅成功 / ❌失敗
- 詳細: [詳細内容]

### 項目2
- 結果: ✅成功 / ❌失敗
- 詳細: [詳細内容]

## 結論
[最終的な結論]

## デバッグ方針

- デバッグが難航した場合、必ず以下を報告すること：
  1. 試した手法とその結果
  2. 残っている選択肢
  3. 推奨される次のアクション
- 勝手にIssueをクローズしないこと
- ユーザーの承認を得てから次のステップに進むこと

最後に

Vibe Codingはその名の通りノリで開発できる楽さがありますが、ただAIに任せきりにするだけではつまずく部分が多々あります。

そのため今回は「AIにコードを書かせる」のではなく「AIと一緒にプロジェクトを管理する」ために自分が参考となったTipsをいくつか紹介させていただきました。

  • MCPでAIに「役割」を与え正しく役割を実行させる
  • GitHub Issueでタスクの境界線を明確にする
  • Claude.mdでルールを定義する

2025年の今、技術の進歩は凄まじい速度で進んでいます。 恐らく来年のアドベントカレンダーの時期には、今回紹介した手法も古くなっていると思います。しかし「AIとどのように協調し、どう手綱を握って価値あるものを生み出すか」という本質的な考え方自体はこれからも変わらず重要であり続けると思うので、AI×コーディングをしていく中で一つそういった考えを取り入れることのきっかけになれば幸いです。

ここまで読んでいただきありがとうございました。