Visual Studio Code で JavaScript 開発用の GitHub リポジトリを管理する

Visual Studio Code は、JavaScript 開発者向けの包括的な Git と GitHub の統合を提供します。このガイドでは、開発環境から直接 GitHub リポジトリを管理し、コードの作成からデプロイまでのワークフローを合理化する方法について説明します。

VS Code を離れることなく、既存のリポジトリを開く、新しいプロジェクトを初期化する、機能ブランチを作成する、変更をコミットする、GitHub にプッシュする方法について説明します。このガイドでは、アクティビティバー、コマンドパレット、ステータスバー、統合ターミナルなど、各タスクの複数のアプローチについて説明しているため、開発スタイルに最適な方法を選択できます。

[前提条件]

ローカルコンピューターにインストールされている Git
Visual Studio Code がインストールされている
GitHub アカウント

リモートリポジトリを開く

ローカルコンピューターでリモートリポジトリを開きます。

リモートリポジトリ拡張機能をインストールする
Visual Studio Code の左下にあるリモートインジケーターを選択します。
画面の指示に従います。

Ctrl + Shift + P のキーの組み合わせを使用してコマンドパレットを開きます。
コマンドパレットプロンプトで、gitcl を入力し、[Git: Clone] コマンドを選択し、[GitHub からクローンする] を選択して Enter キーを押します。
リポジトリ URL の入力を求められたら、[clone from GitHub]$GitHub から複製$ を選択し、Enter キーを押します。
GitHub にサインインするように求められたら、サインインプロセスを実行します。
[リポジトリの URL] フィールドに「azure-samples/js-e2e-express-server」と入力します。
プロジェクトのクローン先となるローカルディレクトリを選択 (または作成) し、[リポジトリの宛先として選択する] を選択します。
複製されたリポジトリを開くかどうか尋ねる通知が表示されたら、[開く] を選択します。

[ターミナル] -> [新しいターミナル] から統合ターミナルを開きます。
次の git コマンドを使用してリポジトリを複製します。
```
git clone https://github.com/<ACCOUNT>/<REPOSITORY>
```
Visual Studio Code で開きます。
```
code <REPOSITORY>
```

Visual Studio Code では、オペレーティングシステムによって提供される Git 認証 (macOS KeyChain や Windows 資格情報マネージャーなど) を、Git の機能全般で使用します。出力はコマンドパレット > Git: Git 出力が表示されます。

カスタム GitHub ドメインに接続する

既定では、Visual Studio Code はリポジトリが github.comでホストされていることを前提としています。別のドメイン (たとえば、github.<company_name>.comなどのエンタープライズ GitHub) 上のリポジトリに接続する必要がある場合は、それに応じて Git パスを構成する必要があります。

VS Code で Git パスを更新するには、ファイル → Preferences → Settings を開き、Git: Pathを検索します。この設定では、カスタム GitHub ドメインで動作する Git 実行可能ファイルへの絶対パスを指定できます。

Git パスの Visual Studio Code 設定検索バーのスクリーンショット。

または、git.path ファイルに settings.json 設定を直接追加または更新して、VS Code がすべてのリポジトリ操作に正しい Git バイナリを使用するようにすることもできます。

ローカルリポジトリを開く

ローカルコンピューターに既存のリポジトリがあり、それを Visual Studio Code で開く場合は、フォルダーを開くだけです。 Visual Studio Code は、.git サブフォルダーを認識し、関連情報を表示します。

Ctrl キーを押してKを押してOを押します。
フォルダーを選択します。

[ターミナル] -> [新しいターミナル] から統合ターミナルを開きます。
リポジトリディレクトリの Visual Studio Code の新しいインスタンスを開きます。
```
code ../dir1/dir2/my-repo
```

新しいリポジトリの初期化

次の手順を使用して、ローカルソースコードリポジトリを git作成します。

アクティビティバーから [ソース管理] を選択するか、Ctrl + Shift + G のキーの組み合わせを使用します。
[リポジトリの初期化] を選びます。

[ターミナル] -> [新しいターミナル] から統合ターミナルを開きます。
次の git コマンドを使用して、git を使用してフォルダーを初期化します。
```
git init
```

リポジトリが初期化されたら、 GitHub でリポジトリを作成します。次に、コマンドパレットからGit: Add remoteを検索し、そのリポジトリをリモートとしてローカルプロジェクトに追加します。

変更の分岐を作成する

新しいブランチを作成して変更をキャプチャし、メインまたは既定のブランチから分離します。

アクティビティバーから [ソース管理] を選択します。
[ソース管理] の横にある省略記号 (...) を選択します。
[ブランチ] ->[ブランチの作成] を選択します。

Ctrl + Shift + P のキーの組み合わせを使用してコマンドパレットを開きます。
git branch を検索して、Git: Create Branch を選択します。

$Git ブランチの検索のスクリーンショット。[Git Create Branch]$Git ブランチの作成$ を選択します。$
testなど、新しいブランチ名を入力します。
ブランチ名はステータスバーに表示されます。

[ターミナル] -> [新しいターミナル] から統合ターミナルを開きます。
次の git コマンドを使用して、MY-BRANCH という名前の新しいブランチを作成します。
```
git checkout -b MY-BRANCH
```

変更をローカルにコミットする

ブランチ上のファイルに変更を加えたら、変更をコミットします。

アクティビティバーから [ソース管理] を選択します。
コミットメッセージを入力し、[コミット] を選択します。

[ターミナル] -> [新しいターミナル] から統合ターミナルを開きます。
次の git コマンドを使用して、MY-BRANCH という名前の新しいブランチを作成します。
```
git commit -m "YOUR COMMIT MESSAGE"
```

ローカルブランチを GitHub にプッシュする

アクティビティバーからソース管理アイコンを選択します。
ブランチを公開 を選択します。リポジトリが GitHub に存在しない場合は、リポジトリは自動的に作成されます。

[ターミナル] -> [新しいターミナル] から統合ターミナルを開きます。
次の git コマンドを使用して、MY-BRANCH という名前の新しいブランチを作成します。
```
git push <remote-name> <branch-name>
```

Git 出力の表示

ソース管理拡張機能を使用すると、Git コマンドの出力を表示できます。この出力は、コマンドが失敗したときにデバッグするのに役立ちます。

アクティビティバーからソース管理アイコンを選択します。
省略記号 (...) を選択し、[Git 出力の表示] を選択します。

Git と GitHub を使用するための Visual Studio Code ツール

リポジトリを使用した Visual Studio Code での作業には、個別のツールを使用します。

アイコン	情報	アクセス元
	コマンドパレットの Git コマンド	`F1`
	ソース管理の拡張機能	アクティビティバー
	GitHub の Pull Request と Issue の拡張機能	アクティビティバー
	GitHub リポジトリ拡張機能	コマンドパレット (`F1`) から「GitHub Repositories: Open Repository...」を検索することで、またはリモートインジケーター (ステータスバーの左隅下にある緑色のボタン) から [Open GitHub Repository...]$GitHub リポジトリを開く...$ を選択することで、GitHub リポジトリを素早く簡単に開くことができます。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-11-03

次の方法で共有