VSCode による Git チュートリアル

環境によっては、proxyの設定が必要な場合がある。
設定アイコン - 設定

検索欄に "proxy" で検索し、 "Proxy Authorization" の "settings.json で編集" リンクをクリックする。

settings.json の編集で以下の設定を行う。<proxy URL>はproxyのURLやpacスクリプトのパス。

  "http.proxyAuthorization": <proxy URL>

gitコマンドがターミナルから使えるようになっていること。ターミナル - 新しいターミナル メニュー でターミナルを起動し、git --versionでエラーとならないこと。また、ユーザ名、メールアドレスが設定されていること（git config --global user.name、git config --global user.emailで確認できる）。

もし、user.name、user.email が設定されていない場合は以下の設定を行う。"ユーザー名"、"メールアドレス"は任意のユーザ名とメールアドレス。

git config --global user.name "ユーザー名"
git config --global user.email "メールアドレス"

シナリオ

開発者のAさんとBさんがAブランチ、Bブランチでチェックアウトし、同じ行を修正したためコンフリクトを起こす。Bさんが変更を破棄して、Aさんの修正を取り込み、コンフリクトを回避する。

Aさんの操作

クローン

クローンとは分散リポジトリを作成するために、リモートリポジトリをローカルリポジトリにコピーする操作である。
ブランチや履歴を含めリポジトリの全てがコピーされ、一部だけコピーするということはできない。

"リポジトリのクローン"ボタンか、"Git リポジトリのクローン"リンクをクリックする。

中央の入力欄にクローンするURL "https://github.com/＜アカウント＞/kame.git" を入力し、Enterを押下する。

リポジトリの場所を選択する。
チュートリアルでは、ユーザAとユーザBが同時に修正を行うことを想定し、２つの場所にクローンを行う。
まずは、Aさんが kame リポジトリをクローンする。
/Users/ss/Projects/kame_A

ターミナルで以下のコマンドを実行するのと同じである。

cd /Users/xxxxxx/Projects/kame_A
git clone https://github.com/＜アカウント＞/kame.git

プロジェクトを開く

クローンしたプロジェクトをVSCodeで開く。
"ファイル" "新しいウィンドウ" で新しいウィンドウを開く。
”ファイル" "開く” で表示されるダイアログでクローンしたプロジェクトのフォルダーへ移動し、"開く"ボタンでプロジェクトを開く。

ブランチとチェックアウト

ブランチとは本流から分岐し、本流の開発を邪魔することなく作業を続ける機能のことを言う。ブランチを切り替えることで、プロジェクト本体に影響を与えず開発ができる。
GitHubの場合、本流はmainブランチとなる。
また、ブランチを切り替えることをチェックアウトという。
左下ステータスバーにチェックアウトしたブランチが表示される。クローンした時点で、"main"が表示されている。mainブランチがチェックアウトされていることが確認できる。

ブランチの作成

バグフィクスや、機能を追加するなどの単位でブランチを作成する。
ここでは、Aブランチを作成する。

ソース管理（アクティビティーバーの上から３番目のボタン）をクリックする。
"..." ボタンの "ブランチ"メニューから"分岐の作成"を選択する。

入力蘭にブランチ名"A"を入力し、Enterを押下する。

ブランチAを作成したときに
左下のステータスバーに "A" と表示され、ブランチが切り替わって "A" がチェックアウトされていることが分かる。

ターミナルで以下のコマンドを実行するのと同じである。

git checkout -b A

ソース追加

エクスプローラー (アクティビティーバーの一番上のアイコン)をクリックする。
何もファイルがない状態からファイルを追加する場合は、ファイルを新規作成する。またはエディタ上にファイルをドラッグ＆ドロップでファイルを追加する。
チュートリアルではmaterialフォルダー内に教材が用意されているので、以下のファイルをmaterialフォルダーからコピーして KAME フォルダーに貼り付ける。

実行イメージ

変更の確認

ソース管理（アクティビティーバーの上から３番目のボタン）をクリックする。

新規作成された２ファイルに "U" が表示されているが、これは未追跡ファイルであることを示している。
gitではファイルの追加、削除や、変更した内容を登録する領域のことをインデックスといい、インデックスに変更内容を登録し、追跡できるようにすることをステージングという。

ステージング

"全ての変更をステージ"ボタンかメニューで、ステージングする。


ターミナルで以下のコマンドを実行するのと同じ。

git add

コミットをする前であれば、”ステージングを解除"でステージングを解除し、修正し直すこともできる。
コミットした場合でも、コミットを破棄すれば、その時点のステージングの解除もできる。

コミット

メッセージ領域にメッセージを入力し、コミットボタンをクリックする。
または、"..." ボタンの "コミット" メニューから適切なコミットを選択する。

ターミナルで以下のコマンドを実行するのと同じ。

git commit -m "メッセージ"

コミットを実行した後でも、"前回のコミットを元に戻す" メニューで直前のコミットを破棄することができる。

ブランチの発行

"ブランチの発行"ボタン
同期アイコン
いずれかのクリック、または
"..." ボタンの "ブランチ"メニューから”ブランチの発行"を選択する。

プルリクエスト

通常、プッシュ後はGitHub Web上でプルリクエストを作成し、マージするが、
ここではGitHub Webを使わずにVSCodeのプラグインのみでプルリクエストを作成し、マージする。
"Create Pull Request"アイコンをクリックするか、アクティビティーバーの"GitHub Pull Request"アイコンをクリックする。

必要であれば ”DESCRIPTION" にメッセージを記載する。"Create"ボタンをクリックする。

サイドバーにコメントを記載してレビューアーとのディスカッションもできる。
レビューアーとの同意があれば、"Merge Pull Request"ボタンでマージリクエストを発行する。

"Create Marge Commit"をクリックしてマージコミットする。

GitGraph

GitGraphプラグインを使用して状態を確認する。ステータスバーの "GitGraph" をクリックする。
右上の雲のアイコンで最新のリモートリポジトリの更新情報を取得する。
これがGitの樹形図である。色分けされている線がブランチで、点がコミットを表している。

Aさんのソース修正

ソース修正（顔を追加）

アクティビティーバーのエクスプローラーをクリックし、以下のように修正する。
materialフォルダー内の、face1.pngをコピーする。 KAME フォルダーに貼り付ける。
KAME/index.html のコメント（<-- -->）を削除する。

アクティビティーバーのソース管理をクリックし、変更したファイルをクリックすることで、変更箇所を確認することができる。

実行イメージ

ステージング

"全ての変更をステージ"ボタンかメニューで、ステージングする。

ターミナルで以下のコマンドを実行するのと同じ。

git add

コミット

メッセージ領域にメッセージを入力し、Enterを押下するか、コミットボタンをクリックする。
または、"..." ボタンの "コミット" メニューから適切なコミットを選択する。

ターミナルで以下のコマンドを実行するのと同じ。

git commit -m "メッセージ"

プッシュ

"変更の同期"ボタンをクリックするか、"プッシュ" メニューでコミットされた内容をプッシュする。

GitGraph

GitGraphプラグインを使用して状態を確認する。ステータスバーの "GitGraph" をクリックする。
まだ、マージがされていないのでブランチAとmainブランチが繋がっていない。

ここで、mainとorigin/mainがあることに注意する。originが付いているのがリモートで、付いていないのがローカルである。つまり、この樹形図では赤がリモート、青がローカルのmainで、右側にカーブしており、Aブランチはローカルで直線上にある。

プルリクエスト

ブランチ発行後に右下に表示されるメッセージの "Create Pull Request" ボタンをクリックするか、
サイドバーのCOMMITSにある"Up to date with origin on GitHub" の　”Create Pull Request” アイコンをクリックする。

"Create Pull Request on GitHub" でGitHub Webでの操作でプルリクエストを作成することも可能である。
ここでは"Create Pull Request" をクリックし、GitHub Webを使わずにプラグインのみでプルリクエストを作成する。

アクティビティーバーの"GitHub Pull Request"アイコンをクリックする。
必要であれば ”DESCRIPTION" にメッセージを記載する。"Create"ボタンをクリックする。

レビューアーとの同意があれば、"Merge Pull Request"ボタンでマージリクエストを発行する。

ここで、コンフリクトを体験するため、マージコミットする前に、あえてBさんの操作を実施する。

Bさんの操作

クローン

"リポジトリのクローン"ボタンか、"Git リポジトリのクローン"リンクをクリックする。

中央の入力欄にクローンするURL "https://github.com/＜アカウント＞/kame.git" を入力し、Enterを押下する。

リポジトリの場所を選択する。
Bさんが kame リポジトリをクローンする。
/Users/ss/Projects/kame_B

ターミナルで以下のコマンドを実行するのと同じである。

cd /Users/ss/Projects/kame_B
git clone https://github.com/＜アカウント＞/kame.git

ブランチの作成

ここでは、Bブランチを作成する。

"..." ボタンの "ブランチ"メニューから"分岐の作成"を選択する。

入力蘭にブランチ名"B"を入力し、Enterを押下する。

左下のステータスバーに"B"と表示され、ブランチがチェックアウトしていることが分かる。

ターミナルで以下のコマンドを実行するのと同じである。

git checkout -b B

Bさんのソース修正

ソース修正（顔を追加）

アクティビティーバーのエクスプローラーをクリックし、以下のように修正する。
materialフォルダー内の、face2.pngをコピーする。 KAME フォルダーに貼り付ける。
KAME/index.html のコメント（<-- -->）を削除する。
6行目を以下のように変更する。

    img.content2{position:absolute; top:2px; left:8px; z-index: 2; }

11行目の "face1.png" を "face2.png" に変更する。

実行イメージ

一時退避

"..." ボタンの "一時退避" "一時退避(未追跡ファイルを含む)"メニューから変更を一時退避しておく。

ステージング

"全ての変更をステージ"で変更をステージングする。

コミット

メッセージ領域にメッセージを入力し、コミットする。

ソース修正（甲羅を追加）

アクティビティーバーのエクスプローラーをクリックし、以下のように修正する。
materialフォルダー内の、shell.pngをコピーする。 KAME フォルダーに貼り付ける。
KAME/index.html の
7行目に以下の行を追加する。

    img.content3{position:absolute; top:67px; left:24px; z-index: 3; }

13行目に以下の行を追加する。

    <img src="shell.png" class="content3">

実行イメージ

一時退避

"..." ボタンの "一時退避" "一時退避(未追跡ファイルを含む)"メニューから変更を一時退避しておく。


一時退避からの戻し。

ステージング

"全ての変更をステージ"で変更をステージングする。

コミット

メッセージ領域にメッセージを入力し、コミットする。

ブランチの発行

ブランチを発行する。

GitGraph

GitGraphで状態を確認する。

Aさんがマージの実行

ここでAさんが"Create Marge Commit"をクリックしてマージコミットする。

GitGraph

GitGraphで状態を確認する。ブランチ A が main にマージされている。

Bさんの修正がコンフリクト

プルリクエストの発行

Bさんがプルリクエストを作成する。"Create"ボタンをクリックする。

コンフリクト

"This Branch has conflicts that must be resolved" と表示され、プルリクエストがコンフリクトしていることが分かる。

GitHub上で確認。

Bさんのコンフリクト回避

修正をリセットする

前回のコミットを元に戻す。顔の追加と甲羅の追加の修正を戻すため、２回実施する。

すべての変更のステージング解除

すべての変更を破棄

ターミナルで以下のコマンドを2回実行するのと同じである。

git reset --hard HEAD

mainの修正を取り込む

mainを指定元として、プルする。Aさんの修正と同じ状態となる。

一時退避内容を適用

最新の一時退避内容（甲羅を追加）を適用する。

このようなメッセージが表示され、そのまま適用できないので、修正が必要である。

以下のようなコンフリクトが発生していることが分かる。

ソース修正

"Accept Current Change(現在の変更)" "Accept Incomming Change(取込元の変更)" "Accept Both Changes(両方の変更)" のうち、いずれかを選択する。
ここでは、両方の変更を適用した後、必要な箇所を残す方針とする。
まず、"Accept Both Changes(両方の変更)"をクリックする。

変更をステージングする。

変更をコミットする。

変更の同期ボタンで、変更をプッシュする。

必要な箇所を残す。

変更をステージングする。

変更をコミットする。

実行イメージ

ブランチの発行

変更の同期ボタンで、変更をプッシュする。

プルリクエスト発行

アクティビティーバーの"GitHub Pull Request"アイコンをクリックする。
ブランチBでコンフリクトを解消したマージコミットのメッセージ "Marge branch 'main' of ... into B" が確認できる。
レビューアーとの同意があれば、"Merge Pull Request"ボタンでマージリクエストを発行する。

Bさんがマージの実行

マージの実行

"Create Marge Commit"をクリックしてマージコミットする。

GitGraph

GitGraphでA、Bの変更が main に反映された状態を確認する。

以上