自分の好きなアーティストと似ているアーティストを出力するWebアプリケーションの開発 part3-3 GitHub使い方

## はじめに
大学の授業で、入力されたアーティストと近しいアーティストのネットワーク図を作成するシステムを作ったので、今回は個人的な趣味で、そのシステムを発展させてWebアプリケーションを開発しました。その際の備忘録を残します。
part3は、GitHubを使ったプロジェクト管理についてまとめます。
前回の[part3-2](https://qiita.com/k-suna/items/af17fefb66cf7cdc07a1)では、Gitの初期設定・SSHキーの生成・GitHub公開鍵登録についてまとめました。
今回のpart3-3では、チーム開発時のGitHubの使い方についてまとめます。

具体的には、
- [リポジトリの新規作成方法](#リポジトリの新規作成方法)
- [リポジトリの追加方法（GitBash上）](#リポジトリの追加方法（GitBash上）)
- [コミットとプッシュ（GitBash上）](#コミットとプッシュ（GitBash上）)
- [コミットとプッシュ（VScode上）](#コミットとプッシュ（VScode上）)
- [クローン](#クローン)
- [プル（GitBash上）](#プル（GitBash上）)
- [プル（VScode上）](#プル（VScode上）)
- [ブランチ作成&マージ](#ブランチ作成&マージ)
- [コンフリクトした場合](#コンフリクトした場合)

をまとめます。

## リポジトリの新規作成方法
1. GitHubにログインし、以下の画面内の「New」をクリック
![Github_newrep.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/45344150-2fd2-8422-1779-0f825bfd2acf.png)

2. 以下を入力する
- リポジトリの名前（必須）
- 中身の説明（任意）
- パブリックorプライベートを選択
  - パブリック...だれでも閲覧・アクセス可能
  - プライベート...特定のユーザorチームメンバーしかアクセスできない
- 「READMEファイル」を加えるかを選択
- 「.gitignoreファイル」を加えるかを選択
  - 「.gitignoreファイル」の説明は[.envファイルで環境変数を設定する方法](https://qiita.com/k-suna/items/ef782da10e66f642ddbc)の記事を参考
- 「licence」の選択（NoneでもOK）

設定が完了したら、「Create repository」をクリック
![Github_createrep.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/c4dd0686-c6e0-a09f-d1f5-de0e2d8ca469.png)

## リポジトリの追加方法（GitBash上）
「ローカルリポジトリ作成」 -> 「リモートリポジトリのURLをローカルリポジトリに追加」の手順で完了する。

1.ローカルリポジトリ作成場所のディレクトリまで移動し（通常Documentsディレクトリ内やGitHubディレクトリ内に作成）、以下のコマンドを実行して、ローカルリポジトリを作成する
```text:例：testという名前のローカルリポジトリを作成
$ mkdir test
```

2.作成したディレクトリに移動し、以下のコマンドを実行して、初期化する
```
$ git init
```
「Initialized empty Git repository in ~」という表示が出ればOK

3.以下のコマンドを実行し、リモートリポジトリのURLを追加して完了
リモートURLは以下の画面で確認できる。
![Github_リモートURL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/7189b20f-f53a-13ab-7455-a54142d9d3ba.png)

```
$ git remote add origin <リモートURL>
```

## コミットとプッシュ（GitBash上）
1.[リポジトリの追加方法（GitBash上）](#リポジトリの追加方法（GitBash上）)で作成したローカルリポジトリの中に、GitHubに上げたいファイルを作成する
以下は「Hello World!」を表示するプログラムを作成した様子
![スクリーンショット 2024-05-29 102643.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/474fd52c-7399-1830-c0df-1b1c543d24a6.png)

2.以下の2つのコマンドを実行して、GitHub上にコミットする
```
$ git add HelloWorld.py
$ git commit -m "Hello Worldファイルを作成"
```
```
 1 file changed, 1 insertion(+)
 create mode 100644 HelloWorld.py
 ```
というメッセージが表示されればOK

3.以下のコマンドを実行して、GitHub上にプッシュする
ブランチ名を何も設定していない場合は、mainを入力
```
$ git push origin <ブランチ名>
```
```
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 280 bytes | 280.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
To https://github.com/k-suna/test.git
[new branch]      main -> main
```
というメッセージが表示されればOK

4.GitHubでファイルが追加されていることを確認する
![Github_ファイル作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/cf764781-15c3-c6bc-afa5-b949d8fefd5a.png)


## コミットとプッシュ（VScode上）
上記のHelloWorld.pyに、「print('Hello World!')」をもう一行追加した時を考える

1.フォルダーをワークスペースに追加する。これにより、追加したプログラムの行に緑色がかかる
<img width="400" alt="HelloWorld_ぼかし.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/8d9a064f-708e-8be0-81e8-1d1674c957f0.png">

2.VScodeの左側の赤枠で囲んだ部分をクリックし、変更点を書き込み、「コミット」ボタンを押す（これによりコミットとプッシュを同時に実行できる）
<img width="400" alt="Python修正.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/cef9eeb5-5932-d136-8704-dac7981852c2.png">

3.以下のポップアップ画面で「はい」を選択
<img width="400" alt="ポップアップ1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/2401d285-6736-4767-8fa7-476591444765.png">

4.ブランチを発行していない場合は「Branchの発行」ボタンが出るのでクリックする
<img width="400" alt="ブランチの発行.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/6db62231-c8c0-2839-9b82-1e7e7facbde5.png">

5.以下のような画面になれば成功
<img width="400" alt="スクリーンショット 2024-05-29 133203.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/d7cba169-1691-b87f-425b-f02d2115d7db.png">

6.GitHub上で確認すると以下のようになっている
![GitHub_Python修正.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/5e53d9e0-6c6a-4d54-274f-c71137e3e976.png)

### メインブランチがある場合のコミット&プッシュ
1.メインブランチがある場合は、上記の4.の画面が以下のようになる。このとき、「変更の同期」をクリックする
<img width="400" alt="python_変更の修正.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/79bff131-6022-6043-da50-b98115c5efe4.png">

2.以下のポップアップ画面で「はい」を選択して完了
<img width="400" alt="ポップアップ2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/102e7e30-4347-3f6d-a2ac-5081ad266813.png">

## クローン
クローンしたいリポジトリのURLを取得し、以下のコマンドを実行する
URLは以下の画面のように、「Code」をクリックすることで表示される
![クローン1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/4a7aa61d-0c9b-a168-ca68-830b6e3c9bd8.png)
```
$ git clone GithubのURL
```
```
Cloning into 'クローンしたリポジトリ名'...
remote: Enumerating objects: 6, done.
remote: Counting objects: 100% (6/6), done.
remote: Compressing objects: 100% (6/6), done.
remote: Total 6 (delta 0), reused 6 (delta 0), pack-reused 0
Receiving objects: 100% (6/6), 5.99 KiB | 875.00 KiB/s, done.
```
上記のようなメッセージが返ってくれば成功

## プル（GitBash上）
以下のコマンドを実行する
```
$ git pull origin ブランチ名
```
上記は、プルしたいリモートリポジトリをoriginというリモート名でremote addしている前提（以下のコマンドを実行している前提）
```
$ git remote add origin リポジトリのURL
```

## プル（VScode上）
1.`Ctrl + Shift + P`でコマンドパレッドを開いて「pull」と検索し、「Git Pull」を選択する
![スクリーンショット 2024-05-30 100337.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/2ee483c8-c107-880c-b48b-249becd04c96.png)

2.プルしたいリポジトリを選択して完了
![プル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/334c57aa-2bc7-6c2b-1b9e-eb75363cb8a9.png)


## ブランチ作成&マージ
以下のように、新しいコードを作成した時に、新たなブランチを作成してメインブランチにマージすることを考える。
<img width="400" alt="スクリーンショット 2024-05-29 142439.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/737e6505-323a-62bb-5a9b-ae2707b30aad.png">


### ブランチ作成

1.VScodeの左下の「main」をクリックし、「新しいブランの作成...」を選択
![ブランチ作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/b76dad5a-4408-fbaa-9939-01250cf04851.png)

2.「dev」と打ち込みEnterを押すと、VScodeの左下が「main」から「dev」に変わる
![devブランチの完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/ce8177e7-47e2-bde3-b7cf-fed257e7aeeb.png)

3.以下の画面でコミットメッセージを書き、「コミット」ボタンを押す
<img width="400" alt="devブランチに切り替えてコミットプッシュ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/9089a2b9-5024-d92c-5fb1-019da4f34a1d.png">

4.以下のポップアップ画面で「はい」を選択する
<img width="400" alt="ポップアップ3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/765838f5-6603-6595-7417-07cff3bf96d9.png">

5.「Branchの発行」ボタンが出た場合それをクリックする
![ブランチの発行2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/afde7fd2-8711-01d9-8f16-bc549d1ef833.png)

6.GitHub上で以下を確認できればOK
![devブランチに切り替えてコミットプッシュ完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/7d3bd709-aaae-052a-ead3-ea51d08842e4.png)

### マージ（方法1）
1.`Ctrl + Shift + P`でコマンドパレッドを開いて「merge」と検索し、「Git Merge...」を選択する
![スクリーンショット 2024-05-29 145311.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/7d52fe36-ee5c-8728-9040-615ae2ac5d48.png)

2.次の画面でリポジトリを選択し、マージ元を選ぶ（今回はmainブランチにdevブランチで開発したものをマージしたいので、「main」を選択）
![ブランチ元選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/99937658-89a8-1ac4-f67e-a8b0f0ce2be8.png)

3.「main」ブランチになっていたら成功
![mainブランチに戻ってることの確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/7dcf3ab7-4dc4-d82c-b828-bd3e02dfdbba.png)

### マージ（方法2）
拡張機能の「Git Graph」をインストールすることで、リポジトリやブランチの修正内容などを視覚化できると同時に、マージも可能になる

1.VScodeの拡張機能「Git Graph」をインストールする
![スクリーンショット 2024-05-29 151818.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/030a53ed-b4ef-4409-d447-d350c1d25e0c.png)

2.下の「Git Graph」をクリック
![gitgraphマージ0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/8b392605-10c8-aa86-00fa-3a2121d6b3d9.png)

3.マージしたいブランチで右クリック
![gitgraphマージ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/7116e1a8-1b68-cca1-e023-101d42116c1d.png)

4.「Merge into current branch...」を選択
![gitgraphマージ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/644e366c-2773-672c-9ad5-fa7cef1c003a.png)

5.以下のポップアップ画面が出るので、ブランチ先が正しいことを確認して「Yes,merge」をクリック
![gitgraphマージ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/ea84ec76-fa6a-0684-5b48-e3e8594893b7.png)

6.Git Graph上でマージされていることを確認し、左の「変更の同期」をクリックしたらOK
![gitgraphマージ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/c3e25947-a9df-a3e9-0529-6a83e14fefec.png)


## コンフリクトした場合

1.マージする際に、修正箇所がコンフリクトする場合がある。その際は以下の画面のように表示される。
![スクリーンショット 2024-05-29 161929.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/cae5c3ad-c1ad-03b4-8bf5-a2888b19e12f.png)
上記の画面上で「現在の変更を取り込む」or「入力側の変更を取り込む」or「両方の変更を取り込む」or「変更の比較」を選択できるので、該当のボタンを選択し、右下の「マージエディターで解決」ボタンを押す

2.以下の画面が表示されるので、「マージの完了」をクリック
![スクリーンショット 2024-05-29 162226.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/9e355861-2bd7-142a-8004-ea306462aa08.png)

3.以下のポップアップ画面が出るので、「競合がある状態で完了する」をクリック
<img width="400" alt="スクリーンショット 2024-05-29 162418.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/13fc9db2-0981-d129-1d1f-2efb429c12bc.png">

4.以下のポップアップ画面が出るので、「競合がある状態で閉じる」をクリックで成功
<img width="400" alt="スクリーンショット 2024-05-29 162430.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553476/0d6ef74e-8d55-c420-f76f-a0befaf6e416.png">


## 終わりに

今回はチーム開発時のGitHubの使い方についてまとめました。次はDockerの操作方法についてまとめたいと思います。

## 参考文献
以下の記事を参考にしました。ありがとうございました。

https://qiita.com/Misato0127/items/360de00c71ba031b63e8

https://qiita.com/aisplay/items/5a77e259ea2feeeb48c3

https://qiita.com/shuhey/items/f502ea9aaf6659c225b4

https://qiita.com/sh10n/items/f5edb7293aaffebe35a7