【初心者向け】VS CodeとGitHubを連携！開発効率を爆上げしよう

開発環境の構築に時間を取られていませんか？

GitHub Codespacesを使えば、ブラウザだけで即座に開発を始められます。

本記事では、現役クラウドエンジニアとしてAzure・AWSのインフラ運用を行い、AZ-104およびAWS SAP認定を保有する筆者が、

GitHub Codespacesの仕組みとメリット、活用方法を初心者にもわかりやすく解説します。PythonやTypeScriptでのアプリ開発経験も活かし、実践的な視点で導入のポイントをお伝えします。

事前準備

VS CodeとGitHubの連携を始める前に、いくつか準備が必要です。

まずは、GitHubのアカウントが必要です。無料で作成できますので、まだお持ちでない方は、こちらのリンクからアカウントを作成しておきましょう。

VS Code本体と、バージョン管理システムであるGitがインストールされていることを確認してください。

Gitは、コマンドプロンプト（Windows）またはターミナル（Mac）から操作できるようになっている必要があります。

git --version

このコマンドをターミナルで実行して、バージョンが表示されればインストール済みです。

まだインストールされていない場合は、こちらからインストールしてください。

VS CodeとGitHubを連携させるために、まずはVS Codeの拡張機能をインストールしましょう。

VS Codeを開く
VS Codeの左側にある**拡張機能アイコン（🧩）**をクリックします。
検索欄に「GitHub Pull Requests and Issues」と入力し、検索結果に表示されたものをインストールします。
GitHub Pull Requests and Issuesは、GitHub公式の拡張機能なので、安心して利用できます。

拡張機能のインストールが終わったら、VS CodeからGitHubにサインインして認証を行います。これにより、VS CodeからあなたのGitHubアカウントにアクセスできるようになります。

キーボードショートカットでコマンドパレットが開きます。

Mac: Cmd + Shift + P
Windows: Ctrl + Shift + P

コマンドパレットに「GitHub: Sign in」と入力し、Enterキーを押します。

VS Codeに「GitHub.com にサインインしますか？」というメッセージが表示されるので、「はい」をクリックします。

自動的にブラウザが開き、GitHubのログイン画面が表示されます。

指示に従ってGitHubにログインし、「VS Code との接続を許可」をクリックして認証を許可してください。

認証が成功すると、「Success! You can close this tab」というメッセージが表示されるので、ブラウザのタブを閉じます。

VS Codeの左下にあるアイコンマークをクリックし、自分のGitHubアカウント名が表示されていればサインイン成功です。

これで、VS CodeとGitHubの連携の準備が整いました！

この記事では、VS CodeとGitHubを連携させるための事前準備から、GitHub拡張機能のインストール、そしてGitHubへのサインイン（認証）までを解説しました。

これであなたはVS CodeからGitHubの様々な機能を利用できるようになります。プルリクエストの作成やレビュー、Issueの管理などがVS Code上で完結し、開発フローがよりスムーズになるでしょう。

今後は、この連携を活かして、VS Codeからリポジトリをクローンしたり、変更をプッシュしたりする方法を学んでいくことで、より効率的な開発が可能になります。