VSCode（Visual Studio Code）では、画面上の操作だけでGitブランチを作成できます。
また、VSCode内蔵のターミナルからGitコマンドを使ってブランチを作成することも可能です。
Gitブランチを活用すると、現在のコードに直接影響を与えずに、新機能の追加やバグ修正などを分けて進めやすくなります。
ここでは、VSCodeでGitブランチを作成する方法を、GUI操作とコマンド操作の両方から詳しく解説します。
Gitブランチとは
Gitのブランチとは、特定のコミットを指す参照です。
開発作業を分岐させることで、複数の作業を並行して進めやすくなります。
たとえば、mainブランチを基準にログイン機能を開発する場合は、次のように専用ブランチを作成できます。
main
└─ feature/login
feature/loginで行ったコミットは、マージなどを実行しない限りmainブランチには取り込まれません。
そのため、本番用のコードと開発中のコードを分けて管理しやすくなります。
Gitブランチを使うメリット
Gitブランチを利用すると、機能追加やバグ修正などを目的ごとに分けて作業できます。
たとえば、次のように管理できます。
main
├─ feature/login
├─ feature/contact-form
└─ bugfix/header-layout
複数の変更内容が混ざりにくくなるため、Gitを利用したチーム開発では特に重要な仕組みです。
VSCodeでGitブランチを作成する前の準備
VSCodeでGitブランチを作成するには、対象のフォルダがGitリポジトリになっている必要があります。
また、VSCodeで通常のGit操作を行うには、PCにGitがインストールされている必要があります。
Gitがインストールされているか確認する
VSCodeのターミナルを開き、次のコマンドを実行します。
git --version
Gitが正しくインストールされている場合は、次のようにバージョン情報が表示されます。
git version 2.x.x
Gitが認識されない場合は、Gitをインストールするか、PATH設定を確認する必要があります。
Gitリポジトリか確認する
対象フォルダで、次のコマンドを実行します。
git status
Gitリポジトリであれば、現在のブランチやファイルの変更状況が表示されます。
まだGitリポジトリになっていない場合は、次のコマンドで初期化できます。
git init
VSCodeの「ソース管理」画面から「Initialize Repository」を選択して初期化することも可能です。
初回コミットを作成しておく
git initを実行した直後は、まだコミットが存在しない状態です。
通常のブランチ操作を分かりやすく行うためには、まず初回コミットを作成しておくとよいでしょう。
git add .
git commit -m "Initial commit"
初回コミットが作成されると、そのコミットを起点として新しいブランチを作成できます。
VSCodeのステータスバーからGitブランチを作成する方法
VSCodeで最も簡単にブランチを作成する方法の一つが、画面下部のステータスバーを利用する方法です。
現在のブランチ名をクリックする
GitリポジトリをVSCodeで開くと、画面下部のステータスバーに現在のブランチ名が表示されます。
たとえば、次のような名前が表示されます。
main
または、
master
表示されているブランチ名をクリックします。
新しいブランチを作成する
ブランチに関するメニューが表示されたら、新しいブランチを作成する項目を選択します。
VSCodeのバージョンや表示言語によって名称が多少異なる場合がありますが、「Create Branch」や「Create new branch」などの項目を選択します。
ブランチ名を入力する
作成したいブランチ名を入力します。
たとえば、ログイン機能を開発する場合は次のような名前にできます。
feature/login
ほかにも、次のような名前が考えられます。
feature/contact-form
bugfix/header
hotfix/security
ただし、feature/やbugfix/といった接頭辞はGitの必須ルールではありません。
プロジェクトやチームで命名規則が決められている場合は、そのルールを優先してください。
作成元のブランチを選択する
ブランチ作成時には、どのブランチやコミットを起点として作成するか選択できます。
一般的には、次のようなブランチを起点にします。
main
または、
develop
新しいブランチを作成すると、VSCodeはそのブランチへ切り替わります。
コマンドパレットからGitブランチを作成する方法
VSCodeのコマンドパレットを使ってGitブランチを作成することもできます。
キーボード操作を中心にVSCodeを使いたい場合に便利です。
コマンドパレットを開く
WindowsやLinuxでは、次のショートカットを使用します。
Ctrl + Shift + P
macOSでは、次のショートカットです。
Command + Shift + P
Git: Create Branchを実行する
コマンドパレットを開いたら、次の項目を検索します。
Git: Create Branch
表示されたコマンドを選択します。
ブランチ名を入力する
作成したいブランチ名を入力します。
たとえば、次のように入力します。
feature/user-registration
必要に応じて作成元のブランチを選択すると、新しいブランチが作成され、そのブランチへ切り替わります。
VSCodeのターミナルからGitブランチを作成する方法
VSCodeでは、内蔵ターミナルから通常のGitコマンドを利用できます。
Gitコマンドに慣れている場合は、ターミナルから操作する方法も便利です。
現在のブランチを確認する
まず、次のコマンドを実行します。
git branch
たとえば、次のように表示されます。
* main
*が付いているブランチが、現在使用しているブランチです。
git switch -cで新しいブランチを作成する
新しいブランチを作成して、そのブランチへ切り替える場合は次のコマンドを使用できます。
git switch -c ブランチ名
たとえば、次のように実行します。
git switch -c feature/login
このコマンドを実行すると、feature/loginブランチが作成され、そのブランチへ切り替わります。
git checkout -bでも作成できる
従来から使われているgit checkoutを利用する方法もあります。
git checkout -b feature/login
このコマンドでも、新しいブランチを作成してそのブランチへ切り替えられます。
現在はブランチ切り替え専用のgit switchが用意されているため、初心者にはgit switch -cのほうが用途を理解しやすいでしょう。
特定のブランチから新しいブランチを作成する方法
現在のブランチではなく、特定のブランチを起点として新しいブランチを作成することも可能です。
たとえば、developブランチからfeature/loginを作成したい場合は、次のコマンドを実行します。
git switch -c feature/login develop
イメージとしては次のようになります。
main
develop
└─ feature/login
GUIから作成する場合も、VSCodeで作成元のブランチを選択できます。
作成したGitブランチを確認する方法
新しいブランチを作成したら、正しく作成されているか確認しておくと安心です。
ステータスバーで確認する
VSCode画面下部のステータスバーを確認します。
次のように新しいブランチ名が表示されていれば、そのブランチへ切り替わっています。
feature/login
git branchで確認する
ターミナルから確認する場合は、次のコマンドを実行します。
git branch
たとえば、次のように表示されます。
main
* feature/login
*が付いているfeature/loginが現在のブランチです。
現在のブランチ名だけを確認したい場合は、次のコマンドも利用できます。
git branch --show-current
作成したブランチをリモートリポジトリへ公開する方法
VSCodeで作成したブランチは、基本的にローカルブランチとして作成されます。
GitHubやGitLabなどのリモートリポジトリには、自動的に作成されるわけではありません。
VSCodeのPublish Branchを使う
GitHubなどのリモートリポジトリが設定されている場合は、VSCodeの「Publish Branch」を利用できます。
Publish Branchを実行すると、現在のローカルブランチをリモートリポジトリへ公開できます。
Gitコマンドでプッシュする
ターミナルから公開する場合は、次のように実行します。
git push -u origin feature/login
-uオプションを付けると、ローカルブランチとリモートブランチの追跡関係を設定できます。
一度設定すれば、その後は通常、次のコマンドだけでプッシュできます。
git push
VSCodeでGitブランチを切り替える方法
作成済みの別ブランチへ移動したい場合も、ステータスバーのブランチ名から切り替えられます。
たとえば、
feature/login
から、
main
へ切り替えることができます。
ターミナルから切り替える
ターミナルを使う場合は、次のコマンドを実行します。
git switch main
従来のgit checkoutを使う場合は次のようになります。
git checkout main
参考サイト
VSCodeでGitのブランチを切り替える方法【画像付きで解説】
未コミットの変更がある場合の注意点
ブランチを切り替える際に、未コミットの変更が残っている場合があります。
未コミットの変更があるからといって、必ずブランチを切り替えられないわけではありません。
切り替え先と変更内容が競合しない場合は、そのまま切り替えられることがあります。
一方で、ブランチを切り替えることによってローカル変更が失われる可能性がある場合などは、Gitが切り替えを拒否することがあります。
コミットしてから切り替える
作業内容を保存して問題ない場合は、コミットしてからブランチを切り替える方法があります。
git add .
git commit -m "Save current work"
git switch main
stashで一時的に退避する
まだコミットしたくない変更がある場合は、stashを利用できます。
git stash
その後、ブランチを切り替えます。
git switch main
元のブランチへ戻ったあと、次のコマンドで変更を復元できます。
git stash pop
作業内容に応じて、コミットまたはstashを使い分けるとよいでしょう。
VSCodeでGitブランチを作成できない場合の原因
VSCodeでブランチを作成できない場合は、Gitの設定やリポジトリの状態を確認してください。
Gitリポジトリになっていない
次のコマンドを実行します。
git status
Gitリポジトリではないと表示された場合は、次のコマンドで初期化します。
git init
Gitがインストールされていない
次のコマンドで確認します。
git --version
バージョン情報が表示されない場合は、Gitがインストールされていないか、PATHが正しく設定されていない可能性があります。
初回コミットがまだ存在しない
git init直後など、まだ一度もコミットしていない場合は、まず初回コミットを作成すると分かりやすいでしょう。
git add .
git commit -m "Initial commit"
その後、次のように新しいブランチを作成します。
git switch -c feature/login
Gitブランチ名の付け方
ブランチ名は、作業内容が分かる名前にすると管理しやすくなります。
機能追加の場合
feature/login
feature/user-registration
feature/contact-form
バグ修正の場合
bugfix/login-error
bugfix/header-layout
緊急修正の場合
hotfix/security-fix
これらはあくまで一般的な命名例です。
Git自体がfeature/やbugfix/といった名前を必須としているわけではありません。
チームやプロジェクトに命名ルールがある場合は、そのルールに従ってください。
VSCodeでGitブランチを作成する基本的な流れ
VSCodeのGUIを利用する場合は、次の流れでGitブランチを作成できます。
GitリポジトリをVSCodeで開く
↓
画面下部のブランチ名をクリック
↓
Create Branchを選択
↓
新しいブランチ名を入力
↓
必要に応じて作成元を選択
↓
新しいブランチへ切り替わる
↓
必要に応じてPublish Branchでリモートへ公開
ターミナルを使う場合は、次のコマンドだけでブランチの作成と切り替えを同時に実行できます。
git switch -c feature/login
VSCodeではGUIとGitコマンドの両方を利用できるため、Git初心者はまず画面操作から覚え、慣れてきたらターミナル操作も併用すると効率的です。
まとめ
VSCodeでは、ステータスバーやコマンドパレットを使って簡単にGitブランチを作成できます。
また、ターミナルではgit switch -cを使うことで、新しいブランチの作成と切り替えを同時に行えます。
Gitブランチを活用すれば、機能追加やバグ修正などをmainブランチから分離して進めやすくなります。
特に複数人で開発する場合や、複数の作業を並行して進める場合には重要な仕組みです。
なお、未コミットの変更がある場合でもブランチを切り替えられることはありますが、変更内容によっては切り替えが拒否される場合があります。
必要に応じてコミットやstashを利用し、安全にブランチを切り替えるようにしましょう。
以上、VSCodeでGitブランチを作成する方法についてでした。
最後までお読みいただき、ありがとうございました。
