チーム開発備忘録①　小規模チーム開発で面倒だったGithub周りの下準備

<h3>転職活動をするにあたり利用していた民間のプログラミングスクールのカリキュラムの中にチーム開発が含まれており、一般に言う「環境構築」とは別にGithub周りの下準備がそこそこ面倒だったので、その備忘録です（※エディターはVScodeを使用）</h3>

**※なお、ここでいうチーム開発とは２人以上による協働開発であるとします（※ペアプロやモブプロを含むものとします）**

※ペアプロ・モブプロの参考資料

https://qiita.com/mzmz__02/items/26a34e3e3f2cb870cfa2


<h3>※少なくともGithub の無料個人アカウントと確実に届くメールアドレスをチームの全員が取得していることを前提とします</h3>

※Githubのアカウント作成について　参考資料

https://qiita.com/ayatokura/items/9eabb7ae20752e6dc79d

※公式　https://docs.github.com/ja/get-started/quickstart/creating-an-account-on-github

<h2>（A）Github上でチームを結成するまで</h2>

<h3>（i）代表者を決める（※一般的な「代表」ではなく、チーム開発のときのことを考えると「時間の融通が一番利く」人の方が良いです）</h3>

____

<h3>（ii） Organizationの作成（Organizationは本来、「組織」という意味ですが、これが「チーム」にあたります） </h3>

<details><summary>details</summary>

<h4>① 下画像の「＋」を押して、New organizationを押す</h4>

![Organization_Generate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/d0474e8f-a69b-6ab3-fd2d-603ea405987a.png)

<details><summary>※画像の謎のネコについて</summary>

※画面上のネコは「ネッコサーフィン」という「ブラウザを開くと勝手にブラウザにネコが出てきて歩き回る、そして鳴いたり跳ねたり座って休憩したりするけど特に何もプログラムやPC自体に害は全く及ぼさない（ちょっと時々絶妙に邪魔なだけ）」という謎「Google Chromeの拡張機能」です。（笑）本Qiitaとは全く関係ありません。度々映りこみますがここでは無視してください
</details>

____
<h4>②下画像のfreeプランを選択する（※デフォルトは有料プランにカーソルが当たっている状態になっていますが、５人程度までなら、freeプランで十分でした） </h4>

![free_organization.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/f8c2d2ca-2f0c-1d13-252c-a8faf3e35e47.png)

____
<h4>③　フォームに必要事項を入力する。（※Organization name が「チーム名」にあたります。なお、（リモート）リポジトリを新たにGithub上で作る場合と同様、半角英数またはハイフン「-」で構成されている必要があります。）

![organization_form.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/edae427b-5314-30df-5a85-fb10bba6235b.png)

<h5>なお、ここの Contact email に入力したメールアドレスから、Zoom等のように他メンバーを招待するときのメールが届くと思われます。</h5>

![organization_register.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/fd3bb791-3a61-c9a4-dc9e-bb2e34d70669.png)

ロボットでないことを証明（※検証を押してクイズみたいなものに答える（※画像を見て、それが「何で、どのようなものであるか」を認識するためには、一定のクオリティの画像認識AIのようなものが必要で、自動化されたスクリプトやbotによる不正アクセスを防止する））
　　　　　　　　　　　　　　　　　　▽
I hereby accept the Terms of Service. 
For more imformation about Github's privacy practices, see the Github Privacy Statement.

（利用規約に同意します。Githubの個人情報保護に関する詳細については、Githubプライバシーステートメントをご覧ください。）

にチェックを入れると、Nextボタンが押せます。（次の画面に遷移）

___
<h4>④ チームメンバーをチームに組み込む（スキップ可能）</h4>

![organization_complete.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/3e6ceb95-d3bf-5289-4f75-3e3a60a1ab60.png)

**※username は Github の登録名**
<h5>赤矢印のところにusername等を入力して、Complete setupを押す。青矢印を押してスキップして後でメンバーを招待することも可能</h5>

____
<h4>⑤ 一旦スキップして、リモートリポジトリを作る場合</h4>

上記の青矢印のリンクを押して、とりあえずチームメンバーの登録をスキップすると以下のような画面になります

![organization_generated.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/a58b6c3e-556b-d49d-f2d1-05aab59b4ada.png)

**画像の赤丸部分が自分の登録アカウント名から、下にも表示されているチーム名になります。**

**※青丸の部分のポップ「You can now follow organizations
Organization activity like new discussions, sponsorships, and repositories will appear in your dashboard feed.（組織をフォローできるようになりました
新しいディスカッション、スポンサーシップ、リポジトリなどの組織の活動がダッシュボードのフィードに表示されます。）」は下の「OK,got it（了承しました）」を押すと消えます**

![remote_repository_generate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/900f9e90-ff46-994e-05f5-5e7995ffc1b4.png)

![remote_repository_generate2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/f65abcb3-861c-1cad-9419-d4253a92caeb.png)


<h4>Ownerはプルダウンを選択して、チーム名に変更（デフォルトは自分のアカウント名）</h4>
<h4>※チームで合意が取れていない段階では、private設定（メンバーしか見れない）にしておいた方が良い</h4>

____

<h3>Create repositoryを押した後</h3>

![gitbash.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/a8401124-6e39-1e3e-569e-b70732665326.png)

プロジェクトのフォルダを開いた状態でVScodeの左枠の三本線　⇒　ターミナル　⇒　下画像のようにGit bashを選択　⇒　**以下の順番で赤丸部分のコマンドをコピペ＆Enterしていく（Githubの表示順と異なります）**

**最初上３つは順番通り**
```powershell
echo "# 登録したリポジトリ名が入る" >> README.md　　
git init
git add README.md
```
**ここから以下の順番で**
```powershell
git remote add origin https://github.com/"対応するURL".git
git branch -M main
git add .
git commit -m "first commit"
git push -u origin main
```

**※ターミナルがVScodeで正しくGitbashに切り替わると、先頭に$マークがつきます**

![gitbash_terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/3e3f20b4-09b2-eea8-6857-31f3955252a6.png)

**ターミナルに**
```powershell
remote: Resolving deltas: 100% (1260/1260), done.
```

みたいなのが出てきたら正しく反映されています。なお、最初は結構pushのあと時間かかります。

※参考資料

https://qiita.com/mii-chang/items/c6936458751e4e19c117


https://miya-system-works.com/blog/detail/vscode-github/

<h4>上記のように push したものが、基本main branch（開発を進めるための雛形となるコード、もしくは一般に最終的に完成品としてまとめる（mergeする）コード先）になります。（push後、画面更新すると下のように.gitignoreで指定されていない物以外はGithubにコードがアップされます。）</h4>
なお、何らかのフレームワークを使って作る場合、共通する初期設定だけしたものをpushすると楽になるのではないかと思います

____
<h3>⑥ フォルダを反映させた（＝main branchを作った）後、チームメンバーに招待メールを送る（※⑤と⑥は順番逆も可能）</h3>

**反映させた画面の左上のGithub アイコン（ネコの影マーク）のすぐ隣のチーム名（下画像、赤丸部分）をクリック**　⇒　**invite member** ⇒ **invite**

![member_make_join.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/7c86f3b4-3e59-e13f-bf78-b6342be52f9b.png)

https://qiita.com/emonuh/items/18b0a69c12b30dceb8e4

![invite_mail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/b8f59e78-77a0-5d52-45cc-46ba7821a159.png)

※相手がメール認証を済ませれば、以下の部分に認証したメンバーのGithubアカウント名などが載ります。

![team_members.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/66f7a2de-48f9-0784-4cf4-03082e587387.png)

<h3>以上で、とりあえず一通りチーム開発をするための下準備は一通り終わりです。</h3>

</details>

____

<h2>（B）Github上でチームを結成してから</h2>
<h3>（i）開発を進めるにあたり、要件定義や要件定義を満たすための機能要件、どんなコードが必要かなどを再度整理して役割分担をする  </h3>

<h3>（ii）以下のコマンドでプロジェクトの雛形をひとまず共有する（クローン）　※招待されたメンバーのみ</h3>

<details><summary>details</summary>

**gitbashで以下のコマンドを使い、コードをコピーする**
```powershell
$git clone 以下のボタンを押すとコピーできるURL
```

![URLcopy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/67118fbf-3cf0-089e-12c2-df0316036115.png)

**Laravelなどをクローンする場合、以下の資料のように注意が必要（※クローンするだけだとvendorがコピーされない）**

https://qiita.com/hinako_n/items/6c45413daef3a206c02d
</details>

_____

<h3>(iii)各自が役割分担に基づいて、とりあえず以下のコマンドで branchを新たに作り、それぞれpushしていく。</h3>

<details><summary>details</summary>

```powershell
$git checkout -b 新しいブランチ名（※半角英数とハイフンで構成）
```
なお、**無事切り替わった場合はgitbashのところにある(main)の表示が(新しいブランチ名)に切り替わります。新しく作ったbranchに改修したコードをプッシュするには**
```powershell
$git add .
$git commit -m "コミットメッセージ"
$git push -u origin 上記の新しく作ったブランチ名
```

でもいけますが、個人的には以下のVScodeの機能を使う方が楽です。

<h4>①クリック、②でadd、③にコミットメッセージを書く、④でcommitとpushを一気にやる（なお、ブランチを新たに作りますかというアラートが出てきた場合は「はい」を選択）</h4>

![vscodepush.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/1da92407-c91a-ccfd-c9fc-6d2751a16de3.png)

<h4>以下、mainのコードと新しく作ったbranchのコードが（mergeという作業をしない限り）同時に保持されることになります</h4>

![new_branch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584834/b2a0b28b-a28e-2a84-3fee-e5f747d607d6.png)

<h4>すでに作ってあるブランチ、もしくはmainに切り替える場合（ -b をつけない）</h4>

```powershell
$git checkout すでに作ってあるブランチ名
または、
$git checkout main
```
</details>

_____

<h4>過ってGithubに一度pushしてしまったファイルの名前の大文字小文字等を付け替えたい場合</h4>

```powershell
// 数字を付ける等、一旦変換用の名前に付け替える　※本来は最後の「controller」のcを大文字にしたい
$git mv app/Http/Controllers/Contactcontroller.php app/Http/Controllers/Contactcontroller2.php

// 本来直したかったものに直す
$git mv app/Http/Controllers/Contactcontroller2.php app/Http/Controllers/ContactController.php
```
**※Githubでは、大文字・小文字は区別されるものと思って注意が必要**

<h3>※過って何かしらpushしたりした場合</h3>

https://qiita.com/thinking-weed/items/862497a431b23146f069

## その他参考資料

https://qiita.com/Sicut_study/items/0318cc136c189b179b7f