VS Codeのインストールと、Claude Code・GitHub連携の使い方

記事

IT・テクノロジー

Bitz 村上幸雄

2026/07/17 19:46

エディタ「Visual Studio Code（VS Code）」のインストール手順と、これまで紹介したClaude CodeおよびGitHub CLIをVS Code上でどう使うかをまとめたリファレンスです。

前回・前々回の記事で、Claude Codeのインストール、GitHubの契約とghコマンドのインストールを紹介しました。今回はそれらを統合して使うエディタ環境の話です。

VS Codeについて

VS CodeはMicrosoftが開発する無料・オープンソース（MIT License）のコードエディタです。契約やライセンス登録は不要で、ダウンロードしてすぐに使い始められます。拡張機能（Extensions）を追加することで、言語サポートやAIアシスタント、Git連携などの機能を柔軟に拡張できます。

インストール

macOS

公式サイトから.dmgをダウンロードする方法と、Homebrewを使う方法があります。Homebrewの場合は「brew install --cask visual-studio-code」でインストールできます。Homebrewを使わない場合は、公式サイト（code.visualstudio.com/download）からApple Silicon / Intel / Universalの.dmgをダウンロードし、Applicationsフォルダにドラッグします。

Windows

公式インストーラー（ユーザー向け/システム向け、x64/Arm64）をダウンロードする方法と、WinGetを使う方法があります。WinGetの場合は「winget install --id Microsoft.VisualStudioCode -e --source winget」でインストールできます。インストーラー版は公式サイト（code.visualstudio.com/download）から入手できます。ユーザーインストーラーは管理者権限不要で、システムインストーラーは全ユーザー向けに管理者権限でインストールします。

Linux

Debian/Ubuntu系は.debパッケージ（sudo apt install ./code_バージョン_amd64.deb）、その他は.rpmやSnap Store（sudo snap install code --classic）が利用できます。

codeコマンドの有効化（macOS）

WindowsとLinuxのインストーラーはインストール時にターミナルの「code」コマンドを自動的に有効化しますが、macOSの.dmgからのインストールでは手動で有効化する必要があります（Homebrew版は自動で有効化されます）。

VS Codeを起動し、コマンドパレットを開いて（Cmd+Shift+P）「Shell Command: Install 'code' command in PATH」を実行し、ターミナルを開き直します。有効化されると、任意のディレクトリで「code .」と入力するだけでそのディレクトリをVS Codeで開けるようになります。

Claude Codeとの連携

前回・前々回の記事で紹介したClaude CodeはVS Code拡張機能としても提供されており、チャットパネル形式のグラフィカルなインターフェースで利用できます。

インストール

VS Code内の拡張機能ビュー（Cmd+Shift+X / Ctrl+Shift+X）で「Claude Code」を検索し、Installをクリックします。前提条件は、VS Code 1.98.0以降であること、そしてClaude Pro / Max / Team / Enterprise のいずれか、またはClaude Consoleアカウント（APIキーは不要）を持っていることです。

拡張機能とCLIの違い

拡張機能にはチャットパネル用のCLIが内蔵されていますが、これは統合ターミナルで「claude」コマンドを直接実行できるようにするものではありません。ターミナルで「claude」を使いたい場合は、前回紹介したスタンドアロン版CLIを別途インストールする必要があります。両者の違いは次の通りです。

・コマンド・スキル：CLIはすべて利用可能。VS Code拡張機能は一部（「/」で確認可能）

・MCPサーバー設定：CLIは可能。VS Code拡張機能は一部（CLI側で追加、チャットパネルの「/mcp」で管理）

・チェックポイント（巻き戻し）：CLI・VS Code拡張機能ともに対応

・「!」によるbashショートカット：CLIは対応。VS Code拡張機能は非対応

基本操作

エディタでファイルを開くと、右上のツールバーに✱（Sparkアイコン）が表示されます。クリックするとチャットパネルが開きます。初回起動時にサインイン画面が表示されるので、Sign inをクリックしてブラウザで認証します。プロンプトを送信すると、選択中のコードを自動的にコンテキストとして認識します。「＠ファイル名」でファイルを明示的に参照できます（実際の入力時は半角の＠記号を使います）。変更を提案する際は差分（diff）が表示され、承認・却下・修正指示を選べます。

統合ターミナルで「claude」を実行している場合は、「/ide」コマンドでVS Codeと接続すると、diff表示や診断情報の共有などIDE連携機能が使えるようになります。

GitHubとの連携

VS Codeは標準でGitのSource Control機能を内蔵しているため、前回インストールした「git」があれば、コミット・ブランチ操作・差分確認がGUIで行えます。GitHub固有の機能（PR・Issue管理）は拡張機能で追加します。

GitHub Pull Requests and Issues拡張機能

拡張機能ビューで「GitHub Pull Requests and Issues」を検索してインストールします（発行元：GitHub）。インストール後、アクティビティバーに追加されるGitHubアイコンからSign inを実行し、ブラウザでGitHubアカウントを認証します。これにより、VS Code上でプルリクエストの作成・レビュー・コメント・Issue管理が完結します。

統合ターミナルでghコマンドを使う

拡張機能を入れなくても、統合ターミナル（Ctrl+`/Cmd+`）で前回紹介した「gh」コマンドをそのまま利用できます（例：gh pr create --fill、gh pr view --web）。

Claude CodeからGitHubを操作する

Claude Codeにはgit操作の自然言語インターフェースがあり、「変更内容をわかりやすいメッセージでコミットして」「この機能のPRを作成して」のように依頼できます。より高度な連携として、GitHubのリモートMCPサーバーをClaude Codeに追加すると、PRのレビューやIssueの参照をClaude経由で行えるようになります。