githubを使った共同作業の手順

#はじめに
githubを使って共同作業、共同開発をするときの参考になればと考え、自分の備忘録も兼ねて記事を書いていく。

実際に調べるとコマンドを用いた方法を紹介している人が多いが、自分が初めてgitを触った時はコマンドは難しくてわからなかったのでコマンドをほとんど使用しないでいじる方法を紹介していきたいと思う。

あくまで初心者向けであり、自己流なので、間違いやもっといいやり方がある場合は是非教えていただけるとありがたい。

###開発環境
・macOS Catalina
・VSCode

###前提条件
・githubアカウントを既に持っている。
　[githubホームページはこちら](https://github.co.jp/)
・VSCodeをダウンロードしている。
　[ダウンロードはこちらから](https://code.visualstudio.com/)

#リポジトリを作る
リポジトリとは簡単に言ってしまえば倉庫のようなもので、作ったファイルやディレクトリの状態を保存しておく場所である。リポジトリにはローカルリポジトリという自分のpc内に存在するものと、リモートリポジトリというネットワーク上に存在するものの二種類がある。

下図のようなボタンがあると思うので、newボタンを押す。
<img width="304" alt="スクリーンショット 2020-07-29 13.46.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/a8ac75b8-39ee-d096-20f0-4410b0f74e5c.png">
すると以下のようなページに遷移するので、必要項目を記入していく。
<img width="769" alt="スクリーンショット 2020-07-29 13.46.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/ad041ba4-e040-c5bc-a57f-50e637d507eb.png">
Repository name:リポジトリの名前
Description:このリポジトリの説明
public or private:このリポジトリを公開するかしないか
Initialize this repository with a README:READMEというリポジトリに入れられているファイルを参照する際に一読して欲しいものを書くファイルがあるので、それを設定するか否か
Add .gitignore:作業を行う際にリモートリポジトリにあげたくない名前をここで設定する(特になければNoneを設定してください)
Add a license:ライセンスの設定

では、今回はsummerwork1というprivateのリポジトリで、READMEにチェックを入れた状態で設定します。
<img width="790" alt="スクリーンショット 2020-07-29 14.03.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/8d17a54b-6fbe-d181-e60f-1bfb397880d0.png">

リポジトリができた。

#共同編集者をリポジトリに招待する。
共同編集者にいろいろな権限をあげよう。

リポジトリページのsettingに飛んで、Manage accessを選ぶ。
すると、以下のような共同編集者を招待するというボタンが出てくるのでそれをおす。
ユーザーネームやemailアドレスなど何かしらの情報を入力すると招待ができる。

<img width="1419" alt="スクリーンショット 2020-07-30 9.57.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/0f78970d-8716-6b48-7720-879de66e5cb1.png">

共同編集者に招待することでリポジトリを共有することができるので、共同開発が楽にできるようになる。

#開発の流れ
ここまでの設定で共同開発の土台は整ったはずなので簡単な作業の流れについて軽く記述しておこうと思う。

####コミット
ファイルの追加や変更をした場合の履歴をリポジトリに保存すること
####プッシュ
コミットで保存しておいた履歴をリモートリポジトリにアップロードすること
####プル
リモートリポジトリの変更をローカルリポジトリに反映すること
####ブランチ
履歴の流れを分岐して記録していくもの。分岐したブランチは他のブランチの影響を受けないので、同じリポジトリ内で複数の変更を同時並行で進められる。
共同開発を行う時には自分専用の作業ブランチを作ることで、作業を個々人で行うことができる。
ブランチは他のブランチと合流することができる。(これをマージという)合流することで、一つのブランチにまとめ直すことができる。

###作業例
では実際に作業デモをしてみましょう。

#####VSCodeの設定
まずVSCodeを開き、リポジトリをクローンするというボタンを押す。
<img width="942" alt="スクリーンショット 2020-07-30 10.15.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/a538a053-8e69-5c67-6aa6-caf2554549eb.png">
するとリポジトリURLを指定するかリポジトリソースを選択しますというものが出てくると思うので、今回はリポジトリのURLをコピペしてみる。
<img width="589" alt="68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3534363738312f64333163343737612d363137302d343633372d353734372d3830386231383566656138632e706e67.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/49f6f8a2-91bb-e958-0a8c-e28163eeb3de.png">

すると、このような画面になる。左下にあるのがブランチの名前。この状態になるとVSCodeで編集する土台は整えられたはずだ。
<img width="1440" alt="スクリーンショット 2020-07-30 10.19.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/1c0a92c5-a49e-2e61-0361-551877272fbc.png">
#####作業ブランチを作ろう
現在のブランチはmasterになっているが、基本masterには完成品をおくことが多いのでこのブランチで編集を行うのはよろしくない。余談ではあるが、自分がチームで開発を行う時にはmaster以外にもう一つdevelopmentというみんなの編集したものを合わせてテストをするためのブランチ、そして個人の作業をするブランチを用意して製作をしていた。
今回はあくまでデモなので個人用のブランチをまず作っていく。
masterの部分をクリックすると、図のような画面になると思うのでcreate new branchで作っていく。
<img width="496" alt="スクリーンショット 2020-07-30 10.24.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/863afed5-07c7-06b4-c45d-a8c9059e3844.png">
myspaceというブランチを作ると、ブランチ名が変わったのではないだろうか。もう一度左下の部分を押すと、このようにブランチが増えたことが確認できる。
<img width="489" alt="スクリーンショット 2020-07-30 10.26.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/12c96081-c322-577c-cba3-f469a99dc3c4.png">
編集はmyspaceで行いたいので、myspaceを選択し、左下の表示がmyspaceに変わったことをきちんと確認する。
では、実際に編集していく。
#####コミットしよう
おなじみのコードをとりあえず追加してみると左側のアイコンに①と出ているのがわかるだろうか。
<img width="796" alt="スクリーンショット 2020-07-30 10.29.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/b67ff175-5f6d-5eff-89c4-784afa408a17.png">
ではこの変更をまずコミットしよう。
<img width="176" alt="スクリーンショット 2020-07-30 10.30.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/ef6c965a-be20-fdcb-a838-f8ad7684244c.png">
コミットのやり方は下の+ボタンを押し、上のチェックボタンを押すだけである。
コミット時のメッセージを書いてコミットすると①表示が消えたのではないだろうか。何もなくなったらコミットは完了である。
#####プッシュしよう
今の状態で試しにブラウザ上でリポジトリページを開いてみて欲しい。
すると変更が何一つ反映されていないのはわかるだろうか。
これは、今まではローカルリポジトリを変更していたが、ブラウザ上にあるリモートリポジトリには何一つ変更を反映できていない証拠である。
では、変更を反映させるにはどうしたらいいのか。プッシュをすればいいのだ。
VSCodeで先ほどの①が表示されていたアイコンを再び押し、・・・というアイコンを押すと次のようなメニューが出てくる。これのpushを押してみよう。
<img width="794" alt="スクリーンショット 2020-07-30 10.38.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/7b9f3da9-43f0-4f8d-2393-38f63fc3befb.png">
押した後にブラウザ上のリポジトリページをみてみよう。リモートリポジトリに変更が加わったことが確認できるはずだ。
#####プルリクをしてみよう。
プルリクという単語を聞いたことはあるだろうか。これはプルリクエストの略語なのだが、簡単に言えば自分のブランチの状態を他のブランチに反映して欲しいですというお願いをすることである。

そんなことしなくても勝手に変更すればいいじゃん？と思うかもしれない。
一人で編集しているとそうなるかもしれないが、大人数で編集している場合、うまく動かないコードを勝手に追加されてデータを壊されるのは万死に値する行為になりかねない。それを防ぐために一度確認を挟むことは大事なことなのだ。

VSCode内のブランチ名の部分を押し、masterに移動してみると、helloworld.cなんていうファイルは存在しない。これをmasterに追加してもらうためにプルリクエストをしてみよう。

現在の状態でリポジトリページを開くとこのような緑のボタンが出ているはずだ。このボタンを押してみて欲しい。
<img width="950" alt="スクリーンショット 2020-07-30 10.45.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/f20293f5-980e-2959-2d55-8e9f5090b0e2.png">
すると以下のようなページに飛ぶ。
今回はmasterにmyspaceの変更を反映させたいのでbaseとcompareを以下のように設定する。
そしてコメントを書いて、右下のボタンを押すとプルリクエストができる。
<img width="924" alt="スクリーンショット 2020-07-30 10.46.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/56191e0d-9025-88e5-40f2-976ee003158d.png">
すると、以下のような画面が出てくるはずだ。
<img width="925" alt="スクリーンショット 2020-07-30 10.47.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/90dc68ac-4aa0-767d-69a7-b3d18cdf7820.png">
このMerge pull requestを押すと承認したという扱いになる。実際にリポジトリページでmasterブランチの状態をみるとhelloworld.cが追加されているはずだ。
<img width="926" alt="スクリーンショット 2020-07-30 10.50.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/a45fdd17-b313-8a9a-68aa-94eddef79a60.png">
#####プルしてみよう
ではVSCodeをもう一度みてみよう。右下のブランチ名を押してmasterブランチを選択し移動してみる。そこにはまだ何もない。なぜならリモートブランチの変更はまだローカルブランチに反映されていないからだ。
pushするときと同じように・・・というボタンを押してみるとpullという文字が見えると思う。
今回はpull fromを押してみよう。するとどこからpullするかを選べるのでorigin/masterを選ぼう。これはリモートブランチのmasterを持ってくると解釈して欲しい。
<img width="789" alt="スクリーンショット 2020-07-30 10.54.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546781/5b8d8ea6-5006-3c09-7d24-57e7b0c7b44c.png">
すると、helloworld.cが追加されているはずだ。

##まとめ
今回は共同開発の土台の建て方と、gitを使って作業するために最低限必要な物事をまとめてみた。
もし詰まっている人がいたら参考になればいいなと思う。