【備忘録】GitとGithubの基本知識

本記事は上から読んでいくだけで、GitとGithubの基本知識が学べるようになっています！
少しでもお役に立てれば幸いです！

また本記事ではGitとGithubを使用するので、「Gitのインストール」と「Githubのアカウント作成」を事前にしていただく必要があります。是非以下の記事も参考にしてみてください！
https://qiita.com/moonbass630/items/2084edb250feef88f15f

#1.ひとりで開発編！
まずはGithubでリモートリポジトリを作成しましょう！
今回は「git-test」という名前で作成したいと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1f703711-9683-8493-e240-f403c6cb2309.png)

ちなみに「リモートリポジトリはGithubで管理」、「ローカルリポジトリはGitで管理」というイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/73fbb4c0-99da-b65b-4fab-a00c0b68d646.png)




保存したら以下のようにリモートリポジトリのURLをコピーしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/ce997fe1-48d7-384f-98a1-5a57266b71b0.png)


ではまず、以下のコマンドを実行し、リモートリポジトリをコピーしてローカルに同じリポジトリを作成してみましょう。「git clone」の後ろには先ほどコピーしたリモートリポジトリのURLを貼り付けてください。
（今回はデスクトップ上にフォルダを作成したいので、デスクトップまで移動してからコマンドを実行します。）

```
$ git clone https://github.com/moonbass630/git-test.git
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/f0fb2520-15ca-8383-e74d-6e6841413fd8.png)



以下のように「git-test」というフォルダが作成されていればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1b4ef47e-9e2d-6c14-170b-42a5a085e25d.png)


次にcloneしたフォルダ内で「file1.txt」、「file2.txt」を作成します。
今回はVSCodeを使用していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/78a3cbfb-8ed4-6362-b394-731f8020e300.png)


保存した後に以下のコマンドを実行してみましょう。
こちらはGitの状態を見るためのコマンドです。

```
$ git status
```

赤字のファイル名が見えますが、
これは作成したファイルがまだGitに管理されていない状態を表しています。
要はローカルリポジトリに保存されていない状態です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/6277e0b1-5049-828d-8613-f715a8029b08.png)


そんな時はまず以下のコマンドを実行します。

```
$ git add ファイル名
```

以下のコマンドを実行することで、作成した「file1.txt」がGitの管理下に移ります。
これをステージングと言います！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/91056eb7-3550-203e-80b7-71f424bd0aeb.png)

実際にステージングされたファイルは緑色で表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/19005aeb-8f5c-e56b-f315-c6a2eb9fd1ba.png)

またカレントディレクトリの全てのファイルをGitの管理対象にするのが以下のコマンドになります。
便利なので覚えておきましょう。

```
$ git add .
```
実行すると「file2.txt」もステージングされたのが分かると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/519a5fb6-10d9-05e5-fbff-9e5819ddd5c0.png)

いよいよファイルをリポジトリに保存したいと思います。
以下のコミットコマンドを実行すると保存できます。「メッセージ」にはメモ感覚で、コミットの内容をメモすることができます。今回は「初めてのコミット」としておきます。

```
$ git commit -m "メッセージ"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/9e9e4d8b-1f64-6270-e1d1-26993c4e9d62.png)

以下のようなメッセージが出ればOKです！
「git status」で確認してみてもファイル名が表示されていないことが分かるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/28adc4ca-5530-dd1c-3c18-720d8d096ce6.png)


では次に「file1.txt」を修正し、「git status」で確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/3bac51dd-57d5-fec4-2560-537cfeafb98c.png)

「file1.txt」が修正されていることをgitが検知していることが分かると思います。
これはgitが以前にコミットしたファイルの履歴をコミットしたタイミングで保存しているからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/19b1a265-6b67-c091-7ba7-626578063c91.png)

では続けてステージングとコミットを実施します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/c45e89f6-dee6-f33c-e22c-9eeaadafc64b.png)

ちなみに以下のコマンドでgitの履歴を確認することができます。

```
$ git log
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/9799fe73-b43d-84f8-ccde-2977f991ba46.png)



では次に「リモートリポジトリ」にローカルリポジトリでコミットした内容をアップロードしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/aa11d025-4af4-191b-776f-81051a2ff99c.png)

ご覧のようにgithubを確認しても、まだ何も起きておりません。
空のリモートリポジトリ「git-test」があるだけでです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/ff1679ff-c230-6794-cbfe-13f86a6e08d4.png)

アップロードするコマンドは以下になります。
「origin」はリモートサーバーを意味します。

```
$ git push origin
```

以下のようなメッセージが出ればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/9724d382-6df4-5781-1b29-6b8f758369e1.png)

ではgithubを確認してみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/76c5a7f3-108d-e7ad-4d29-abba3e0e6cf0.png)

「2commits」をクリックするとコミットの履歴が見れます。
色々自分で確認してみてください！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/89864742-60fd-2bff-8b22-45b3d2dd3dbc.png)

ちなみに今、こういう状態になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/de97f2c5-4891-b15d-36a5-cdfc2e52d837.png)



#2.共同開発編！

では次に以下のように他のデベロッパー「B子」も作業するために、「git clone」を実行しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/17ab57d1-a068-97b5-76f1-ab0d52b3a1e1.png)

今回はパソコンが２台ないので、同じパソコンにB子のローカルリポジトリを作成します。
ローカルリポジトリの名前は変更も可能なので、分かりやすいように「git-b」にしようと思います。
コマンドは以下のようになります。

```
$ git clone https://github.com/moonbass630/git-test.git git-b
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/4d0385ef-02f1-42a3-855e-9e3d27b5d03e.png)

以下のように「git-b」のフォルダができていればOK!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1e9a000e-d711-83ef-84ef-b9c994833c09.png)

ちなみに今、こういう状態になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/bdd43704-dd4f-03f9-5888-2358d656b7f8.png)


ではB子で「git log」を実行してみましょう。
（※「git-b」フォルダに移動して、gitコマンドを実行してください。）
以下のようにB子からでもA太郎のコミット履歴を見ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/e6b2091e-a1ea-36a8-07fa-dd271446b45e.png)

次にB子から「file1.txt」を編集してコミットしてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/625a84e8-4d48-84d3-c284-860bd507e51e.png)

「file1.txt」には「３回目の編集です。」と追記して保存しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/07093f61-20fd-d8c3-2009-3c77d2f00dd3.png)

「git add」と「git commit」を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/3c538705-706d-d751-c3cb-86d744c6f2ea.png)

「git push」もしてあげましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/284a4dd5-39dc-02e8-131d-bb1ef0c7625f.png)


コマンドはこんな感じです。

```
$ git add .
$ git commit -m "３回目のコミット"
$ git push origin
```

では次にA太郎もリモートリポジトリにある最新のファイルを手に入れましょう。
前回はローカルリポジトリを作成する際に「git clone」を使用しましたが、
こちらは新規にリポジトリを作成する場合に使用します。
今回は既に「git-test」リポジトリはあるので、別のコマンドになります。

```
$ git pull origin
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/0b4a190c-d17e-065d-c9c1-907975f52f34.png)


「git pull」実行前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/b596c87c-39ca-2d67-d4b3-f4b147bf1109.png)

「git pull」実行後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/33543e7d-0812-7049-e307-4302d7cd0a85.png)

試しに「git log」で確認してみたいと思います。
B子の３回目のコミットが確認できるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/151316de-b277-22f5-7d95-1ac164431079.png)

#3.共同開発編！（応用）

ここからはケーススタディ形式を少し取り入れて考えていきましょう！

A太郎は「システムG」を運用している。ある日「システムG」の修正が必要になり、
B子に依頼したとしましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/ac76f4fe-deba-af71-4153-88c7cf29ccb2.png)

しかしこれまでのようにB子が本番環境で使われるソースファイルを「git clone」して修正し、「git push」してしまうとA太郎が確認できないまま本番環境で使われるソースファイルが書き変わってしまいます。もしB子の修正に誤りがあるとかなり危険です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/4ef5b7c0-70ce-abf5-b743-6a2e12eb1e03.png)

そこで「ブランチ」という機能を使用します！
ブランチの説明ですが、まずこれまでにリモートリポジトリへ「git push」した時のコミット履歴を見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/c7a4d0f4-6bc9-2fd2-b309-d3a84df9f6d4.png)

「初めてのコミット」から「３回目のコミット」まで枝のように繋がっていますね！
そうこれがブランチなんです！そして左上にある「master」と記載されいるのがブランチ名となります。
「ブランチ」を一言で表現すると、「コミットの履歴を管理しているもの」って感じでしょうか。

以上を踏まえた上で、以下の流れに沿ってB子には作業を進めてもらいましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/4ac7b02e-95c4-237e-4e47-e3f455ea9efd.png)


①まず本番環境で使われるソースファイルが入っているリモートリポジトリをmasterブランチから「git clone」コマンドを実行し、ローカルリポジトリを作成しましょう。
②次にローカルリポジトリ内で「git checkout」というコマンドを実行し、
図のように新しく「develop」と言うブランチを開発用として作成します。
③これによりB子は修正、コミットを繰り返しても「master」ブランチの中身は書き変わらず、
「develop」の中で修正とコミット履歴を管理することができます。
④修正した「develop」ブランチにあるソースファイルを「git push」します。
⑤するとリモートリポジトリには「develop」ブランチと修正したファイルが保存されます。

では①「git clone」はもう実行したとして、②の「git checkout」からやっていきましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/8c35d780-e7b2-d678-cc43-108cff7744a7.png)


まず以下のコマンドで自分が今どのブランチで作業しているか確認しましょう。

```
$ git branch
```
「master」ブランチにいることが確認できたと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/8f58554a-2013-9972-cd20-8a1de0d4e266.png)

次に以下のコマンドでブランチ「develop」ブランチの作成と、作業する場所を「develop」ブランチに変更しましょう。

これは「git checkout -b」で「develop」というブランチ名で「master」ブランチからブランチを切るという意味になります。

```
$ git checkout -b develop master
```
「git branch」で確認し、以下のようになっていればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/2c7f34eb-1400-c6a0-ad9e-452800dc64dc.png)

また「master」ブランチに作業場所を変えたい場合は、以下のコマンドで戻れます。

```
$ git checkout master
```
以下のようになればOKです！
では「git checkout develop」を実行し「develop」ブランチに戻っておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/3be2ddb3-ba1b-ad16-a5c4-1a0175449827.png)


次に③「修正」、「コミット」と④「git push」を実施してみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/27440cc2-078d-2454-7945-d7e242a6f9f2.png)



「file1.txt」に修正を加えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/05002b1c-fd32-7b59-7889-b956634e05ca.png)

次に「ステージング」と「コミット」をしましょう。

```
$ git add .
$ git commit -m "4回目のコミット"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/841b9044-a965-3266-2dea-d7411284d015.png)

そして次に以下の「git push」コマンドでローカルリポジトリにある「develop」ブランチをリモートリポジトリにアップロードしてあげましょう。

```
$ git push origin develop
```

このようなメッセージが出ればOKです！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/3984d24c-046b-ff0a-0a04-c414b242cc2b.png)

これで以下のように、現在リモートリポジトリもローカルリポジトリのような状態になっているはずです。
ではGithubから⑤リモートリポジトリを確認してみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/41900e4b-e864-362c-b555-e5760ff46c6f.png)

「develop」が作成されていることが確認できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/f13d2740-0990-dcfb-2cdd-1820df8d1642.png)

以下のようにB子の修正「４回目のコミット」が確認できます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/ac5484d6-5717-068c-fd53-7ee5e496c800.png)


では次にA太郎の作業を確認していきましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/dbf1a4fc-1fe3-393f-b6e0-05a51e3145e1.png)


①A太郎はB子が修正したソースファイルを確認しなければならない、言わばViewer（ビューワー）なので、「git pull」でローカルリポジトリに「develop」ブランチをダウンロードします。
②もし修正に問題がなければ、ローカルリポジトリ内で「master」と「develop」を統合します。これをmerge（マージ）すると言います。
③最後にmergeした「master」を「git push」でリモートリポジトリにアップロードして、このプロジェクトは完了になります！

ではまず①「git pull」を実行しローカルリポジトリに「develop」ブランチをダウンロードしましょう。
その後に「git log」で中身を確認したいので「git checkout」で「develop」ブランチに移動しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/2ccd16a7-7d78-418c-82e7-e12f5b89a4e7.png)

```
$ git pull origin
$ git checkout develop
```

以下のように最終的に「develop」ブランチに移動できればOKです！
（※実は「git pull」した時はまだローカルリポジトリには「develop」ブランチはできていません。今回は深く説明はしないので、「追跡ブランチ」で調べてみてください！）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/46cd1406-6a33-e1ec-2f8c-cada9a12699f.png)

「git log」で確認すると、B子さんの修正「４回目のコミット」が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/10f10b01-5052-65f5-e571-b5dab2b60469.png)

いよいよ、②「git merge」の作業に移ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/91470fbd-34f8-4212-d963-ad73bb8230d8.png)

マージする時は、マージ先（master）のブランチに移動しないいけないので、「git checkout」で移動しておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/a4ef0aa1-8d44-4dcf-eaa1-94c9616aca81.png)

そして以下の「git merge」コマンドを実行してください。

```
$ git merge develop
```
これでマージ完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/7ffa8169-50fb-64f5-44c3-68b6fb0b6c31.png)

念のために「git log」で確認してみましょう。
「master」ブランチも４回目のコミットができていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/f535a762-327c-06ac-d70c-6744de0572fe.png)

補足ですが、以下赤枠のブランチは「４回目のコミット」までの履歴があることを意味しています。
HEAD -> master　：　「master」ブランチ（HEADは今いるブランチを示している）
origin/develop　：　リモートでポジトリの「develop」ブランチ
develop　：　「develop」ブランチ

そして青枠のリモートリポジトリの「master」ブランチのみまだ「３回目のコミット」で履歴が止まっています。

なのでローカルの最新の「master」ブランチをリモートリポジトリの「master」ブランチへ③「git push」してあげましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/d3a29eef-ed67-dfc6-2a38-d51069c17692.png)

```
$ git push origin master
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/1f7f7fbd-9af0-d738-9bd8-2cd24178001a.png)

Githubで確認してみましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619839/52ea80e4-ddc8-d170-bac2-6ce9b2adc76c.png)



これで一連の流れは終わりです！！
お疲れ様でした！！🙇