VSCodeでGitを使ってみた【前編】

前編ではGitのインストールとその設定手順を紹介します。

はじめに

みなさんはエンジニアとしてプロジェクトを進めていく中で、Gitを使用したことはありますか?
Gitとは代表的な分散型バージョン管理システムで、ファイルの変更履歴を管理することができます。

Gitを使用するメリットは以下が挙げられます。
・ファイルの過去のバージョンを管理でき、簡単に任意のバージョンを復元できる
・変更履歴をマージできるため、複数人で同じファイルを同時に作業が可能
・任意の変更履歴同士の比較による差分確認が簡単にできる

Salesforceでもスクラッチ開発をする事があり、作成したソースコードをGitで管理できると便利です。開発時に使用するVisual Studio Code(以降はVSCode)ではGitの操作ができます。今回はVSCode上でGit操作する上での設定手順を紹介します。

初期設定

Gitにはファイルやディレクトリの状態を記録するリポジトリが存在します。
ファイルを管理するにあたって、リモートリポジトリとローカルリポジトリを用意する必要があります。
・リモートリポジトリは、専用のサーバに配置して複数人で共有するためのリポジトリ
・ローカルリポジトリは、ユーザ各自が自身のPC上に配置するリポジトリ(直接ファイル編集が可能)

今回リモートリポジトリはBacklogの利用を想定します。

Backlogのリモートリポジトリ設定手順は以下のリンクを参照してください。

参考サイト:サル先生のGit入門

ローカルリポジトリを用意するには、自身のPCにGitのインストールが必要なため、その手順を紹介します。
※VSCodeと拡張機能であるSalesforceCLIはインストール済みを想定

Gitのインストール Git for Windows編

初めにGit for Windowsをインストールします。
Git for Windowsとは、WindowsでGitを使う場合に必要なアプリケーションです。

インストーラーは、公式サイトから無料で入手できます。

公式サイト:Git for Windows

公式サイトの「Download」ボタンをクリックして、インストーラーをダウンロードします。
インストール時の設定は、全てデフォルトで[次へ]を選択します。

Git for Windows ダウンロード画面

Gitのインストール TortoiseGit編

次にTortoiseGitをインストールします。
Git操作をGUI(マウスなど)で操作し、コミットの取り消しや差分などを確認する手間などを省くことができるツールです。
TortoiseGitでは裏でGit for Windowの機能を使っているため、Git for Windowsを先にインストールする必要があります。 
TortoiseGitを日本語化する場合は、翻訳言語パックのインストールが必要です。

インストール手順については以下のサイトに記載があるため、そちらを参照してください。

参考サイト:サル先生のGit入門 Gitのインストール

ローカルリポジトリの作成

Gitのインストールが完了したら、次の手順でローカルリポジトリを準備していきます。
①Salesforceプロジェクトを作成
②ローカルリポジトリの作成
③ローカルリポジトリにファイル登録
④リモートリポジトリへの反映

①Salesforceプロジェクトを作成
スクラッチ開発をする際に利用するプロジェクトをVSCodeで作成します。VSCodeでコマンドパレットを開き、「SFDX: マニフェストファイルを使用してプロジェクトを作成」を選択します。プロジェクトのテンプレートは「標準」を選択し、プロジェクト名は任意の名前を付け作成します。

Salesforceプロジェクトを作成

②ローカルリポジトリの作成
【手順1】
作成したSalesforceプロジェクトを右クリックし、「Git ここにリポジトリを作成」をクリックします。

Gitの作成手順1

【手順2】
以下の画面が表示されますが、「OK」をクリックします。

Gitの作成手順2

【手順3】
対象のファイルのアイコンが以下の画像の様になれば、Salesforceプロジェクトにロ-カルリポジトリが作成されました。

Gitの作成手順3

【手順4】
ローカルリポジトリの作成が完了すると、VSCode上でGitアイコンを押下した際に、Salesforceプロジェクト内に作成されたファイル一覧が表示されます。

Gitの作成手順4

③ローカルリポジトリにファイル登録
ローカルリポジトリの中身が空の状態のため、バージョン管理したいファイルを登録します。
ローカルリポジトリの内容をリモートリポジトリに反映させるには、事前に反映先のリモートリポジトリを追加する必要があります。

【手順1】
「ソース管理リポジトリ」の三点リーダーをクリックし、「リモート」>「リモートの追加」をクリックします。

ファイルの登録手順1

【手順2】
リモートリポジトリURLを貼り付けて、「URLからリモートを追加する」をクリックします。

ファイルの登録手順2

BacklogのリモートリポジトリURLは、「プロジェクト」>「Git」のリポジトリ一覧から確認できます。

BacklogのリモートリポジトリURL

【手順3】
任意のリモート名を入力し、Enterを押します。

ファイルの登録手順3

【手順4】
以下画像の赤枠のボタンをクリックし、すべての変更をステージします。

ファイルの登録手順4

【手順5】
「コミット」ボタンの上のメッセージ入力欄に任意のコメントを入力し、「コミット」ボタンをクリックします。
コミットが完了すると、ローカルリポジトリのmasterブランチにファイルが登録されます。

ファイルの登録手順5

④リモートリポジトリへの反映
【手順1】
コミットが完了したら、「Branchの発行」ボタンをクリックします。
これにより、ローカルリポジトリのmasterブランチがリモートリポジトリへ送信されます。

リモートリポジトリへの反映手順1

ブランチの発行後に、③の【手順1】で追加したBacklogのリモートリポジトリを確認します。
対象のリモートリポジトリの「ブランチ」をクリックすると、masterブランチが反映されていることが確認できます。

リモートリポジトリのブランチ

おわりに

今回はGit操作の前編として、Gitのインストール方法とその設定手順について紹介しました。
TortoiseGitを使えば普段使っているマウスの操作を行うだけでGitのコマンドを発行することができます。これによって複雑なコマンド操作を覚える必要がなくなるため、初心者でも簡単にGitを扱うことができるようになります。

後編ではVSCodeのGit操作をコマンドごとに紹介します。続けて読んでみてください!