Git + VScode + GitHub 覚え書き（その2）

オンラインプログラミングスクールでのGit講座2日目。わかってきた分だけでもメモ！

昨日の復習も含めて書いたら、長文になってしまいました。

（昨日：1日目→　https://note.com/ocha_green/n/n4f2200399859　）

※Windowsの場合です（OSによって結構違うっぽい）

※間違い見つけたらご指摘いただけると励みになります！

※プログラミングスクール…https://sunabaco.com/

【昨日の復習…】

１．新規ファイル作成→→→自分のGitHub（リモートリポジトリ）へプッシュする

・git用フォルダ（ディレクトリ）（ローカルリポジトリ）を作る

コマンドプロンプトで、git用フォルダを作り、作ったフォルダへ移動（移動はcd、フォルダ作成はmkdir）

※フォルダ名「20200602-2」

・作ったフォルダをローカルリポジトリにする

git init

・Git管理するファイルを作る

VScodeで、今作ったフォルダを開き、index.htmlを作成して保存（中身は適当に作っておく）。このファイルのステータスは「U」

・ステージングからコミットまで

コマンドプロンプトで、

git add index.html

git commit -m "新規作成"

git log

・リモートリポジトリを用意する

GitHubに新しいリポジトリを作る。（既存のを使ってもいいのかもしれない。が、今の私にはそんな余裕は無い…）

Repository name  →　何か名前を付ける（今回は「20200602-2」）

Public / Private →　Private

Initializeうんぬん　→　チェックしない

Create repository　を、クリック

すると、こんな感じの画面が表示される

青枠は、リモートリポジトリの場所（＝この画面のURLでもある）

赤枠内の2行は、この後ファイルのプッシュに使うコマンド（GitHubが親切に載せてくれている）

・リモートリポジトリにファイルをプッシュする

コマンドプロンプトで、赤枠内のコマンドを1行ずつ実行

１行目（自分のGitHub画面からコピって！！）

git remote add origin https://github.com/xxx/20200602-2.git

2行目

git push -u origin master

2行目のほうは少し時間がかかるが、じきに終わる。

※git push の後に -u を入れておくと、次回からgit push だけでプッシュできるようになる、とのこと（←まだ意味が理解しきれていない）

GitHubで、リモートリポジトリの画面を更新する（更新はF5）

こんな感じの画面になれば、リモートリポジトリにファイルをプッシュできている。（OK）

【今日はここから】

２．誰かとGitHubでファイルを共有したい！

※相手が相手自身のGitHubリポジトリにプッシュしたファイルを、自分が受け取る、場合。

2-1.確認

→相手のGitHubのリポジトリが「Public」の場合、相手のGitHubのリポジトリへアクセスする。（リモートリポジトリのURLを教えてもらう）

→相手のGitHubのリポジトリが「Private」の場合、相手のGitHubのリポジトリに招待してもらう。

・相手に、自分のGitHubのアカウント名とメールアドレスを伝え、招待してもらう。

招待する方法：

GitHubで、Setting → Manage access → Invite → <入力> → add

メールボックスで、GitHubから届いたメールを開き、相手のGitHubにアクセスする。（メールは、View invitation　という表示になっているかも）

2-2．ファイルをクローンする（もらう）

・GitHubで、リポジトリのURLをコピっておく（後で使う）

・コマンドプロンプトで、相手のリポジトリをクローンするフォルダ（ディレクトリ）を作る

※自分の作業フォルダとは別の場所を用意。（同じ場所に置くとややこしいので分ける）（フォルダ作成はmkdir）（今回は「git_clone_test2」）

今作ったフォルダに行く（cd ）

・クローンする

git clone さっきコピった相手のリポジトリのURL

（コピーしたURLが無くなっちゃってたら、GitHubでもう一度コピーすれば良し）

さっき作ったフォルダ（「git_clone_test2」）に、ファイルがクローンされる。

2-3．相手方のファイルの中身を変更し、GitHubにその変更を反映させる

・コマンドプロンプトで、今VScodeで編集したファイルのあるフォルダへ移動（cd）

git remote -v

すると、クローンしてきたファイルは既に紐づけされているのがわかる

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

・VScodeで、クローンしたファイルを開き、編集して上書き保存する。（行を追加したり書き換えたりとか）

ステータスは「M」になる。

差分はこんな感じに見える

・コマンドプロンプトで、

プッシュして

git push

ステージングして

git add index.html

コメントを付けてコミットして

git commit -m "こんばんは～（すみなべ）"

ログを確認

git log

・相手のGitHubにプッシュする。引き続きコマンドプロンプトで、

git remote add origin 相手のGitHub（リモートリポジトリ）のURL

git push -u origin master

※もし、「fatal: The current branch master has no upstream branch.」が出てきたら、以下の呪文を唱えると上手くいく（前回同様）

git remote rm origin

・相手のGitHub（リモートリポジトリ）の画面を更新すると（F5）

更新が反映されている。

３．ブランチで作業して統合する（世界線）

※一人なら気にしないけど、複数名で作業するときは、自分だけの別の作業場所を用意しておき、後から合体させたりしたくなる。

3-1.ブランチを作る

・コマンドプロンプトで、今いる場所を確認

git branch

・ブランチを作る

git branch test

git branch

・ブランチへ移動する

git checkout test

git branch

3-2.ブランチで作業する

ブランチにいる状態で、

・VScodeでindex.htmlファイルを変更し、上書き保存する。

・コマンドプロンプトで、

git add index.html

git commit -m "ブランチで作業しました"

git log

VScodeを見ると、ファイルが消えている

3-3.Gitにファイルをプッシュする

・引き続きコマンドプロンプトで、

git remote add origin 相手のGitHub（リモートリポジトリ）のURL

※もしfatal…が出たら、 git remote rm origin

git push -u origin master

3-4.ブランチをマージしてファイル更新を反映する

・引き続きコマンドプロンプトで、ブランチからマスターへ移動

git checkout master

・ブランチを合体（マージ）

git merge test

git log

・相手のGitHub（リモートリポジトリ）へプッシュする。引き続きコマンドプロンプトで、

git remote add origin 相手のGitHub（リモートリポジトリ）のURL

※もしfatal…が出たら、 git remote rm origin

git push -u origin master

・GitHubで、相手のリモートリポジトリの画面を更新すると（F5）

（更新されてた…良かった！）

４．Git上でコンフリクトしちゃったら

※masterとブランチで同時にファイル変更のプッシュをしたら、変更が重なってコンフリクトを起こしてしまいます！！

4-1.わざとコンフリクトを起こしている状態を作る

・master側

作業フォルダをmasterへ移動する。コマンドプロンプトで、

git checkout master

ファイルの内容を変更する

VScodeで、index.htmlファイルに何か変更を加える。（pタグで一行追加するとか）

コマンドプロンプトで、

git add index.html

git commit -m "masterで編集"

git log

・testブランチ側

作業フォルダをtestへ移動する。コマンドプロンプトで、

git checkout test

ファイルの内容を変更する

VScodeで、index.htmlファイルに何か変更を加える。（pタグで一行追加するとか）

コマンドプロンプトで、

git add index.html

git commit -m "testブランチで編集"

git log

・testブランチからmasterへ戻る

git checkout master

マージしようとする

git merge test

と、コンフリクトの完成！！

Auto-merging index.html
CONFLICT (content): Merge conflict in index.html
Automatic merge failed; fix conflicts and then commit the result.

（index.htmlを自動マージしようとしましたが、コンフリクトしているので、できませんでした。コンフリクトを（手動で）修正してから、その結果をコミットしてください）

4-2.コンフリクト状態の確認

VScodeを見ると、コンフリクトした箇所が表示されている。

※コンフリクトの詳細を見るには、

「Compare Changes」をクリック

すると、どこがコンフリクトしているのかわかる

4-3.コンフリクトを解決する

解決方法は3パターン。VScode上で、いずれかをクリックする。

 - Accept Current Change → Current （HEADのほう）だけを反映

 - Accept Incoming Change → Incoming（testのほう）だけを反映

 - Accept Both Changes → 両方とも反映

今回は両方とも反映させてみた（Accept Both Changesをクリックして保存）

※この状態で状況を確認すると（コマンドプロンプトで git status を実行すると）、赤文字で both modified: index.html となっていた。

git add index.html

git commit -m "マージした"

git log

4-4.GitHubにプッシュする

・相手のGitHub（リモートリポジトリ）へプッシュする。引き続きコマンドプロンプトで、

git remote add origin 自分のGitHub（リモートリポジトリ）のURL

※もしfatal…が出たら、 git remote rm origin

git push -u origin master

・GitHubの画面を更新すると（F5）

変更が反映されている

※GitHub上でコンフリクトした場合も確認しようと思ったけど、できなかった→できた

GitHub上でのコンフリクトは必ず起こるそうなので、楽しみにしています…

（とりあえず、まっちまさんとオシャレラジオDJさんのGitHubでファイル更新してみよ…）

→（2020/6/4追記）GitHub上でのコンフリクトとか仕組みもわかった！よかった～！！

以上。