はじめに

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

具体的には、

リポジトリの新規作成方法
リポジトリの追加方法（GitBash上）
コミットとプッシュ（GitBash上）
コミットとプッシュ（VScode上）
クローン
プル（GitBash上）
プル（VScode上）
ブランチ作成&マージ
コンフリクトした場合

をまとめます。

リポジトリの新規作成方法

GitHubにログインし、以下の画面内の「New」をクリック
以下を入力する

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

設定が完了したら、「Create repository」をクリック

リポジトリの追加方法（GitBash上）

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

1.ローカルリポジトリ作成場所のディレクトリまで移動し（通常Documentsディレクトリ内やGitHubディレクトリ内に作成）、以下のコマンドを実行して、ローカルリポジトリを作成する

例：testという名前のローカルリポジトリを作成

$ mkdir test

2.作成したディレクトリに移動し、以下のコマンドを実行して、初期化する

$ git init

「Initialized empty Git repository in ~」という表示が出ればOK

3.以下のコマンドを実行し、リモートリポジトリのURLを追加して完了
リモートURLは以下の画面で確認できる。

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

コミットとプッシュ（GitBash上）

1.リポジトリの追加方法（GitBash上）で作成したローカルリポジトリの中に、GitHubに上げたいファイルを作成する
以下は「Hello World!」を表示するプログラムを作成した様子

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でファイルが追加されていることを確認する

コミットとプッシュ（VScode上）

上記のHelloWorld.pyに、「print('Hello World!')」をもう一行追加した時を考える

1.フォルダーをワークスペースに追加する。これにより、追加したプログラムの行に緑色がかかる

2.VScodeの左側の赤枠で囲んだ部分をクリックし、変更点を書き込み、「コミット」ボタンを押す（これによりコミットとプッシュを同時に実行できる）

3.以下のポップアップ画面で「はい」を選択

4.ブランチを発行していない場合は「Branchの発行」ボタンが出るのでクリックする

5.以下のような画面になれば成功

6.GitHub上で確認すると以下のようになっている

メインブランチがある場合のコミット&プッシュ

1.メインブランチがある場合は、上記の4.の画面が以下のようになる。このとき、「変更の同期」をクリックする

2.以下のポップアップ画面で「はい」を選択して完了

クローン

クローンしたいリポジトリのURLを取得し、以下のコマンドを実行する
URLは以下の画面のように、「Code」をクリックすることで表示される

$ 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」を選択する

2.プルしたいリポジトリを選択して完了

ブランチ作成&マージ

以下のように、新しいコードを作成した時に、新たなブランチを作成してメインブランチにマージすることを考える。

ブランチ作成

1.VScodeの左下の「main」をクリックし、「新しいブランの作成...」を選択

2.「dev」と打ち込みEnterを押すと、VScodeの左下が「main」から「dev」に変わる

3.以下の画面でコミットメッセージを書き、「コミット」ボタンを押す

4.以下のポップアップ画面で「はい」を選択する

5.「Branchの発行」ボタンが出た場合それをクリックする

6.GitHub上で以下を確認できればOK

マージ（方法1）

1.Ctrl + Shift + Pでコマンドパレッドを開いて「merge」と検索し、「Git Merge...」を選択する

2.次の画面でリポジトリを選択し、マージ元を選ぶ（今回はmainブランチにdevブランチで開発したものをマージしたいので、「main」を選択）

3.「main」ブランチになっていたら成功

マージ（方法2）

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

1.VScodeの拡張機能「Git Graph」をインストールする

2.下の「Git Graph」をクリック

3.マージしたいブランチで右クリック

4.「Merge into current branch...」を選択

5.以下のポップアップ画面が出るので、ブランチ先が正しいことを確認して「Yes,merge」をクリック

6.Git Graph上でマージされていることを確認し、左の「変更の同期」をクリックしたらOK

コンフリクトした場合

1.マージする際に、修正箇所がコンフリクトする場合がある。その際は以下の画面のように表示される。

上記の画面上で「現在の変更を取り込む」or「入力側の変更を取り込む」or「両方の変更を取り込む」or「変更の比較」を選択できるので、該当のボタンを選択し、右下の「マージエディターで解決」ボタンを押す

2.以下の画面が表示されるので、「マージの完了」をクリック

3.以下のポップアップ画面が出るので、「競合がある状態で完了する」をクリック

4.以下のポップアップ画面が出るので、「競合がある状態で閉じる」をクリックで成功

終わりに

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

参考文献

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