１人でしか使ったことないgithubを一通り復習してみる

# 記事を書こうと思った背景

業務でgitLabを使う機会があったのですが、チームで使用したことはなく、マージやコンフリクトを実際に手を動かして勉強したいという意思でこの記事を書きます。また、githubを勉強しようと思ったのはkaggleコンペチームでgithubを紹介してほしいということでしたので挑戦します。

github初心者が実際に使用できるレベル感で記事をまとめます（使用はできるけどコマンドの説明は触れないので調べていただけると幸いです）。
また、githubの環境がすでに構築されている方向けの記事となります（コマンド実行はgit bashを使用します）。
githubのインストール、vimの使い方については省略させていただきます。

知見のある方で、誤りや認識違いがありましたらご指摘いただけると幸いです。



現在の自身のレベル感として、

* リポジトリなどgithubの概念は理解はできている
* 一人での作業（以下のコマンドなど）であれば問題なく使用できる（コマンドを調べれば・・・）

現在、Githubで使用できるコマンドは以下です。

* git init
* git add
* git commit
* git push 

今回使用した環境は以下です。

* windows10
* git version 2.16.2.windows.1
* webブラウザ: Chrome 91.0.4472.77（Official Build） （64 ビット）
* vim


#目次

* githubで管理するディレクトリを作成
* githubで管理するファイルを作成、`$git add`を実行(`$git status`)
* commitを行う(`$git commit`)
* githubでリポジトリを作成
* 作成したファイルをgithub上に公開する(`$git branch`, `$git remote add...`, `$git push`)
* ブランチを切る(`$git checkout`)
* マージする際にコンフリクトを起こす(`$git merge`)※失敗
* コンフリクトを解消する（`$git reset`）※使用方法、注意

## githubで管理するディレクトリを作成
まず、自分が作成したいフォルダに移動して、githubで管理するディレクトリを作成します。

```
$ mkdir <ディレクトリの名前を指定>
```

その後、作成したディレクトリ内で`$git init`を実行します。

実際に実行したgit bash画面は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/9d717ac1-aab7-e87f-b986-0f39d27c01da.png)

エクスプローラでフォルダ内を確認すると、`.git`ファイルが作成されます。

また、git bush上で`$ls -a`を使用すると`.git`が作成されていることを確認できます（色が見えづらいのは申し訳ないです）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/944a6881-fbf8-89aa-cf32-72c4267e1d2a.png)

## githubで管理するファイルを作成、`$git add`を実行(`$git status`)

ここではgit bash上で`vim`を使用して、githubで管理するテキストファイルを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/1001c7b9-46d7-5a32-8d8a-911106c038f0.png)

`$cat`を使用して作成したテキストファイルを確認します。
ここでは`hellow github!`というテキストを記載しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/c847c353-b3ff-37e0-7b75-0491187221ab.png)


ここで、`$git status`を使用して、直近のコミットからの変更を確認してみます。
先ほど作成した`sample.txt`が赤文字で表示されています。
このファイルはまだgithub上で管理されていないことを示しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/e45f7f13-3f0d-98db-1c1f-f7fe6cf390f4.png)

`sample.txt`を`$git add`すると、以下のようにステージングされたことが分かります。
`sample.txt`が緑色で表示されていることがわかります。この状態でcommitする準備が整いました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/375bee05-7db0-1d4b-8ed5-5b91205944f6.png)

## commitを行う(`$git commit`)
以下のように`$git commit`を使用してcommitを実行します。
また、`$git status`で変更履歴がどうなったかも確認しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/37d4e4f4-34a8-8189-ab1f-c993ef4a427c.png)

## githubでリポジトリを作成
webブラウザ上でgithubのページを開き、リポジトリを作成します。
赤く囲んだ`+`のところで「New repository」を選択し、以下の内容でリポジトリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/160eef54-735c-dfe7-1464-3be887423db7.png)

## 作成したファイルをgithub上に公開する(`$git branch`, `$git remote add...`, `$git push`)
github上でリポジトリが作成できると、以下のような画面が表示されます。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/4723e9db-edf5-a99f-97d8-703198e679da.png)

今回は`$git commit`までを実行したので、ブランチ`main`を作成し`$git push`を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/701125c1-32a9-0379-e9c0-64a382dfe794.png)

webブラウザに戻って作成したリポジトリを確認すると、先ほど作成した`sample.txt`がgitnub上に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/3d93064d-2735-9f41-0365-1c236f975dc5.png)

## ブランチを切る(`$git checkout`)
`$git branch`を使用して、現在のブランチを確認します。
その後、`test`という名前のブランチを作成し、そこに移動します。
実行した結果は以下です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/a27b55bc-c50a-64a7-1188-c75628320468.png)


ここで、以下のコマンドを使用して、testブランチに`test.txt`をコミットしてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/0cd3441a-4bf2-b4d7-0880-91a73f9f86f3.png)

webブラウザ上で

* 新たにtestブランチが作成されている
* testブランチだけに`test.txt`がコミットされている
* mainブランチには変更がない
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/f5b2b765-db2a-ebaa-5080-fbdeeeaa38e5.png)

ことを確認できると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/4b8babb9-d77d-05b5-e4d7-e09805f4a0ab.png)

 
## マージする際にコンフリクトを起こす(`$git merge`)※失敗
まず、コンフリクトを起こすために、testブランチで`sample.txt`を編集します。
`sample.txt`の中身を、hellow github! から hellow world! に変更してgithubにコミットしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/a91ee3f7-4e14-54a8-e593-bfef80ab6df8.png)

次にmainブランチで`sample.txt`を編集してgithubにコミットしました。
`sample.txt`の中身を hello github! から helow Japan! に変更しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/b6d5f4cb-6154-2a26-f688-a52483d10522.png)

そして、コンフリクトを発生させたいと思います。
testブランチに移動して、`$git merge`を実行してみます。すると以下のようにコンフリクトを起こしていることが確認できると思います（初コンフリクト体験中です）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/5164f775-f105-b439-44c3-18b9336f726c.png)

## コンフリクトを解消する（`$git reset`）※使用方法、注意
今回はmainブランチとtestブランチの`sample.txt`を同時に変更しました。
そのため、マージしようとするとコンフリクトが発生してしまい、失敗してしまいます。
そこで、testブランチの変更をmainブランチに反映したいと思います。
`vim`（エディタでも可）で`sample.txt`を開きます。すると、以下のようなファイル内容になっていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/4f501d7b-9bb4-e26e-1c7a-6b15596d7fcc.png)

上のgit bash から以下のテキストを削除します。

* <<<<<<< HEAD
* =======
* hellow Japan!
* >>>>>>> main

testブランチの`sample.txt`は以下のように編集できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/294b238d-07a2-8578-61da-988768942ab6.png)

その後、commitを行いますが、失敗してしまいました。どうやらマージする前にpushしてしまったのが原因でした。
これは業務で行ってしまうと怒られてしまいますね（まずっ）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/6dea7340-e3ed-e8ea-ee0e-813c759525de.png)

この問題を解決していきます（解決方法はあまりよくない例です、おそらく）。
`$git log`で変更履歴を確認します。以下のようになっているため、直前のコミットHEADを削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/50a416db-c01a-dde8-f70f-db28b326f9da.png)

先ほどのミスをしたコミットを削除することができたのを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/c5026cbe-1899-0ec2-9e81-a461df046b11.png)

testブランチで`sample.txt`の中身を、hellow github! から hellow world! に変更します。
`$git add'と'$git commit`まで行います（`$git push`はまだしません）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/afd29389-e291-5518-013b-905d9b24a3e7.png)

この後、mainブランチに移動して、testブランチ同様、直前のコミットを削除します。
そして`sample.txt`の中身を hello github! から helow Japan! に変更します。
ここでもtestブランチ同様、`$git add'と'$git commit`まで行います（`$git push`はまだしません）。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/aa9d0e2e-3609-d6b5-c9a2-2914e4f67f50.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186902/99000632-ed7b-b81c-7d2e-a8b3d2a713bc.png)

これで一応問題解決です（手段はおそらく良くないです、正しい記事を参照してください）。

## 参考文献

https://yutori-datascience.hatenablog.com/entry/2017/07/25/163702

https://www-creators.com/archives/2020


## 最後に
今回はここまでで勉強をいったん終了します（マージができなかったですが・・・心が折れました）。
知見のある方で、誤りを見つけた際はご報告いただけると幸いです。

### 念のため
今回使用したgithubのリポジトリです。

https://github.com/natsupon/gitnub_tut/tree/test