Git + VScode + GitHub 覚え書き(その2)
オンラインプログラミングスクールでのGit講座2日目。わかってきた分だけでもメモ!
昨日の復習も含めて書いたら、長文になってしまいました。
(昨日:1日目→ https://note.com/ocha_green/n/n4f2200399859 )
※Windowsの場合です(OSによって結構違うっぽい)
※間違い見つけたらご指摘いただけると励みになります!
※プログラミングスクール…https://sunabaco.com/
【昨日の復習…】
1.新規ファイル作成→→→自分の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行ずつ実行
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)
【今日はここから】
2.誰かと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.ブランチで作業して統合する(世界線)
※一人なら気にしないけど、複数名で作業するときは、自分だけの別の作業場所を用意しておき、後から合体させたりしたくなる。
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)
(更新されてた…良かった!)
4.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上でのコンフリクトとか仕組みもわかった!よかった~!!
以上。
この記事が気に入ったらサポートをしてみませんか?