【初心者向け】VS CodeでGitLabを使うための完全ガイド

By /

【初心者向け】VS CodeでGitLabを使うための完全ガイド：バージョン管理と協業を始めよう！

プログラミング学習や開発プロジェクトを進める上で、「バージョン管理」は避けて通れない重要な概念です。そして、そのバージョン管理の中心となるツールが「Git」であり、Gitリポジトリをホスティングするためのサービスの一つが「GitLab」です。さらに、多くの開発者に愛用されている高機能なコードエディタ「Visual Studio Code (VS Code)」は、Gitとの連携機能が非常に強力です。

このガイドでは、プログラミング初心者の方や、これからGit、GitLab、VS Codeを連携させて使ってみたいと考えている方を対象に、それらを使い始めるための環境構築から基本的な使い方、そしてチームでの開発を想定したワークフローまでを、可能な限り詳細かつ分かりやすく解説します。

この記事を読み終える頃には、あなたのコード管理が劇的に効率化され、自信を持ってプロジェクトに取り組めるようになっているはずです。さあ、バージョン管理の世界へ第一歩を踏み出しましょう！

はじめに：なぜGit、GitLab、VS Codeなのか？

まずは、なぜこれらを組み合わせるのが強力なのか、その理由を理解しましょう。

  • Git: プログラミングにおける「バージョン管理システム」のデファクトスタンダードです。あなたのコードの変更履歴を細かく記録し、いつでも過去の状態に戻したり、変更内容を確認したりすることを可能にします。「いつ」「誰が」「どのような」変更を加えたのかが明確になり、誤った変更を簡単に取り消すことができます。
  • GitLab: Gitリポジトリをオンライン上で管理するためのプラットフォームです。単にコードを保管するだけでなく、チームでの協業を助ける様々な機能（課題管理、CI/CD、コードレビューなど）を提供します。あなたのコードを安全にバックアップし、どこからでもアクセスできるようにします。
  • VS Code: Microsoftが開発する、無料で高機能なソースコードエディタです。多くのプログラミング言語に対応しており、豊富な拡張機能によってさらにカスタマイズできます。そして特筆すべきは、Gitとの連携機能が標準で組み込まれていることです。コマンドを入力することなく、VS CodeのGUI上で直感的にGit操作を行うことができます。

これらを組み合わせることで、あなたはローカルのVS Code上でコードを書き、その変更をGitで管理し、その管理されたコードをGitLabというオンラインの場所に安全に保存し、他の人と共有したり共同開発したりすることができるようになります。

このガイドで学ぶこと

この記事では、以下の内容をステップバイステップで解説します。

  1. Gitのインストールと初期設定
  2. VS Codeのインストール
  3. GitLabアカウントの作成と基本的な使い方
  4. ローカルでのGit操作の基本（リポジトリ作成、変更の追跡、コミット）
  5. GitLabと連携する（リモートリポジトリの作成、プッシュ、クローン）
  6. VS Codeのソース管理機能を活用する
  7. チーム開発で重要なブランチ操作とマージリクエスト（Merge Request: MR）
  8. よくある問題とその解決策

さあ、始めましょう！

ステップ 1: Gitのインストールと初期設定

まずは、バージョン管理システムであるGitをあなたのコンピューターにインストールします。

Gitのインストール

お使いのOSに合わせて、以下の手順でインストールしてください。

  • Windows:

    1. Git公式サイト (git-scm.com) にアクセスし、Windows版インストーラーをダウンロードします。
    2. ダウンロードしたインストーラーを実行します。
    3. インストールオプションは、特にこだわりがなければデフォルトのままで問題ありません。Git Bash Here や Git GUI Here を右クリックメニューに追加するオプションは便利なので、チェックを入れておくと良いでしょう。パスを通す設定もデフォルト（Recommended）で大丈夫です。
    4. インストーラーの指示に従ってインストールを完了させます。
    5. インストール後、コマンドプロンプトまたはPowerShellを開き、git --version と入力してエンターキーを押し、バージョン情報が表示されれば成功です。

  • macOS:

    1. Homebrewをインストールしている場合、ターミナルを開いて brew install git と入力するのが最も簡単です。
    2. Homebrewを使用していない場合、Git公式サイト (git-scm.com) からmacOS版インストーラーをダウンロードして実行するか、Xcode Command Line ToolsをインストールすることでGitが含まれている場合があります（ターミナルでgit --versionと打ってみてバージョンが表示されればインストールされています）。
    3. インストール後、ターミナルを開き、git --version と入力してエンターキーを押し、バージョン情報が表示されれば成功です。

  • Linux:

    1. 多くのLinuxディストリビューションでは、パッケージマネージャーを使ってインストールできます。
      • Debian/Ubuntu系: ターミナルを開き、sudo apt update && sudo apt install git と入力します。
      • Fedora系: ターミナルを開き、sudo dnf install git と入力します。
      • CentOS/RHEL系: ターミナルを開き、sudo yum install git と入力します。
    2. インストール後、ターミナルを開き、git --version と入力してエンターキーを押し、バージョン情報が表示されれば成功です。

Gitの初期設定

Gitをインストールしたら、最初にあなたの名前とメールアドレスを設定する必要があります。これは、あなたがコミット（変更履歴の記録）を行った際に、誰がその変更を行ったかを識別するために使われます。

コマンドプロンプト、PowerShell、またはターミナルを開き、以下のコマンドをあなたの情報に置き換えて実行してください。

bash
git config --global user.name "あなたの名前"
git config --global user.email "あなたのメールアドレス"

  • --global オプションは、そのコンピューター上のすべてのGitリポジトリに対してこの設定を適用するという意味です。特定のプロジェクトだけで別の名前やメールアドレスを使いたい場合は、そのプロジェクトのディレクトリ内で--globalオプションを付けずに設定します（この場合、ローカルの設定がグローバル設定より優先されます）。
  • 名前はフルネームでもニックネームでも構いませんが、後から見て誰の変更か分かりやすいものにしましょう。
  • メールアドレスは、通常GitLabアカウントなどで使用するメールアドレスと同じものを使うのが一般的です。

設定が正しく行われたか確認するには、以下のコマンドを実行します。

bash
git config --global user.name
git config --global user.email

設定した名前とメールアドレスが表示されれば成功です。

ステップ 2: VS Codeのインストール

次に、コードエディタであるVS Codeをインストールします。VS CodeはGit連携機能が非常に強力なので、この記事ではVS Codeを前提に進めます。

VS Codeのインストール

  1. VS Code公式サイト (code.visualstudio.com) にアクセスします。
  2. お使いのOSに合わせたダウンロードボタンをクリックします。
  3. ダウンロードしたインストーラーを実行します。
  4. インストールオプションは、特にこだわりがなければデフォルトのままで問題ありません。デスクトップアイコンの作成や、右クリックメニューに「Codeで開く」を追加するオプションは便利なので、チェックを入れておくと良いでしょう。
  5. インストーラーの指示に従ってインストールを完了させます。
  6. VS Codeを起動し、メニューの「Help」>「About」などでバージョン情報が表示されれば成功です。

ステップ 3: GitLabアカウントの作成と基本的な使い方

ローカル環境の準備ができたら、次にオンラインサービスであるGitLabを使えるようにします。

GitLabアカウントの作成

  1. GitLab公式サイト (gitlab.com) にアクセスします。
  2. 「Sign up for free」またはそれに類するボタンをクリックします。
  3. 必要情報を入力してアカウントを作成します。メールアドレス、名前、パスワードなどが必要です。
  4. 入力したメールアドレスに確認メールが届くので、リンクをクリックしてアカウントを有効化します。
  5. アカウント作成後、ログインできるようになります。

GitLabの基本的な構成要素：プロジェクトとグループ

GitLabにログインすると、あなたのダッシュボードが表示されます。ここで理解しておくべき基本的な概念は以下の通りです。

  • プロジェクト (Project): バージョン管理されるコード（Gitリポジトリ）を中心に、課題管理（Issues）、マージリクエスト（Merge Requests）、CI/CDパイプライン、Wiki、スニペットなど、特定の開発プロジェクトに必要な全ての要素が集約される場所です。多くの場合、1つのプロジェクトが1つのGitリポジトリに対応します。
  • グループ (Group): 複数のプロジェクトをまとめて管理するためのものです。企業やチーム、組織などで利用されることが多く、グループ内で権限を管理したり、グループ全体の設定を行ったりできます。初心者のうちは、まず自分の個人アカウント直下にプロジェクトを作成することから始めれば十分です。

ステップ 4: ローカルでのGit操作の基本

GitとVS Codeのインストール、そしてGitLabアカウントの準備ができました。ここからは、実際にコードをバージョン管理する基本的な流れを学びます。まずは、ローカルコンピューター上での操作から始めましょう。

VS Codeには強力なGit連携機能がありますが、ここではまずGitのコマンドを理解することが、VS CodeのGUI操作をより深く理解する助けになります。VS Codeのターミナル機能（「Terminal」メニュー > 「New Terminal」）を使うと、VS Code上から直接コマンドを実行できるので便利です。

1. 新しいプロジェクト用のディレクトリを作成する

まずは、作業用の新しいディレクトリ（フォルダ）を作成します。VS Codeでそのディレクトリを開きましょう。

例えば、デスクトップに my-first-project というディレクトリを作成する場合：

  • エクスプローラー/Finderでディレクトリを作成し、VS Codeの「File」>「Open Folder…」からそのディレクトリを開く。
  • VS Codeのターミナルで以下のコマンドを実行する。
    bash
    mkdir my-first-project
    cd my-first-project
    その後、VS Codeのメニューから「File」>「Open Folder…」で my-first-project を開くか、ターミナルで code . と入力してVS Codeを開き直します（code コマンドが使えるようにパス設定が必要な場合があります）。

2. Gitリポジトリの初期化 (git init)

作成したディレクトリでGitによるバージョン管理を開始するには、「Gitリポジトリ」として初期化する必要があります。

VS Codeのターミナルで、プロジェクトのルートディレクトリ（my-first-project ディレクトリ）にいることを確認し、以下のコマンドを実行します。

bash
git init

実行すると、「Initialized empty Git repository in /path/to/my-first-project/.git/」のようなメッセージが表示されます。これで、.git という隠しディレクトリが作成され、このディレクトリ内でのファイルの変更履歴がGitによって管理されるようになります。

VS Codeでの操作:
VS Codeを開いた状態で、左側のアクティビティバーにある「Source Control」（三つ並んだ丸のアイコン）をクリックします。もし開いているフォルダがGitリポジトリでない場合、「Initialize Repository」ボタンが表示されるので、それをクリックします。

3. ファイルの作成と変更

次に、何か簡単なファイルを作成してみましょう。例えば index.html というファイルを作成し、以下の内容を記述します。

“`html






はじめてのGitLabプロジェクト

こんにちは、GitLab!


“`

ファイルを保存します。

4. 変更状態の確認 (git status)

ファイルを作成または変更した後、Gitがその変更をどのように認識しているかを確認します。

VS Codeのターミナルで、以下のコマンドを実行します。

bash
git status

実行結果には、新しく作成された index.html ファイルが表示されるはずです。通常は「Untracked files:」（追跡されていないファイル）のセクションに赤字で表示されます。これは、Gitが「このファイルがあるのは知っているけど、まだバージョン管理の対象になっていないよ」という状態を示しています。

VS Codeでの操作:
VS Codeの「Source Control」ビューを開くと、「Changes」（変更）または「Untracked Files」（追跡されていないファイル）というセクションに index.html が表示されているはずです。ファイル名の横には「U」（Untracked）のようなアイコンが表示されます。

5. 変更をステージングする (git add)

Gitで変更を記録するためには、まずその変更を「ステージングエリア」（またはインデックス）に追加する必要があります。ステージングエリアは、次にコミットする変更のスナップショットを準備する場所です。

index.html をステージングするには、以下のコマンドを実行します。

bash
git add index.html

全ての変更されたファイル（新規作成、修正、削除）をまとめてステージングするには、以下のコマンドを実行します。

bash
git add .

もう一度 git status を実行すると、index.html が「Changes to be committed」（コミットされる変更）のセクションに緑字で表示されているはずです。これは、このファイルが次のコミットに含まれる準備ができたことを意味します。

VS Codeでの操作:
VS Codeの「Source Control」ビューで、ステージングしたいファイル（例: index.html）の上にカーソルを合わせると表示される「+」ボタンをクリックします。「Changes」セクションから「Staged Changes」（ステージされた変更）セクションに移動し、ファイル名の横のアイコンが変化します。すべての変更をステージングしたい場合は、「Changes」セクションのヘッダーにある「+」ボタン（Stage All Changes）をクリックします。

6. 変更をコミットする (git commit)

ステージングエリアに追加した変更を、正式な変更履歴として記録することを「コミット」と言います。コミットする際には、その変更がどのような内容であるかを簡潔に説明する「コミットメッセージ」を必ず付けます。

ステージングされた変更をコミットするには、以下のコマンドを実行します。

bash
git commit -m "はじめてのHTMLファイルを追加"

  • -m オプションの後に続く文字列がコミットメッセージです。メッセージは、そのコミットで何を変更したのかを簡潔に、かつ具体的に記述することが推奨されます。慣習として、一行目には変更の要約を書き、詳細が必要な場合は一行空けてから複数行で記述します。

コミットが成功すると、「[master (root-commit) XXXXXXX] はじめてのHTMLファイルを追加」のようなメッセージが表示されます（ブランチ名が main の場合もあります）。XXXXXXX はそのコミットを一意に識別するハッシュ値の最初の数桁です。

VS Codeでの操作:
VS Codeの「Source Control」ビューで、ステージされた変更があることを確認します。「Message」というテキストボックスにコミットメッセージを入力します（例: 「はじめてのHTMLファイルを追加」）。メッセージを入力したら、テキストボックスの上または横にあるチェックマークアイコン（Commit）をクリックします。または、「Commit」ボタンが表示されている場合はそれをクリックします。

7. コミット履歴の確認 (git log)

これまでのコミット履歴を確認するには、以下のコマンドを実行します。

bash
git log

実行すると、最新のコミットから順に、コミットID、作者、日付、コミットメッセージなどが表示されます。

VS Codeでの操作:
VS Code標準の機能だけでは、コマンドラインの git log のようにリッチな履歴表示はできませんが、左下のアクティビティバーにある歯車アイコンから「Command Palette…」（または Ctrl+Shift+P）を開き、「Git: View History」などと入力すると、インストールされている拡張機能が提供する履歴表示コマンドが表示されることがあります。例えば、「Git Graph」のような拡張機能をインストールすると、VS Code上で視覚的に分かりやすいコミット履歴やブランチの状態を確認できるようになります。

ステップ 5: GitLabと連携する（リモートリポジトリ）

ここまでのステップで、ローカルコンピューター上でのバージョン管理ができるようになりました。次に、このローカルリポジトリをオンライン上のGitLabと連携させます。GitLabにあるリポジトリを「リモートリポジトリ」と呼びます。

リモートリポジトリを持つことで、以下のことが可能になります。

  • コードのオンラインバックアップ
  • 複数のコンピューター間でのコードの同期
  • 他の開発者とのコード共有・共同開発

1. GitLabに新しいプロジェクトを作成する

GitLabにログインし、新しいプロジェクトを作成します。

  1. GitLabのダッシュボードまたは左側のメニューから「Projects」>「Your projects」を選び、「New project」ボタンをクリックします。
  2. 「Create blank project」を選びます。
  3. プロジェクトの詳細を入力します。
    • Project name: プロジェクト名を入力します（例: my-first-project）。これはGitLab上での表示名になります。
    • Project slug: プロジェクトのURLに使われる名前です。通常はプロジェクト名から自動生成されます。
    • Group or user: プロジェクトを作成する場所を選択します。個人で使う場合は自分のユーザー名を選びます。
    • Visibility Level: プロジェクトの公開範囲を設定します。「Private」（非公開）にしておけば、あなたや許可したメンバーだけがアクセスできます。「Public」（公開）にすると、インターネット上の誰でもコードを見られるようになります。初心者のうちはPrivateで始めるのがおすすめです。
    • Initialize repository with a README: このオプションはチェックを入れないでください。ローカルに既にリポジトリを作成済みの場合、GitLab側でREADMEを作成すると、ローカルとリモートで履歴が分かれてしまい、連携が複雑になります。今回はローカルのリポジトリをGitLabに「プッシュ」するので、チェックは不要です。
  4. 「Create project」ボタンをクリックします。

プロジェクトが作成されると、次にどのようにローカルリポジトリを接続するか、または新しいリポジトリを作成するかを示すページが表示されます。今回は「Push an existing folder」または「Push an existing Git repository」のセクションに表示されるコマンドを使います。

表示されるコマンドは通常以下のようになります。

bash
cd existing_folder
git remote add origin [email protected]:your-username/my-first-project.git
git branch -M main # もしくは git branch -M master
git push -uf origin main # もしくは git push -uf origin master

[email protected]:your-username/my-first-project.git の部分は、あなたのGitLabのユーザー名とプロジェクト名によって異なります。また、接続方法としてHTTPSの場合とSSHの場合でURLの形式が異なります。

  • HTTPS: https://gitlab.com/your-username/my-first-project.git
  • SSH: [email protected]:your-username/my-first-project.git

初心者の方には、設定が簡単なHTTPSをおすすめします。ただし、操作ごとに認証情報（ユーザー名とパスワード、またはPersonal Access Token）の入力を求められる場合があります。SSHは初回設定に鍵ペアの生成と登録が必要ですが、一度設定すれば認証なしで操作できて便利です。この記事では主にHTTPSを前提としますが、VS Codeの機能を使う場合は認証情報ヘルパーが働くため、どちらの方法でも操作感に大きな違いはありません。

2. リモートリポジトリの追加 (git remote add)

ローカルリポジトリに、先ほどGitLabで作成したリモートリポジトリの場所を教えます。通常、リモートリポジトリの名前は慣習的に origin とします。

VS Codeのターミナルで、ローカルのプロジェクトディレクトリにいることを確認し、以下のコマンドを実行します。リモートリポジトリのURL はGitLabのプロジェクトページに表示されているものをコピーしてください（HTTPSまたはSSH）。

bash
git remote add origin リモートリポジトリのURL

例（HTTPSの場合）：
bash
git remote add origin https://gitlab.com/your-username/my-first-project.git

例（SSHの場合）：
bash
git remote add origin [email protected]:your-username/my-first-project.git

これで、ローカルリポジトリは origin という名前でGitLab上のリモートリポジトリを認識するようになりました。

リモート設定を確認するには、以下のコマンドを実行します。

bash
git remote -v

origin という名前でプッシュ(push)とフェッチ(fetch)のためのURLが表示されれば成功です。

VS Codeでの操作:
VS Codeの標準機能にはリモート追加のための直接的なGUIボタンはありません。これはターミナルまたはコマンドパレット（Ctrl+Shift+Pで「Git: Add Remote」）から行うのが一般的です。一度リモートを追加すれば、その後のプッシュ/プルはVS CodeのGUIで簡単に行えます。

3. ローカルの変更をリモートにプッシュする (git push)

ローカルでコミットした変更を、GitLabのリモートリポジトリにアップロードすることを「プッシュ (Push)」と言います。

ローカルの main ブランチ（または master ブランチ）の変更を、リモートの origin にプッシュするには、以下のコマンドを実行します。初回プッシュ時は、ローカルブランチとリモートブランチを関連付けるために -u オプション（または --set-upstream）を付けるのが一般的です。

bash
git push -u origin main # もしくは git push -u origin master

認証を求められた場合は、GitLabのユーザー名とパスワード、またはPersonal Access Tokenを入力します。成功すると、ローカルのコミットがGitLabにアップロードされます。

GitLabのプロジェクトページをブラウザでリロードすると、先ほどローカルで作成・コミットしたファイル（例: index.html）が表示されているはずです。

VS Codeでの操作:
VS Codeの「Source Control」ビューを開きます。ステータスバー（VS Codeウィンドウの一番下）には、現在のブランチ名（例: main* または master*、*は未プッシュの変更があることを示す）と、上矢印/下矢印のアイコンが表示されていることがあります。これは、ローカルとリモートの状態の差分を示しています。
プッシュするには、VS Codeの「Source Control」ビューの上部にあるメニュー（三点リーダーアイコン）をクリックし、「Push」を選択します。または、ステータスバーの上矢印をクリックします。
初回プッシュでリモートとの関連付けが必要な場合は、「Push To…」や「Publish Branch」のようなオプションが表示されることがあります。通常は origin/main や origin/master を選んでプッシュします。

4. リモートリポジトリをローカルにクローンする (git clone)

既にGitLabに存在するプロジェクトを、自分のローカルコンピューターにコピーしてくることを「クローン (Clone)」と言います。これは、チームメンバーが作成したプロジェクトに参加する場合や、別のコンピューターで作業を続けたい場合に行います。

GitLabのプロジェクトページを開き、「Clone」ボタンをクリックすると、HTTPSまたはSSHのURLが表示されます。クローンしたいURLをコピーします。

ローカルで、プロジェクトを配置したいディレクトリに移動し（git init を行う前の空の、または存在しないディレクトリ）、以下のコマンドを実行します。リモートリポジトリのURL はコピーしたURLに置き換えてください。

bash
git clone リモートリポジトリのURL

例（HTTPSの場合）：
bash
git clone https://gitlab.com/your-username/my-first-project.git

コマンドを実行すると、リモートリポジトリの内容が、プロジェクト名と同じ名前の新しいディレクトリ内にダウンロードされます。そのディレクトリに移動して、VS Codeで開けば、リモートリポジトリの内容をローカルで操作できるようになります。

VS Codeでの操作:
VS Codeを起動し、メニューの「View」>「Command Palette…」（または Ctrl+Shift+P）を開きます。「Git: Clone」と入力して選択します。クローンしたいリモートリポジトリのURLを入力するよう求められるので、GitLabからコピーしたURLをペーストしてエンターキーを押します。次に、ローカルコンピューター上のどこにプロジェクトを保存するかを選択するダイアログが表示されるので、適切な場所を選びます。選択した場所にプロジェクトがクローンされ、VS Codeでそのプロジェクトを開くか尋ねられるので、「Open」を選択すれば準備完了です。

ステップ 6: VS Codeのソース管理機能を活用する

これまでのステップで、基本的なGitコマンドと、それに対応するVS Codeでの操作を学んできました。ここからは、VS Codeの「Source Control」ビューをさらに詳しく見て、日々の開発でどのように活用できるかを確認します。

VS Codeの左側アクティビティバーにある「Source Control」アイコン（三つ並んだ丸）をクリックしてビューを開いてください。

Source Controlビューの構成要素

このビューは主に以下のセクションで構成されています。

  • Changes (変更): Gitによって追跡されているが、まだステージングされていないファイルが表示されます。ファイルの横には、変更の種類を示すアイコンが表示されます（M: Modified (修正), A: Added (追加), D: Deleted (削除), U: Untracked (未追跡), R: Renamed (名前変更), C: Copied (コピー)）。
  • Staged Changes (ステージされた変更): git add によってステージングエリアに追加されたファイルが表示されます。これらのファイルが次のコミットに含まれます。
  • Merge Changes (マージの変更): マージ中にコンフリクトが発生した場合に、コンフリクトしているファイルが表示されます。

VS Codeでの基本的なGit操作

  1. 変更の確認:

    • 「Changes」または「Staged Changes」セクションのファイル名をクリックすると、元のファイルと現在のファイルの差分（Diff）が表示されます。これにより、どの行が追加・修正・削除されたかを視覚的に確認できます。緑色が追加、赤色が削除、青色が変更された行を示します。
    • Diffビューでは、行番号の横に表示されるアイコンをクリックして、個別の行の変更をステージング/アンステージングすることも可能です。

  2. 変更のステージング:

    • ステージングしたいファイルの上にカーソルを合わせ、「+」アイコンをクリックします。
    • 「Changes」セクションのヘッダーにある「+」アイコンをクリックすると、すべての変更を一度にステージングできます。

  3. 変更のアンステージング:

    • 「Staged Changes」セクションにあるファイルを右クリックし、「Unstage Changes」を選択するか、ファイルの上にカーソルを合わせ、「-」アイコンをクリックします。
    • 「Staged Changes」セクションのヘッダーにある「-」アイコンをクリックすると、すべてのステージされた変更を一度にアンステージングできます。

  4. 変更の破棄:

    • まだステージングされていない（「Changes」セクションにある）ファイルを右クリックし、「Discard Changes」を選択すると、そのファイルの変更を元に戻すことができます。この操作は元に戻せないので注意してください。 全ての変更を破棄するには、「Changes」セクションのヘッダーにある元に戻すアイコン（左矢印）をクリックします。

  5. コミット:

    • 「Staged Changes」セクションにコミットしたい変更があることを確認します。
    • 「Message」テキストボックスにコミットメッセージを入力します。
    • テキストボックスの上にあるチェックマークアイコン（Commit）をクリックします。ドロップダウン矢印からは、ステージされた変更のみをコミットするか（Commit Staged）、すべての変更をコミットするか（Commit All）、ステージしてコミットするか（Commit All (Amends) – 前回のコミットを修正する場合に使うことが多い）などを選択できます。初心者のうちは「Commit Staged」または「Commit All」で十分です。

  6. プッシュとプル:

    • コミットが完了したら、VS Codeのステータスバーを確認します。リモートにプッシュされていないコミットがある場合、現在のブランチ名の横に上向きの矢印と数字（例: main ↑1）が表示されます。プルが必要な場合は下向きの矢印と数字（例: main ↓2）が表示されます。
    • ステータスバーの矢印をクリックするか、「Source Control」ビューの上部メニュー（三点リーダー）から「Push」または「Pull」を選択して実行します。
    • 「Pull」はリモートの変更をローカルに取り込む操作です。「Push」はローカルのコミットをリモートにアップロードする操作です。
    • 「Sync Changes」というオプションもあります。これは、リモートからプルして、その後ローカルのコミットをリモートにプッシュするという一連の操作を一度に行います。作業開始時や終了時に行うと、ローカルとリモートの状態を最新に保つのに便利です。

  7. ブランチ操作:

    • VS Codeのステータスバーには、現在のブランチ名が表示されています。これをクリックすると、利用可能なブランチのリストが表示され、ブランチを切り替えたり（Checkout）、新しいブランチを作成したりできます。
    • 「Source Control」ビューの上部メニュー（三点リーダー）からも、「Branch」を選択して様々なブランチ操作（Create Branch, Checkout to…, Rename Branch, Delete Branchなど）を行うことができます。

拡張機能の活用

VS CodeのGit連携機能をさらに強化する様々な拡張機能があります。いくつか例を挙げます。

  • GitLens: コード行ごとに最終更新者やコミットメッセージを表示したり、強力な履歴ビューを提供したりする非常に人気のある拡張機能です。
  • Git Graph: Gitリポジトリのコミット履歴とブランチ構造を視覚的に分かりやすいグラフ形式で表示します。
  • GitLab Workflow: VS CodeからGitLabの機能（Issueの管理、Merge Requestの作成/レビューなど）にアクセスするための拡張機能です。GitLabを本格的に使う場合に非常に役立ちます。

これらの拡張機能をインストールすることで、VS Code内でのGit/GitLab操作の利便性が格段に向上します。拡張機能は、VS Codeのアクティビティバーにある「Extensions」アイコン（四つの四角形）から検索・インストールできます。

ステップ 7: チーム開発で重要なブランチ操作とマージリクエスト

バージョン管理システムが真価を発揮するのは、複数の人が同じプロジェクトに取り組む場合です。ここでは、チーム開発で不可欠な「ブランチ」を使った作業フローと、GitLabでの「マージリクエスト (Merge Request: MR)」について学びます。

ブランチとは？

「ブランチ (Branch)」とは、開発のメインの流れ（通常は main または master と呼ばれるブランチ）から分岐して、独立した変更履歴を記録するためのものです。

例えば、新しい機能を追加する場合や、バグを修正する場合、直接 main ブランチに変更を加えるのではなく、新しいブランチを作成してその上で作業を行います。作業が完了し、テストなどが済んだら、そのブランチでの変更を元の main ブランチに合流させます（マージ）。

ブランチを使うことで、以下のメリットがあります。

  • 並行開発: 複数の開発者がそれぞれ異なる機能を同時に開発できます。
  • 安全性の確保: 開発中の不安定な変更がメインブランチに影響を与えるのを防ぎます。
  • 変更の管理: 特定の機能やタスクに関連する変更を一つのブランチにまとめられるため、管理しやすくなります。

ブランチの作成と切り替え

新しいブランチを作成するには、通常、現在のブランチ（例えば main）から分岐させます。

コマンドラインでの操作:

  1. 現在のブランチを確認:
    bash
    git branch
    （* が付いているのが現在のブランチ）
  2. 新しいブランチを作成（例: feature/add-about-page という名前のブランチを作成）：
    bash
    git branch feature/add-about-page
    この時点では、新しいブランチが作成されただけで、現在の作業ブランチは変更されていません。
  3. 新しいブランチに切り替え（Checkout）：
    bash
    git checkout feature/add-about-page
    これで、今後は feature/add-about-page ブランチでの変更が記録されるようになります。

新しいブランチを作成してすぐに切り替えたい場合は、以下のコマンドを一度に実行できます。

bash
git checkout -b feature/add-about-page
（-b オプションは「もしブランチが存在しなければ作成する」という意味です）

VS Codeでの操作:

  1. ステータスバーの現在のブランチ名をクリックします。
  2. 表示されたリストの上部にある「+ Create new branch…」をクリックします。
  3. 新しいブランチの名前を入力します（例: feature/add-about-page）Enterキーを押します。
  4. ブランチを作成したら、すぐにそのブランチに切り替えるか尋ねられるので、「Checkout to it」を選択します。

これで、VS Codeのステータスバーに新しいブランチ名が表示され、作業がそのブランチ上で行われるようになります。

ブランチ上での作業とコミット

新しいブランチに切り替えたら、通常通りファイルの編集、新規作成、削除などの作業を行います。

作業の区切りが良いところで、変更をステージングし、コミットします。

“`bash

ファイルを変更・追加

…

変更をステージング

git add .

コミット

git commit -m “feat: Aboutページを追加するための最初のコミット”
“`

VS Codeでの操作は、ステップ6で説明した通り、「Source Control」ビューで変更をステージングし、コミットメッセージを入力してコミットボタンをクリックします。コミットは、現在チェックアウトしている（作業している）ブランチに対して行われます。

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

ブランチ上での作業がある程度進み、その変更をチームメンバーと共有したり、GitLab上でコードレビューを受けたりしたい場合、ローカルのブランチをリモート（GitLab）にプッシュします。

コマンドラインでの操作:
初めて新しいブランチをプッシュする場合は、ローカルブランチとリモートの同じ名前のブランチを関連付けるために -u オプションを使います。

bash
git push -u origin feature/add-about-page
（origin はリモート名、feature/add-about-page はローカルとリモート両方でのブランチ名）

二回目以降のプッシュは、-u オプションは不要です（一度関連付ければ次回からは git push だけでOK）。

bash
git push

VS Codeでの操作:
ローカルブランチでコミットした後、ステータスバーにプッシュされていないコミットがあることを示す表示（例: feature/add-about-page ↑2）が出ます。
ステータスバーの矢印をクリックするか、「Source Control」ビューの上部メニューから「Push」を選択します。新しいブランチの場合は、「Publish Branch」のようなオプションが表示されることもあります。

プッシュが完了すると、GitLabのプロジェクトページにアクセスした際に、新しくプッシュされたブランチが存在することが表示されるようになります。

マージリクエスト (Merge Request: MR)

マージリクエスト（MR）は、GitLabにおけるチーム開発の中心的なワークフローです。自分が特定のブランチ（例えば feature/add-about-page）で行った変更を、プロジェクトのメインブランチ（例えば main）に取り込んでほしい（マージしてほしい）という「リクエスト」を出すための機能です。

MRを提出するプロセスは通常以下のようになります。

  1. 開発者が自分のブランチで作業し、コミットし、リモートにプッシュする。
  2. GitLab上で、作業ブランチからターゲットブランチ（例: main）へのMRを作成する。
  3. MR上で、変更内容の詳細な説明や関連する課題（Issue）へのリンクなどを記述する。
  4. チームメンバーにコードレビューを依頼する。GitLabのMR画面で変更されたコードを確認し、コメントを付けたり、質問したりできます。
  5. レビュアーからのフィードバックを受けて必要に応じてコードを修正し、再度プッシュする。プッシュされた新しいコミットは自動的に既存のMRに追加されます。
  6. レビューが完了し、問題がなければ、MRを承認(Approve)する。
  7. 最終的に、MRを発行した本人または権限のあるメンバーが、作業ブランチの変更をターゲットブランチに「マージ」する。

MRは、単にコードを合流させるだけでなく、コードの品質向上、知識共有、変更の記録といった多くのメリットをもたらします。

GitLabでのMRの作成:
ローカルから新しいブランチをGitLabにプッシュした後、GitLabのプロジェクトページにアクセスすると、「Your branch was pushed X minutes ago to feature/add-about-page. Create merge request」のようなメッセージが表示されることがあります。「Create merge request」ボタンをクリックすると、MR作成画面に遷移します。
または、左側のメニューから「Merge requests」を選び、「New merge request」ボタンをクリックします。
「Source branch」（マージ元）に自分の作業ブランチ（例: feature/add-about-page）、「Target branch」（マージ先）にメインブランチ（例: main）を選択し、「Compare branches and continue」をクリックします。
MRの詳細を入力する画面が表示されるので、タイトル（例: 「Aboutページを追加」）、説明、レビュアーなどを設定し、「Create merge request」ボタンをクリックして完了です。

VS CodeからのMR操作:
VS Code標準機能ではMRの作成やレビューはできませんが、先ほど紹介した「GitLab Workflow」のような拡張機能をインストールすると、VS Code内からMRのリストを表示したり、MRを作成したり、基本的なレビューを行ったりすることが可能になります。これにより、VS CodeからGitLabに画面を切り替える手間を減らし、開発に集中できます。

メインブランチの最新化（プル）

チーム開発では、他のメンバーがあなたとは別のブランチで作業を進め、先にメインブランチにマージすることがよくあります。自分の作業ブランチを最新のメインブランチの状態に合わせておくことは、後でのマージコンフリクトを防ぐ上で重要です。

定期的に、特に新しい機能を開発し始める前や、自分のブランチをマージしようとする前に、メインブランチの最新状態をローカルに取り込み、自分のブランチに反映させる必要があります。

一般的な手順：

  1. ローカルのメインブランチ（例: main）に切り替える。
    bash
    git checkout main

  2. リモートのメインブランチから最新の変更をプルする。
    bash
    git pull origin main
    これにより、GitLab上の main ブランチの最新のコミットがローカルの main ブランチに取り込まれます。

  3. 自分の作業ブランチ（例: feature/add-about-page）に切り替える。
    bash
    git checkout feature/add-about-page

  4. 最新化したローカルのメインブランチ（main）の変更を、現在の作業ブランチ（feature/add-about-page）に取り込む。これには「マージ (Merge)」または「リベース (Rebase)」という方法がありますが、初心者にはマージの方が分かりやすいことが多いです。
    • マージする場合:
      bash
      git merge main
      これにより、main ブランチの履歴が現在のブランチに取り込まれ、必要に応じて新しいマージコミットが作成されます。
    • リベースする場合: (少し高度)
      bash
      git rebase main
      これにより、現在のブランチの変更を、main ブランチの最新の状態の上に「乗せ換える」ような形になります。履歴が直線的になりやすいですが、コンフリクトが発生した際の解決方法がマージとは少し異なります。

VS Codeでの操作:

  1. ステータスバーの現在のブランチ名をクリックし、切り替えたいブランチ（例: main）を選択します。
  2. ステータスバーのプルアイコン（下向き矢印）をクリックするか、「Source Control」ビュー上部メニューから「Pull」または「Sync Changes」を選択します。
  3. 自分の作業ブランチ（例: feature/add-about-page）に切り替えます。
  4. 「Source Control」ビュー上部メニューから「Branch」>「Merge Branch…」を選択し、マージしたいブランチ（例: main）を選択します。

これらの操作を定期的に行うことで、他のメンバーの変更を取り込み、自分の変更との衝突（コンフリクト）を早期に発見し、解消することができます。

ステップ 8: よくある問題とその解決策

GitやGitLab、VS Codeの連携を使っていると、いくつか typical な問題に遭遇することがあります。ここでは、初心者の方が遭遇しやすい問題とその基本的な解決策を紹介します。

1. プッシュやプルができない（認証エラー）

リモートリポジトリへのアクセス権がないか、認証情報が間違っている場合に発生します。

  • HTTPSの場合:
    • GitLabのユーザー名とパスワードが正しいか確認します。
    • 2要素認証を有効にしている場合、パスワードの代わりにPersonal Access Tokenを使う必要がある場合があります。GitLabのユーザー設定からPersonal Access Tokenを生成し、パスワード入力時に使用します。
    • Git Credential Managerのようなツールが正しく設定されているか確認します。
  • SSHの場合:
    • SSHキーペアが正しく生成されているか確認します。
    • 公開鍵（id_rsa.pub など）がGitLabのユーザー設定に正しく登録されているか確認します。
    • SSHエージェントが実行されており、秘密鍵が追加されているか確認します。
    • ターミナルで ssh -T [email protected] を実行し、認証が成功するか確認します。

2. マージコンフリクトが発生した

複数のブランチで同じファイルの同じ行付近が同時に変更された場合に発生します。Gitがどちらの変更を採用すれば良いか判断できないため、手動での解決が必要になります。

  • VS Codeでの解決:
    マージコンフリクトが発生すると、VS Codeの「Source Control」ビューに「Merge Changes」セクションが表示され、コンフリクトしているファイルがリストアップされます。
    コンフリクトしているファイルを開くと、コンフリクト箇所が特殊なマーカーで囲まれて表示されます。
    <<<<<<< HEAD
    // 現在のブランチでの変更
    =======
    // マージしようとしているブランチの変更 (incoming)
    >>>>>>> feature/add-about-page
    VS Codeは、これらのマーカーの上に以下の操作を簡単に行えるUIを提供します。

    • Accept Current Change: HEAD 側の変更（現在のブランチの変更）を採用する。
    • Accept Incoming Change: マージしようとしているブランチの変更を採用する。
    • Accept Both Changes: 両方の変更を残す（マーカーは削除されます）。
    • Compare Changes: 両方の変更を差分ビューで比較する。
      これらのオプションを使って、コンフリクト箇所を一つずつ手動で編集し、最終的に採用したいコードにします。コンフリクトマーカー (<<<<<<<, =======, >>>>>>>) は全て手動で削除してください。
      全てのコンフリクトを解消したら、ファイルを保存し、変更をステージング (git add) してコミット (git commit) します。コンフリクト解消後のコミットメッセージは、Gitによって自動的に生成されることが多いですが、必要に応じて編集できます。

  • コンフリクトを避けるには:

    • こまめにメインブランチをプルして、自分の作業ブランチに最新の変更を取り込む（マージまたはリベースする）。
    • 一つのブランチで複数の異なる機能を同時に開発しない。
    • 頻繁にコミットし、小さな単位でプッシュする。

3. 間違ったブランチで作業してしまった

意図しないブランチで変更やコミットを行ってしまった場合。

  • コミット前の場合: まだ変更をコミットしていない場合は、現在の変更を一時的に退避させ、「stash」するのが便利です。
    bash
    git stash # 現在の変更を一時退避
    git checkout 正しいブランチ # 正しいブランチに切り替え
    git stash pop # 退避した変更を正しいブランチに戻す
    VS Codeの「Source Control」ビュー上部メニューからも「Stash」>「Stash」または「Stash Including Untracked」で一時退避し、「Stash」>「Pop Latest Stash」で戻すことができます。
  • コミットしてしまった場合: コミットを取り消す方法はいくつかありますが、最も簡単なのは「リセット (reset)」です。ただし、既にリモートにプッシュしたコミットをリセットするのは避けるべきです。
    bash
    # 直前のコミットを取り消し、変更を保持する場合 (soft reset)
    git reset --soft HEAD~1
    # 直前のコミットを取り消し、ステージング状態を戻す場合 (mixed reset - デフォルト)
    git reset --mixed HEAD~1
    # 直前のコミットを取り消し、変更も破棄する場合 (hard reset) - 注意！変更が失われます！
    git reset --hard HEAD~1
    HEAD~1 は「現在のHEAD（最新コミット）から1つ前」という意味です。
    コミットを取り消した後、正しいブランチに切り替え、必要に応じて変更を再度コミットします。
    VS Codeの「Source Control」ビュー上部メニューから「Commit」>「Undo Last Commit」を選ぶと、直前のコミットを取り消すことができます（デフォルトでは --mixed の動作に近いです）。

4. プッシュした後に間違いに気づいた

既にリモートにプッシュしてしまったコミットに間違いがあった場合。

  • 簡単な修正の場合: 間違いを修正し、新しくコミットを作成します。もし直前のコミットの修正であれば、git commit --amend コマンドを使うと、直前のコミットに修正内容を含めて一つのコミットとして修正できます。
    bash
    # 間違いを修正
    # ...
    git add . # 修正をステージング
    git commit --amend --no-edit # 直前のコミットを修正（メッセージはそのまま）
    # もしメッセージも修正したい場合は --no-edit を付けずに実行
    その後、強制プッシュが必要になる場合があります (git push --force-with-lease)。これはリモートの履歴を書き換えるため、チーム開発では他のメンバーに影響を与える可能性があるため、非常に慎重に行う必要があります。通常は新しいコミットを追加する方が安全です。

  • 大きな変更や過去のコミットの修正: git revert コマンドを使って、特定のコミットで行われた変更を打ち消す新しいコミットを作成するのが安全です。履歴は残りますが、過去のコミットを書き換えずに間違いを修正できます。
    bash
    # 取り消したいコミットのIDを git log で確認
    git revert コミットID
    これにより、指定したコミットの変更を打ち消す新しいコミットが作成されます。

VS Codeの「Source Control」ビューでは、「Undo Last Commit」はローカルでの操作に限られます。リモートにプッシュ済みのコミットに対してリバートなどの操作を行いたい場合は、コマンドラインを使うか、Git履歴表示拡張機能などを使うのが一般的です。

まとめと次のステップ

このガイドでは、Git、GitLab、VS Codeを連携させて使うための基本的な手順と概念を解説しました。

  • Gitをインストールし、バージョン管理を開始する準備をしました。
  • VS Codeをインストールし、Git連携機能の基礎を学びました。
  • GitLabアカウントを作成し、リモートリポジトリの役割を理解しました。
  • ローカルでのGit操作（init, status, add, commit, log）を学び、VS Codeでの対応操作を確認しました。
  • リモートリポジトリとの連携（clone, remote add, push, pull）を学びました。
  • VS Codeの「Source Control」ビューを詳しく見て、GUIでの効率的な操作方法を理解しました。
  • チーム開発に不可欠なブランチ操作と、GitLabでのマージリクエストの概念を学びました。
  • 遭遇しやすい問題（認証、コンフリクト、誤操作）とその解決策について触れました。

これらはGitとGitLab、VS Codeを使ったバージョン管理のほんの入り口にすぎません。しかし、この基本的なワークフローを習得すれば、あなたのコード管理は格段に効率的になり、安全に開発を進めることができるようになります。

次のステップとして、以下のことに挑戦してみましょう。

  1. 実際に手を動かす: このガイドの手順に従って、小さなプロジェクトをローカルで作成し、GitLabにプッシュしてみましょう。何度も繰り返すことで、操作に慣れることが重要です。
  2. ブランチを使った作業: 新しい機能の実装やバグ修正の際は、必ず新しいブランチを作成して作業する習慣をつけましょう。そして、GitLab上でマージリクエストを作成してみましょう。
  3. VS Code拡張機能の活用: GitLensやGit Graph、GitLab Workflowなどの拡張機能をインストールして、VS CodeでのGit/GitLab体験をさらに向上させてみましょう。
  4. Gitのより深いコマンド: git diff, git stash, git revert, git rebase など、この記事で触れられなかった便利なコマンドについて調べてみましょう。
  5. .gitignore ファイル: バージョン管理から除外したいファイル（一時ファイル、ビルド生成物など）を指定する.gitignore ファイルの作成方法を学びましょう。
  6. GitLabの他の機能: 課題管理（Issues）、CI/CD（GitLab CI）、Wikiなど、GitLabが提供する他の便利な機能についても興味があれば調べてみましょう。

バージョン管理はプログラマーにとって必須のスキルです。焦らず、着実にステップアップしていきましょう。このガイドが、あなたのバージョン管理の旅の良いスタートとなることを願っています！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール