【Claude Codeチャレンジ日誌8】ClaudeCodeからgithub操作を自動化する

Claude CodeからGithubへのリポジトリ登録、変更などを自動化したくなったので、GitHub MCPを使って自動化したときのメモ書きを記事化しました。

GitHub MCPとは？

MCP（Model Context Protocol） は、AIアシスタントが外部サービスと連携するためのプロトコルです。GitHub MCPは、Claude CodeからGitHubの各種操作を直接実行できる拡張機能です。

🎯 できること

• リポジトリの検索・閲覧
• ファイルの作成・更新・削除
• ブランチ作成・切り替え
• プルリクエストの作成・マージ
• イシューの作成・管理
• コミット履歴の確認

導入手順（Windows環境）

前提条件

1. Node.js（v20以降）
2. Claude Code CLI
3. GitHubアカウントとPersonal Access Token
4. Git（ローカル環境）

ステップ1: Node.jsとClaude Code CLIのインストール

# Node.jsのバージョン確認
node --version

# Claude Code CLIのインストール
npm install -g @anthropic-ai/claude-code

# インストール確認
claude --version

ステップ2: GitHub Personal Access Tokenの作成

1. GitHub → Settings → Developer settings → Personal access tokens
2. "Generate new token (classic)"をクリック
3. 以下の権限を付与：
   • repo (Full control of private repositories)
   • workflow (Update GitHub Action workflows)

ステップ3: GitHub MCPサーバーの追加

推奨方法：環境変数を使用

1. システム環境変数を設定：

   • Windowsキー + R → "sysdm.cpl"
   • 詳細設定タブ → 環境変数
   • ユーザー環境変数に追加：
     • 変数名: GITHUB_PERSONAL_ACCESS_TOKEN
     • 変数値: ghp_あなたのトークン

2. MCPサーバーを追加：

claude mcp add github -s user -e GITHUB_PERSONAL_ACCESS_TOKEN=%GITHUB_PERSONAL_ACCESS_TOKEN% -- cmd /c npx -y @modelcontextprotocol/server-github

ステップ4: 動作確認

Claude Codeを起動し、/mcpコマンドで接続状況を確認：

/mcp

以下の表示が確認できればOK：

> 1. github  √ connected

使ってみる

簡単なシナリオでとりあえずGithubリポジトリ操作してみる。

🎬 シナリオ

英語で作成されたランディングページを日本語に翻訳し、さらにデザインを現代的なAIテクノロジー風に改善するといった例です。

ステップ1: リポジトリの確認

自然言語での指示:

GitHubのリポジトリ一覧を表示して

Claude Codeの応答:
116個のリポジトリが見つかり、一覧表示されました。特定のリポジトリ 20250712-LP を発見。

ステップ2: ファイル内容の確認

自然言語での指示:

20250712-LPというリポジトリがあると思うけど確認できる？

結果:

• リポジトリの存在確認
• index.htmlファイル（9,042バイト）の発見
• ランディングページプロジェクトであることを確認

ステップ3: 多言語化の実行

自然言語での指示:

このindex.htmlを日本語にして、pushしたい。

Claude Codeが自動実行したタスク:

1. ✅ HTMLファイルの読み込み
2. ✅ 英語→日本語への翻訳
3. ✅ 新しいブランチ japanese-translation の作成
4. ✅ 翻訳済みファイルのプッシュ
5. ✅ プルリクエストの作成

翻訳例:

<!-- Before -->
<title>AI Programming Learning Community</title>
<h1>Learn AI Development, Together</h1>

<!-- After -->
<title>AIプログラミング学習コミュニティ</title>
<h1>AI開発を、一緒に学ぼう</h1>

ステップ4: プルリクエストのマージ

自然言語での指示:

mainにマージして

結果:

• プルリクエスト #1 が自動マージ
• mainブランチに日本語版が反映

ステップ5: ローカル開発環境の構築

自然言語での指示:

mainブランチをローカルにクローンしたい。

実行されたコマンド:

git clone https://github.com/sinjorjob/20250712-LP.git
cd 20250712-LP
git status

ステップ6: デザイン改善ブランチの作成

自然言語での指示:

これから改修するので、改修用のブランチを作って。ブランチ名はベストプラクティスに沿った名称で。デザインレイアウトの改善です。

Claude Codeの判断:

• Git Flowのベストプラクティスに従い
• feature/design-layout-improvements ブランチを作成

ステップ7: 高度なデザイン改善

自然言語での指示:

LPの背景画像は消して、もっとおしゃれでAIテクノロジーっぽい背景画像のデザインにしたい。

Claude Codeが実装した改善:

1. 背景の完全リニューアル:

/* 静的画像から動的グラデーションへ */
background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #1a1a2e 100%);

2. 高度なアニメーション効果:

/* 浮遊パーティクル効果 */
@keyframes floating-particles {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-10px, -15px) scale(1.05); }
    100% { transform: translate(5px, -10px) scale(0.98); }
}

/* ニューラルネットワーク風パルス */
@keyframes neural-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

3. グラデーションテキスト効果:

.hero h1 {
    background: linear-gradient(135deg, #ffffff 0%, #50e3c2 50%, #4a90e2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: neural-pulse 3s ease-in-out infinite;
}

改善結果:

• ファイルサイズ: 9,450バイト → 12,199バイト（29%増加）
• モダンなAIテクノロジー感のあるデザインに進化

ステップ8: 変更履歴の管理

自然言語での指示:

変更前の状態がどんなんだったか確認したいです。

Claude Codeの対応:

# 変更前のindex.htmlを復元
git show 193cdea:index.html > before_index.html

比較可能な状態を提供:

• before_index.html: 変更前
• index.html: 変更後
• ブラウザで両方を開いて比較可能

これでもう、Gitリポジトリ操作は指示出しだけでOK。

参考リンク

• Claude Code 公式ドキュメント
• GitHub MCP サーバー
• Model Context Protocol (MCP)