---
title: "AI駆動開発の環境をゼロから作る｜Claude Code + GitHub + Vercel（macOS/Windows対応）"
excerpt: "環境構築から本番公開・運用までを一続きで解説します。AIに実装を任せるほど、安全に止める仕組みの価値が上がります。ブランチ保護でよくある設定ミス、プランモードで手戻りを減らす方法、AIが触れない領域の切り分けまでまとめました。Windows手順も含みます。"
author: "AI活編集部"
author_username: ai-katsu-editorial
published_at: 2026-04-05T00:00:00+00:00
verified_at: 2026-04-05T00:00:00+00:00
models: ["Claude Code"]
tools: ["GitHub", "Vercel"]
tasks: ["開発・エンジニアリング", "ツール検証"]
canonical_url: https://ai-katsu.jp/articles/claude-code-github-vercel-intro
---
# AI駆動開発の環境をゼロから作る｜Claude Code + GitHub + Vercel（macOS/Windows対応）

AIにコードを書かせるだけなら、ツールを入れれば今日から始められます。しかし**それを本番公開まで安全に運べる状態にする**には、いくつかの設定が必要です。

この記事では、**環境構築から本番公開・運用まで**を一続きで解説します。macOSとWindowsの両方の手順を含みます。

## この記事の概要

| 項目 | 内容 |
| --- | --- |
| 構成 | Claude Code + GitHub + Vercel |
| 範囲 | **環境構築 → リポジトリ保護 → 設計 → CI/CD → 本番公開 → 運用** |
| 対応OS | macOS / Windows（**差分はSTEP 1のみ**） |

## 結論：役割を3つに分けて理解する

| ツール | 役割 |
| --- | --- |
| **Claude Code** | AI搭載の開発アシスタント（**実装・PR作成まで担う**） |
| **GitHub** | コードの管理・品質チェックの場所 |
| **Vercel** | 本番サイトを公開・運用する場所 |

```
開発者のPC
  [Claude Code] ←── AIが実装・PR作成を支援
        ↓ git push
GitHub
  ・コードの保管場所
  ・PRのレビュー・マージ
  ・テスト自動実行 / 脆弱性の自動検知
        ↓ mainにマージ → 自動デプロイ
Vercel
  ・ホスティング
  ・PRごとにプレビューURLを自動生成
  ・カスタムドメイン・SSL自動発行
```

## STEP 1：環境構築

### macOSの場合（3つ）

```
# Node.js v22 の確認（22.x.x と表示されればOK）
node -v

# GitHub CLI
brew install gh
gh auth login

# Claude Code
npm install -g @anthropic-ai/claude-code
```

### Windowsの場合（4つ）

Windowsでは **winget**（Windows標準のパッケージ管理ツール）を使うのが最も手軽です。**macOSのHomebrewに相当し、Windows 10 21H1以降・Windows 11に標準搭載**されています。

ターミナルは標準搭載の**PowerShell**を使います。

```
winget install Git.Git
winget install OpenJS.NodeJS.LTS
winget install GitHub.cli
```

**Windowsでは Git for Windows のインストールが追加で必要**です（macOSには標準で入っています）。

もう1点、重要な注意があります。**各インストール後はPowerShellを再起動してからバージョン確認してください。**再起動しないとPATHが反映されません。

**STEP 2以降はmacOSとWindowsで共通です。**

## STEP 2：リポジトリを「守る」設定

リポジトリを作っただけでは、**誰でも（自分でも）mainブランチに直接pushできてしまいます。**安全レールがない状態です。

```
【危険な状態（設定なし）】
開発者 → main に直接 push → 即座に本番へ反映
         ↑ バグがあっても止まらない

【安全な状態（設定あり）】
開発者 → feature ブランチ → PR 作成 → CI チェック → マージ → 本番へ反映
                                         ↑ ここで問題を検知できる
```

### mainブランチ保護（Rulesets）

| 設定 | 値 | 意味 |
| --- | --- | --- |
| **Enforcement status** | **Active** | **これがDisabledだとルールが一切効かない** |
| Target branches | `main` | 保護対象 |
| Require a pull request | ON | PR経由でないとマージ不可 |
| Require status checks to pass | ON（任意） | CIが通らないとマージ不可 |
| Block force pushes | ON | 強制上書き禁止 |

**Enforcement status を Active にするのを忘れないでください。**Disabledで作成すると設定が全て無効になります（実際によくあるミスです）。

あわせて**Dependabotの有効化**と、**マージ戦略をSquash mergeに統一**する設定も行います。

## STEP 3：プランモードで設計する

Claude Codeの最大の特徴は**「実装前に設計を合意してから動く」**プランモードです。

-   実装方針を**複数の選択肢で提示**してくれる
-   **「どのアプローチにしますか？」と確認してから**実装を始める
-   設計の記録をファイルに保存する

実際のやりとりは次のような形です。

```
ユーザー: サービス紹介ページを追加したい

Claude Code: 以下の3点について確認させてください。
  1. ページ構成：シングルページ vs. カテゴリ別複数ページ
  2. デザイン：既存デザインに合わせる vs. 新規デザイン
  3. コンテンツ：静的テキスト vs. CMSで管理

ユーザー: シングルページ、既存デザイン、静的テキスト

Claude Code: 了解です。では実装を開始します...
```

**実装の前に方針を合意するので、「作ってみたら思ってたのと違う」という手戻りが大幅に減ります。**

### 担当範囲の切り分け

| Claude Codeが担う | 人間が担う（AIが触れない領域） |
| --- | --- |
| コードの実装 | **GitHub・VercelのGUI操作** |
| テストの作成 | **sudoが必要なOS権限操作** |
| PRの自動作成 | **最終的なマージの判断** |
| エラーの調査と修正提案 | — |

**ブラウザ上の設定操作は、AIが代替できない領域として残ります。**

## STEP 4：CI/CD（任意・推奨）

最初はスキップしても本番公開はできます。ただしリスクを把握したうえで判断してください。

| リスク | 内容 |
| --- | --- |
| バグがmainに入る | テストを手動で実行し忘れると気づかない |
| Dependabot PRの品質が不明 | 自動作成されたPRが問題ないか確認できない |
| **後から導入が大変** | **チームが増えると後付けコストが跳ね上がる** |

導入は最小構成なら1ファイルで済みます。

```
name: CI
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
      - run: npm ci
      - run: npm run test    # テストが通らないとマージ不可
      - run: npm run build   # ビルドが通らないとマージ不可
```

## STEP 5：本番公開

GitHubと連携するだけで、**mainへのマージが自動で本番反映**になります。

1.  Vercelにアクセス → GitHubでログイン
2.  「Add New Project」→ リポジトリを選択
3.  **フレームワークが自動検出される**

あわせて環境変数の設定、**PRごとのプレビューデプロイ**、カスタムドメインの紐付けを行います。

## STEP 6：運用は常にPR経由

```
# 1. ブランチを作る
# 2. Claude Code で実装
#    → 実装・テストを行い、PRを自動作成
# 3. GitHub でマージ
#    → Vercel が自動でデプロイ
```

**この流れが固定されていれば、AIが実装しても本番が壊れません。**保護設定とCIが、間に入って止めてくれます。

## よくある質問

### Windowsでも同じ手順でできますか？

**差分はSTEP 1（環境構築）のみです。**Windowsではwingetを使い、Git for Windowsのインストールが追加で必要になります。STEP 2以降は共通です。

### ブランチ保護の設定が効きません

**Enforcement status が Active になっているか確認してください。**Disabledで作成すると設定が全て無効になります。よくあるミスです。

### CI/CDは必須ですか？

**任意ですが推奨です。**スキップしても本番公開はできます。ただしチームが増えてからの後付けはコストが跳ね上がります。

### AIに任せられない作業は何ですか？

**GitHub・VercelのGUI操作、sudoが必要なOS権限操作、最終的なマージの判断です。**ブラウザ上の設定は人間が担当します。

## まとめ

-   役割は**Claude Code（実装）／GitHub（管理・品質）／Vercel（公開）**の3分担
-   環境構築の**OS差分はSTEP 1のみ**。WindowsはwingetとGit for Windowsが追加
-   Windowsは**インストール後にターミナルを再起動**しないとPATHが反映されない
-   **リポジトリ保護のEnforcement statusをActiveにする**——Disabledだと全て無効
-   プランモードで**実装前に方針を合意**すると手戻りが減る
-   **GUI操作・OS権限操作・マージ判断は人間の担当**として残る
-   CI/CDは任意だが、**後付けはコストが跳ね上がる**

AIに実装を任せるほど、安全に止める仕組みの価値が上がります。保護設定とCIを先に入れておけば、あとは流れに乗せるだけになります。

株式会社AI棒では、こうしたAI活用の検証を日々行い、企業の開発体制へのAI導入を支援しています。ご相談は[お問い合わせフォーム](/contact)から、継続的な伴走支援については[AI参謀](/ai-sanbo)をご覧ください。