概要
Gitとは何か？ GitHubとは何か？ も分かってない人に向けて、直感的にGitで何ができるかを理解するためのチュートリアルである。
VSCode で GUIによる GitHub の操作を前提としている。
もちろん、慣れればコマンドによる操作の方が手に馴染むし、理解も深まるということは承知の上だが、
初心者にはGUIの方が理解しやすいと思うので、GUIを前提としたチュートリアルとした。
このチュートリアルでは、Gitの機能や用語については概要にとどめ、詳しい解説はしない。
リポジトリの準備
本チュートリアルはGitHubのアカウントを持っていることを前提としている。GitHubアカウントを持っていない方は、GitHubの公式ドキュメントや解説サイトなどを参考にアカウントを取得して欲しい。また、準備として、 ”https://github.com/SingularitySociety/kame” にアクセスし、"Use this template"ボタンで、テンプレートから各自のログインしたアカウントにコピーして、進めていただきたい。各自のURLのアカウント名の部分を＜アカウント＞として表記する。
Gitとは
Gitはソフトウェアのバージョン管理ツールである。
例えば、OSSのように、ソフトウェアを複数のバージョンで並行して開発しているような状況で、複数の開発者が好き勝手に改修をしても、誰がどのバージョンのどの部分を改修したかの完全な履歴を残し、破錠なくリリースできるようにするためのツールである。
GitHubとは
GitHubは、文字通りソフトウェアの管理にGitを使用しているホスティングサービスである。
ソフトウェアの改修を依頼するプルリクエスト（プルリク、PR）はGitではなく、GitHubの用語である。
VSCodeとは
Visual Studio Code(以下VSCode)はマイクロソフト社が提供する無料、オープンソースの開発環境で、ソフトウェアの開発に必要なエディタやデバッガを備えている。
豊富なプラグインにより、より広範な機能を追加できることが特徴である。
このチュートリアルでは、VSCodeの標準のGit機能を使用したチェックアウトやコミット、プッシュ、プルといったリポジトリ操作の実践と、プラグインを使用してバージョン管理の可視化（プラグイン：Git Lens、Git Graph）、GitHubへのプルリクとマージ（プラグイン：GitHub Pull Request）を実践する。
VSCode画面の説明(基本)
-
アクティビティーバー
標準の機能やプラグインのアイコン。 -
サイドバー
アクティビティバーで選択した機能の内容を表示。 -
エディター
ファイルを表示、作業する画面。 -
パネル
ターミナル、警告やエラー内容、デバック情報などを表示。 -
ステータスバー
各種情報を表示。プラグインによる情報もある。
VSCode画面の説明(Git関連)
アクティビティーバーの"ソース管理"（アイコンの上にカーソルを持っていくと”ソース管理"と表示される）をクリックする。
- ソース管理メニューの管理メニュー
ソース管理の各種情報の表示、非表示を選択する(Git Lensによる拡張が含まれる)。 - ソース管理メニューの各種メニュー
Gitコマンドを実行するためのメニュー - ソース管理アイコン
- ✔︎ 標準のコミットアイコン
コミットを実行する。 - GitHub プラグインのアイコン
プルリクエストを作成する。 - Git Graph プラグインのアイコン
履歴をビジュアルに表示する。
- ✔︎ 標準のコミットアイコン
- コミットメッセージ
コミットのメッセージを記載する。Enterでコミットを実行する。
VSCodeの初期設定
VSCodeを https://code.visualstudio.com からインストールし、以下のプラグインをインストールする。他にも便利なプラグインが多数あるが、Git関連の主なもの３つに留める。
Github Pull Requests and Isues
Git Graph
Git Lens
環境によっては、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 に反映された状態を確認する。
以上
人工知能を活用したアプリケーションやサービスを活用し、内発的動機付けで行動するエンジニア、起業家、社会起業家をサポートするコミュニティーです。 singularitysociety.org
Discussion