Visual Studio CodeとGitHubを用いたGitバージョン管理方法

無料のコードエディタであるVisual Studio CodeとGitHubを用いたGitバージョン管理方法について、初期設定からプルリクエストまでの実用的な流れと競合発生時の解消方法を解説いたします。

ソフトウェアのインストール

以下のURLから必要なソフトウェアをダウンロードしてインストールします。

• Git
  • ファイルの変更履歴等を管理するバージョン管理システム
  • https://git-scm.com/downloads
• Visual Studio Code
  • 無料で軽量かつ拡張機能が豊富なコードエディター
  • https://code.visualstudio.com/

GitHubのアカウント登録

以下のURLからGitHubを使用するためのアカウント登録を行います。Sign upを選択してアカウントを発行します。（Sign upはアカウント発行。Sign inはログインとなります）

• GitHub
  • プロジェクトの管理及び開発を支援する開発プラットフォーム
  • https://github.com/

拡張機能

• GitHub Pull Requests and Issues
  • Visual Studio Code上でプルリクエストが実行できるようになる拡張機能
    （Visual Studio Codeを開いて拡張機能（Ctrl + Shift + X）の検索欄にGitHub Pull Requests and Issuesと入力してインストールを選択する）
  • https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

• Git Graph
  • Gitのブランチをグラフ化して可視化する拡張機能
  • https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

クローン

クローンしてリモートから取得したファイルを管理するためのフォルダ（例：sourceフォルダ）を任意の場所に作成しておきます。

Visual Studio Codeを開いてソース管理（Ctrl + Shift + G）からリポジトリのクローンを選択、GitHubから複製を選択してサインインを許可する。（リポジトリのクローンはCtrl + Shift + Pからすべてのコマンドの表示を行い入力欄にgit: cloneと打ち込むことでも可能）

Visual Studio Codeに対してGitHubの承認を確認する画面が表示されるのでAuthorize githubを選択して承認する。

上記の承認以降GitHubから複製を選択するとアカウントに紐づいたPublicのリポジトリが一覧で表示されるようになります。

Privateのリポジトリや他者のリポジトリをクローンする場合にはリポジトリURLを選択するか、リポジトリソースを選択します。と記載された入力欄に対象のリポジトリが存在するURLを入力します。（以下の画像のHTTPS（画像上部のURLでも可）のURLを入力します）

クローン対象のURLを入力して選択するとフォルダーの選択ウィザードが表示されるので初めに作成した管理用フォルダを選択してリポジトリの場所を選択してクローンを実行します。

Visual Studio Code上にてクローンしたリポジトリを開きますか？と表示されるのでOKを選択してワークスペースにリポジトリを以下の画像のように追加することができます。（ファイルのフォルダーをワークスペースに追加…から管理用フォルダに存在するリポジトリを選択することでも手動で追加できる）

最後にGitのコミットを行った際の情報元となる個人の識別情報を登録します。拡張機能のGit Graphが有効である場合には以下の画像のようにGit Graphと表示されるようになるのでこちらを選択してGit Graphタブを表示させます。Git Graphが表示されたら歯車マークのRepository Settingsから設定を開きます。

設定が開いたらUser DetailsのEditを選択してUser NameとUser Emailに任意のユーザー名とメールアドレスを入力してSet User Detailsで変更を確定します。

クローンの手順については以上になります。

Git Commandを用いたクローン方法（補足）

クローンしてリモートから取得したファイルを管理するためのフォルダ（例：sourceフォルダ）を任意の場所に作成しておきます。
Visual Studio Code上にてファイルからフォルダーをワークスペースに追加…で先程作成したファイル管理用のフォルダを選択します。
ターミナルから新しいターミナルを選択して先程ワークスペースに追加したフォルダを選択することで、以下の画像のように選択したフォルダのディレクトリパス上のコマンドラインを表示することができます。

初めにGitが使用できる状態にあるか否かを確認するために以下のコマンドを実行します。（Gitが使える状態にあれば現在のバージョンがコンソール上に表示されると思います。）

git --version

Gitの初期化

※GitHub上でリポジトリを作成している場合にはローカルリポジトリに.gitファイルが既に作成されているため以下の作業を行う必要はありません。

Gitの初期化を行い以下のコマンドが実行されたフォルダにて作業を行えるようにします。（コマンド実行後にフォルダに.gitファイルが作成されます。隠しファイルとなっているので見えない場合にはエクスプローラの表示から隠しファイルの項目をチェックします）

git init

バージョンが表示されて既にGitが使える状態にあれば以下のコマンドでGitHubからリポジトリをクローンします。

git clone クローン対象のURL

クローンが完了したら管理用フォルダの中にクローン対象のリポジトリが追加されていると思います。

最後に管理用フォルダ内のリポジトリにて以下のコマンドで個人の識別情報（ユーザー名とメールアドレス）が設定されているかを確認します。（Visual Studio Code上に一覧で表示されているワークスペースに対して右クリックをして「統合ターミナルで開く」からでもコマンドラインを開くことができます）

git config user.name
git config user.email

個人の識別情報が設定されていない場合には以下のコマンドで設定を変更及び追加することができます。

git config --global user.name "User Name"
git config --global user.email [e-mail]

Git Commandを用いたクローンの手順については以上になります。

プルリクエスト

ソース管理からビューとその他のアクションを選択プル、プッシュの中にあるフェッチ(Prune)を選択することでリモートリポジトリの最新の状態を取得します。

初期設定であれば現在のローカルブランチはリモートブランチのorigin/mainを参照したmainブランチとなっております。（Visual Studio Code内の左下に現在作業中のブランチが表示されます。またプロジェクトによってはorigin/mainをorigin/masterと呼称する場合があります）

今回は開発用のリモートブランチであるorigin/developを参照してローカルブランチを作成したいと思います。（現場によって参照するブランチ名や手順が異なる場合にはorigin/developの部分を任意のものに置き換えて以下の作業を行ってください）

ソース管理からビューとその他のアクションを選択してチェックアウト先…を選択。新しい分岐の作成元…を選択して作成する任意のローカルブランチ名（例として今回はfeature/updateReadme）を入力してEnter。そうすると作成元を指定することができるので任意のブランチ（今回はorigin/develop）を選択します。（作成元にしたいブランチが表示されない場合にはフェッチ(Prune)を再度実行することで作成元の一覧に追加されます）

上記の作業が完了すると以下の画像のようにローカルブランチがmainからfeature/updateReadmeに切り替わります。（ブランチ名を直接クリックすることでもチェックアウトの作業が行えます）

実際に取得したファイルを編集してプルリクエストを行います。今回は以下の画像のようにREADME.mdファイルを編集して保存します。そうするとソース管理に1個の保留中の変更と表示されるようになります。

ソース管理からリモートリポジトリに渡したいファイル（先程変更を加えたREADME.mdファイル）に対して変更をステージを選択してステージング（選択）します。（変更の横にある＋を選択することですべての変更をステージできます）

変更をステージしたことでステージされている変更にファイルが追加されます。

以下の画像のようにコミットメッセージ（今回は"READMEの編集"）を入力してコミットします。

コミットが完了したらプルリクエストを作成する前にプルリクエスト送信先のリモートブランチであるorigin/developの最新の状態をプルで取得します。ソース管理からビューとその他のアクションを選択してプル、プッシュ内の指定元からプル…を選択。対象のリモートリポジトリを選択してプルの指定元を一覧に表示されたリモートブランチから選択する。

このタイミングにて競合が発生する可能性があります。もし発生してしまった場合には競合解消を参照してください。

拡張機能のGitHub Pull Requests and Issuesが有効である場合には以下の画像のようにCreate Pull Requestボタンが追加されているのでこちらを選択します。

GitHub Pull Requests and Issuesの各項目について説明します。

• INTO
  • 上部の選択リストはプルリクエスト送信先のリモートリポジトリを表す。
  • 下部の選択リストはプルリクエスト送信先のリモートブランチを表す。
• MERGE CHANGES FROM
  • 上部の選択リストはプルリクエスト送信元のリモートリポジトリを表す。
  • 下部の選択リストはプルリクエスト送信元のリモートブランチを表す。
• TITLE
  • プルリクエストのタイトル
• DESCRIPTION
  • プルリクエストの概要

以下の画像のように各項目を選択及び入力してCreateを実行。Publish branchで対象のリモートブランチに対してプルリクエストを送ることができます。

以上で実装者の作業は終了となります。

あとはReviewers（レビュアー）に設定されたメンバーがプルリクエストの内容を確認して問題がなければMarge Pull Requestを選択、さらにCreate Marge Commitでプルリクエストを承認してfeature/updateReadmeをdevelopに取り込んだら修正（追加）は完了となります。

最後に拡張機能のGit Graphが有効である場合には以下の画像のようにソース管理のView Git GraphからGitのコミット履歴を確認することができます。

プルリクエストの手順については以上になります。

Git Commandを用いたプルリクエスト方法（補足）

リモートリポジトリに接続されているかを以下のコマンドで確認する。

git remote -v

既に接続されている場合には以下のように表示される。(※GitHubを使用している場合には既にリモートリポジトリに接続されています）

origin  https://github.com/xxx/GitHubForVSCode (fetch)
origin  https://github.com/xxx/GitHubForVSCode (push)

リモートリポジトリに接続されていない場合には以下のコマンドで接続します。

git remote add origin クローン対象のURL

現在のローカルブランチを以下のコマンドで確認します。

git branch --contains

リモートブランチを直接参照してローカルブランチを以下のコマンドで作成します。

git checkout -b feature/updateReadme origin/develop

README.mdファイルを編集したら変更（追加）内容を以下のいずれかのコマンドでステージします。

git add . // 全てのファイルをステージ
git add -u // 変更を加えたファイルのみステージ

ステージしたファイルを以下のコマンドでコミットします。

git commit -m "メッセージ内容"

コミット内容に不備がある場合には以下のコマンドでコミットの取り消しを行うことができます。

git reset --soft "HEAD^"

プッシュの実行前に以下のコマンドでリモートリポジトリのdevlopブランチの最新情報をプルします。

git pull origin develop

コミットした内容を以下のコマンドでリモートブランチにプッシュします。(リモートブランチにfeature/updateReadmeが存在していればそのブランチに対してプッシュを行います。まだ存在しなければ新規でリモートブランチを作成します)

git push origin feature/updateReadme

プッシュが完了したらGitHub上にてプルリクエストを作成します。New pull requestを選択して新規でプルリクエストを作成します。（リモートへプッシュしたばかりであればCompare & pull requestからプルリクエスト作成することもできます）

base（プルリクエスト送信先）をdevelopに変更。compare（プルリクエスト送信元）をfeature/updateReadmeに変更してCreate pull requestを選択します。

最後にタイトルと概要を入力してCreate pull requestを選択すればプルリクエストが作成されます。

Git Commandを用いたプルリクエストの手順については以上になります。

競合解消

変更内容をコミットしてプッシュを行う前に、リモートのdevelopブランチから最新の情報をプルしてきたタイミングで競合が発生したものとします。

競合の内容はhuman.jsファイルにactive項目を追加しようとしたが既に他の作業者によってage項目が追加されていたため競合が起きてしまいました。

Visual Studio Codeにて競合が発生すると以下の画像のようになります。

Visual Studio Codeでは競合を解消するための以下の補助機能が存在しております。

• Accept Current Change

プル（取得）してきた内容を破棄して、自分の変更内容を適用する。実行結果は以下となる。

human.js

const human = {
  name: "tanaka_taro",
+ active: "soccer"
}

• Accept Incoming Change

自分の変更内容を破棄して、プル（取得）してきた内容を適応する。実行結果は以下となる。

human.js

const human = {
  name: "tanaka_taro",
+ age: '20'
}

• Accept Both Change

自分の変更内容とプル（取得）してきた内容を両方を順番に適応する。実行結果は以下となる。

human.js

const human = {
  name: "tanaka_taro",
+ active: "soccer"
+ age: '20'
}

• Compare Change

自分の変更内容とプル(取得)してきた内容の差分を比較するタブを以下の画像のように新規で開きます。（比較するだけなのでこのタブから編集を行うことはできません）

チームで開発を行っている場合、基本的には勝手に競合を自己解決してしまうことは意図せぬバグを発生させる可能性があることからも望まれません。（明らかなものは除くが、それでもなるべく一報を入れる必要があります）

まず初めに競合が発生した場合には該当のファイル（human.js）を編集した他の作業者に競合が発生したことを伝え、その上で修正内容を話し合い修正方針を定める必要があります。

話し合いの結果今回の修正方針としてはage項目、active項目共に追加する必要があるためAccept Both Changeを利用して競合の解消を行いたいと思います。以下は適用後のソースコードとなります。

human.js

const human = {
  name: "tanaka_taro",
  active: "soccer"
  age: '20'
}

ですがこのままだとactiveとageの間にカンマ（,）が存在しないためエラーが発生してしまい、手動で以下のようにソースコードを修正する必要があります。

human.js

const human = {
  name: "tanaka_taro",
+ active: "soccer",
  age: '20'
}

競合が解消されたのでもう一度ファイルをステージしてコミットし直します。

再度プッシュを行う前にリモートのdevelopブランチから最新の情報をプルして問題がなければリモートブランチにプッシュしてプルリクエストを作成します。

競合解消の手順については以上になります。

ブランチ運用

最後にブランチの運用（概念）について簡単に説明いたしますので、既に十分理解している方や興味のない方は作業に戻ってもらって大丈夫です。

リモートブランチは主に次のような構成でできています。

• main（またはmaster）

  • 製品（成果物）を納品及び管理するためのブランチ

• develop

  • 製品（成果物）を開発するためのブランチ
  • mainから派生してmainにプッシュを行う

• feature

  • 製品（成果物）に機能を追加及びバグを修正するためのブランチ
  • developから派生してdevelopにプッシュを行う

• hotfix

  • 製品（成果物）に緊急の修正（脆弱性対応など）を行うためのブランチ
  • mainから派生してmainにプッシュを行う

今回ローカルブランチを作成する際にorigin/developを作成元にしていたのは上記内容が理由です。

またブランチを作成する際の命名規則としてfeature/xxxとしていたのも上記内容が理由です。

基本的に開発者はdevelopとfeatureを主として扱うことになります。

mainブランチを古くはmastarブランチと呼称しておりました。ですが昨今では人権運動の流れからセンシティブな用語を避けるような流れがIT業界でも広がっております。現場やネットの文献などではmasterという名称がまだまだ使われておりますが上記のような社会的な情勢があることを鑑みてIT業界でも再認識する必要があります。

以上でVisual Studio CodeとGitHubを用いたGitバージョン管理方法についての解説を終了いたします。