Claude CodeとGitHub、組み合わせて使うと便利って聞いたんですけど、実際どう変わるんですか？
めちゃくちゃ変わる。僕はコピペ地獄→Projects連携→Claude Codeって3段階で進化してきたんだけど、今は指示を出すだけでコード編集からgit pushまで全部自動。開発のスピードが文字通り別次元になったよ
こんにちは！Renです！
AIでアプリ開発をしていると、「GitHubとの連携、もっと効率よくできないかな」と感じたことはありませんか？
一つでも当てはまる方は、この記事が役に立つはずです。
僕自身、アプリ開発を始めた当初はコードを全部コピーしてClaudeに貼り付ける「コピペ地獄」から始まりました。そこからClaude ProjectsでのGitHub連携を経て、最終的にClaude Codeに移行。開発のやり方が3段階で進化してきました。
この記事では、コピペ時代からClaude Code×GitHubに至るまでの進化の全過程を、実体験ベースで公開します。
・Claude×GitHubの3つの連携レベルの全体像
・コピペ地獄→Projects連携→Claude Codeの進化ストーリー
・Claude CodeでのGitHub操作の基本的な使い方
・CLAUDE.mdやClaude Code on the Webの活用方法
・GitHub Actionsとの連携の概要
Claude Code×GitHubでできること【3つのレベルで整理】
まず、ClaudeとGitHubの組み合わせ方を整理しておきます。
実は「Claude×GitHub連携」と一口に言っても、やり方が3段階あるんです。それぞれでできることも難易度もまったく違います。
| レベル | 方法 | 何ができるか | 向いている人 |
|---|---|---|---|
| Level 1 | Claude Projects × GitHub | コード参照・質問応答 | 対話型で開発している人 |
| Level 2 | Claude Code × GitHub | コード編集・git操作自動化 | 個人開発者・日常開発 |
| Level 3 | GitHub Actions × Claude Code | 自動レビュー・Issue→PR生成 | チーム開発・CI/CD |
3つもあるんですか。全部やらないとダメですか？
全然。自分のレベルに合ったところから始めればOK。僕もLevel 1から順番に進化してきたよ。この記事ではLevel 2を中心に、1との比較や3の概要もカバーしていくね
メイン: Level 2（Claude Code × GitHub）の使い方と実体験
補足: Level 1との違い、Level 3（GitHub Actions）の概要
ナレッジ管理目的でGitHubを使いたい方は、ClaudeとGitHub連携のメリットと使い方完全ガイド【ナレッジ管理を効率化】をご覧ください。
コピペ地獄からClaude Codeまで｜僕の開発フローの進化
ここからは、僕が実際に経験した3段階の進化を順番にお話しします。
最初に言っておくと、Phase 1のコピペ時代は本当に地獄でした。でもその地獄があったからこそ、Phase 2、Phase 3の便利さが身に染みて分かるんです。
Phase 1: コピペ時代（毎回全コードを貼り付けていた頃）
アプリ開発を始めた当初、僕のワークフローはこんな感じでした。
| Step1 | Xcodeでコードを書く |
| Step2 | 全コードを選択してコピー。ファイルが複数あると、それぞれコピー |
| Step3 | Claudeのチャット画面に貼り付け。長いコードだと貼り付けるだけで時間がかかる |
| Step4 | 「このコードに〇〇の機能を追加して」と指示 |
| Step5 | Claudeが生成したコードをまたXcodeに貼り付け |
| Step6 | 次の修正でまた最初から繰り返し… |
最初は数百行だったコードが、気づけば数千行に。コピペだけで5分以上かかるようになりました。
・コピペミスで一部のコードが欠ける
・古いバージョンを貼り付けてしまう
・1回のコピペに5〜10分かかることも
・複数ファイルがあると、どれをコピーしたか分からなくなる
1日に何回コピペしてるか数えたくなくなるレベルでした。しかもコードが長くなると貼り付けミスも増える。開発よりコピペに時間を使っている感覚でした。
Phase 2: Projects連携で「コピペゼロ」を実現
この状況を変えるために導入したのが、Claude ProjectsとGitHubの連携（Level 1）です。
GitHubリポジトリをClaude Projectsのナレッジとして接続すると、コピペ不要でClaudeが最新コードを参照できるようになります。
| 項目 | Phase 1 コピペ | Phase 2 Projects連携 |
|---|---|---|
| コピペ作業 | 毎回必要 | 不要 |
| 1回の指示時間 | 5〜10分 | 30秒 |
| Claudeの理解度 | 貼り付けたコードのみ | 全ファイル把握 |
| ミス発生率 | 高い | ほぼゼロ |
「LoginView.swiftに〇〇機能を追加して」と言うだけで、最新のコードを元に修正してくれる。コピペ地獄から一気に解放されました。
ただし、ここで一つ制約がありました。
コピペ地獄からは解放されたけど、結局Claudeが提案したコードを自分でコピーしてエディタに貼り付ける作業は残ってたんだよね。Claudeは「読める」けど「書き込めない」。あくまで提案までが役割だった
この「読めるけど書けない」制約を完全に突破してくれたのが、次のPhaseです。
Phase 3: Claude Codeで「AIが直接コードを書く」時代へ
Claude Codeの登場で、開発フローがまったく変わりました。
Claude Codeは、ターミナル上で動くAI開発ツールです。最大の特徴は、AIがファイルシステムに直接アクセスしてコードを編集し、git commit/pushまで自動実行してくれること。
つまり、もうコピペどころか、「コードを貼り付ける」という概念自体がなくなったんです。
| 項目 | Phase 1 コピペ | Phase 2 Projects連携 | Phase 3 Claude Code |
|---|---|---|---|
| コピペ作業 | 毎回必要 | 不要（参照のみ） | 不要（直接編集） |
| Claudeの役割 | コード提案のみ | コード参照+提案 | コード編集+git操作 |
| 1回の指示→反映 | 5〜10分 | 1〜2分 | 数秒〜数十秒 |
| git操作 | 手動 | 手動 | 自動（commit/push） |
僕が開発したSaaS「MyBlog AI」の開発途中でClaude Codeに移行しました。移行後は「指示→Claudeがコード編集→確認→次の指示」のサイクルが圧倒的に速くなり、開発のリズムそのものが変わりました。
MyBlog AIの開発をClaude Codeに移行したとき、「なんで最初からこうしなかったんだ」って本気で思った。Projects連携で十分快適だと思ってたけど、全然レベルが違ったよ
Claude CodeでのGitHub開発【基本の使い方】
ここからは、Claude Code × GitHubの具体的な使い方を解説していきます。
Claude Codeのセットアップ（概要）
Claude Codeのインストールはターミナルからコマンド1つで完了します。
・Node.js 18以上がインストールされていること
・Claude Pro / Max / Teamプランに加入していること
・ターミナル操作の基礎知識があること（cd、lsなど）
インストールは npm install -g @anthropic-ai/claude-code を実行するだけ。詳しいセットアップ手順や初期設定のコツは、Claude Codeの使い方をゼロから解説｜動かしながら覚える最短ルートで詳しく解説しています。
GitHubリポジトリでClaude Codeを起動する
セットアップが完了したら、実際にGitHubリポジトリの中でClaude Codeを使ってみましょう。
| Step1 | ターミナルでGitHubリポジトリのディレクトリに移動（例: cd ~/projects/my-app） |
| Step2 | claude コマンドを実行してClaude Codeを起動 |
| Step3 | Claude Codeがプロジェクト構造を自動認識。ファイル構成やpackage.jsonなどを読み取ってくれる |
| Step4 | 自然言語で指示を出す（例: 「LoginViewにメールアドレスのバリデーション機能を追加して」） |
ポイントは、Gitで管理されているディレクトリ内で起動すること。Claude Codeはカレントディレクトリを作業対象として認識するので、リポジトリのルートで起動するのがおすすめです。
起動すると、Claude Codeがプロジェクトの全体構造を把握した上で対話が始まります。「どのファイルにどんなコードがあるか」を最初から理解してくれているので、いちいち説明する必要がありません。
git操作の自動化: commit/pushまでClaudeに任せる
Claude Codeの最大の魅力がここです。
コードの編集が完了すると、Claude Codeはgit add → commit → pushまでを自動実行してくれます。ユーザーは「y」で承認するだけ。
コミットメッセージもClaudeが書いてくれるんですか？
そう、しかもちゃんと変更内容に合った具体的なメッセージを書いてくれる。「update」みたいな曖昧なメッセージにならないのが地味にありがたいんだよね
・commit/push自動化: コード編集後に自動でGitHubに反映
・コミットメッセージ自動生成: 変更内容に合った具体的なメッセージ
・ブランチ操作: feature作成・切り替えも自然言語で指示可能
・コンフリクト解消: マージ時の衝突もClaudeが解決策を提案
実行前には「〇〇を実行してよいですか？」と必ず確認してくれるので、知らないうちに変なcommitが飛ぶ心配もありません。安全に使えるのが嬉しいポイントです。
CLAUDE.mdでGitHub開発の品質を上げる
Claude Code × GitHubの開発をさらに効率化するために、ぜひ活用してほしいのがCLAUDE.mdです。
Claude Codeがプロジェクトの「ルールブック」として最初に読むファイルです。コーディング規約、使用技術、禁止事項などを記載しておくと、Claude Codeがそのルールに従ってコードを書いてくれます。
CLAUDE.mdをGitHubリポジトリのルートに置いておけば、Claude Codeを起動するたびに自動で読み込まれます。
MyBlog AIの開発では、CLAUDE.mdにReactのコンポーネント設計ルールやAWS Lambdaの制約を書いてる。これがないとClaudeが毎回違うスタイルでコードを書いてきて、統一感がなくなって大変だったんだ
・プロジェクト概要: 何を作っているか、ディレクトリ構成
・技術スタック: 使用言語・フレームワーク・インフラ
・コーディングルール: 命名規則、ファイル構成のルール
・テスト方針: テストの書き方や実行コマンド
CLAUDE.mdを丁寧に書いたら、Claude Codeの出力品質が目に見えて安定しました。毎回「ここはこうして」と説明し直す手間がなくなるので、開発速度と品質が同時に上がります。
CLAUDE.mdの詳しい書き方やテンプレートは、CLAUDE.mdの書き方完全ガイド｜Claude Codeの出力品質が変わるプロジェクト設定ファイル入門で解説しています。
Claude Code on the Web: ブラウザだけでGitHub開発
ターミナルを使うのはちょっとハードル高いんですが…
そういう人にはClaude Code on the Webがおすすめ。ブラウザだけでGitHubリポジトリを操作できるから、ターミナル不要で始められるよ
Claude Code on the Webは、claude.ai/codeからアクセスできるブラウザ版のClaude Codeです。GitHubアカウントを連携するだけで、リポジトリを選んで指示を出すだけ。
ターミナル版と同じようにコード編集やgit操作を自動でやってくれます。
| 項目 | ターミナル版 | Web版 |
|---|---|---|
| 環境 | ローカルPC | ブラウザ |
| セットアップ | npm install必要 | 不要（GitHub連携のみ） |
| 操作感 | コマンドライン | チャットUI |
| 向いている場面 | 本格開発・長時間作業 | 外出先・軽い修正・レビュー |
・Claude Pro、Max、Team、またはEnterpriseプランに加入していること
・GitHubアカウントをclaude.ai/codeで連携済みであること
僕は普段はターミナル版を使っていますが、外出先でちょっとした修正をしたいときにWeb版が重宝しています。iPadからでも開発できるのは想像以上に便利です。
さらに、ターミナルで作業中のセッションをWeb版に引き継ぐ機能もあります。ターミナルで & を入力するとバックグラウンドに送れるので、PCを閉じても作業が続行されます。
GitHub Actionsとの連携【チーム開発向け】
最後に、Level 3のGitHub Actionsとの連携についても触れておきます。
GitHub ActionsにClaude Codeを組み込むと、PRやIssueに@claudeとメンションするだけで、AIが自動でコードレビューや機能実装を行ってくれます。
・PRの自動コードレビュー: PRが作成されるたびにClaudeが品質チェック
・Issue→PR自動生成: Issueに@claudeとメンションすると、機能実装してPRを作成
・コーディング規約チェック: CLAUDE.mdのルールに基づいて自動チェック
ただし、セットアップにはAPIキーの設定やYAMLファイルの作成など、ある程度の技術的な知識が必要です。
GitHub Actionsの連携はチーム開発で真価を発揮します。個人開発の規模なら、まずはLevel 2のClaude Codeで十分。プロジェクトが大きくなったり、複数人で開発するようになったら検討すれば遅くありません。
僕もMyBlog AIではまだGitHub Actionsは使ってない。個人開発の規模ならClaude Codeで直接操作する方が速いし楽だよ
実際の運用で気づいた注意点
Phase 1〜3を経験してきた中で、「これは最初から知っておきたかった」という注意点をまとめておきます。
Personal Access Tokenの管理
Projects連携（Level 1）でPATを使う場合、トークンの管理は本当に慎重にしてください。
・トークンは生成後に一度しか表示されない。生成したら即コピーして安全な場所に保存
・絶対に他人に見せない（GitHubのIssueやコメント欄に貼り付けない）
・有効期限が切れたら再発行が必要
・万が一漏洩したら即座に削除して再発行
ちなみにClaude Code on the Webの場合はOAuth認証なので、PATの管理は不要です。これもWeb版の地味なメリットの一つですね。
コミットメッセージの確認
Claude Codeがコミットメッセージを自動生成してくれるのは便利ですが、必ず内容を確認してから承認してください。
・「修正」「update」「fix」
✅ OK例（Claude Codeの自動生成例）:
・「feat: LoginViewにメールアドレスバリデーションを追加」
・「fix: API呼び出し時のタイムアウトエラーを修正」
・「refactor: UserServiceのデータ取得ロジックを共通化」
Claude Codeは基本的に具体的なメッセージを書いてくれますが、たまに曖昧になることもあります。その場合は「もっと具体的なコミットメッセージにして」と指示すれば書き直してくれます。
こまめなcommit/push
Claude Code時代になっても、こまめにcommit/pushする習慣は重要です。
・1つの機能を追加したらcommit
・1日の終わりに必ずpush
・大きな変更の前にはcommitしてセーブポイントを作る
Claude Codeならcommit/pushも自動でやってくれるので、指示の区切りごとに自然とcommitされていきます。手動時代よりもこまめに記録が残るのは嬉しい変化です。
.gitignoreの設定
プロジェクトには、GitHubにアップロードする必要がないファイル（ビルド生成物やキャッシュ、環境変数ファイルなど）が含まれています。
プロジェクトの言語やフレームワークに合った.gitignoreを設定しましょう。GitHubの公式テンプレートを使うのが確実です。特に.envファイル（APIキーなどの環境変数）は絶対にGitHubにアップロードしないように注意してください。
まとめ: Claude Code×GitHubで開発がどう変わったか
コピペ時代から考えると、信じられないくらい進化してますね…！
本当にそう。大事なのは一気に全部やろうとしないこと。まずは自分の今のレベルに合った方法から始めて、慣れたら次のPhaseに進めばいい
・Level 1（Projects連携）: コピペ不要でClaudeがコードを参照。対話型で開発している人はここから
・Level 2（Claude Code）: コード編集からgit操作まで自動化。個人開発者に最もおすすめ
・Level 3（GitHub Actions）: 自動レビュー・Issue→PR生成。チーム開発向け
・CLAUDE.mdを活用すれば、Claude Codeの出力品質が安定する
・Claude Code on the Webならターミナル不要でブラウザから開発可能
・まずはLevel 2のClaude Codeから始めるのがおすすめ
アプリ開発の全体像については、【2026年版】Claudeでアプリ開発する方法｜対話型〜Claude Codeまで完全ガイドで詳しく解説しています。
Claude Codeの始め方やインストール手順は、Claude Codeの使い方をゼロから解説｜動かしながら覚える最短ルートをチェックしてみてください。
CLAUDE.mdの書き方やテンプレートは、CLAUDE.mdの書き方完全ガイド｜Claude Codeの出力品質が変わるプロジェクト設定ファイル入門で解説しています。
また、ナレッジ管理の目的でClaude ProjectsとGitHubを連携したい方は、ClaudeとGitHub連携のメリットと使い方完全ガイド【ナレッジ管理を効率化】も参考にしてみてください。
Claude Code×GitHub、一度体験したら戻れなくなるよ。ぜひ試してみて！
ではまた！
コメント