VSCodeで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のインストール　TortoiseGit編

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

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

はじめに