初めてのチーム制作!!コード管理編～EclipseでGitHubを使いこなそう～

#チーム制作でコード管理をするには…
今回は、チームでWebアプリケーションの制作に挑戦しました:smiley:
チーム制作でコードを管理する際に必須なのが、**GitHub**です。
今回は**Eclipse**で開発したので、EclipseでGitHubを使用できるようにし、プロジェクトに参加していきます:bangbang:
また、自分のした作業をプロジェクトに反映させられるようにしていきたいと思います。
#EclipseでGitHubを使いこなすための手順


手順としては、以下の通りです。

1. **EclipseでGitHubを使えるようにする**
2. **GitHubからEclipseにクローンし、プロジェクトを作る**
3. **自分の作業をプロジェクトに反映させる**

おまけ： **EclipseからGitHubリポジトリに結び付ける方法**




#EclipseでGitHubを使えるようにする
まず、EclipseとGitHubを連携して使えるようにする必要があります。
そのためには、EclipseにGitを使うためのプラグイン「[EGit](https://www.eclipse.org/egit/)」をインストールします。

インストールが終わったら、Eclipseで「ヘルプ」⇒「新規ソフトウェアのインストール」を開きます。
![image-117-768x488.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/e599051c-fd00-2865-a815-6afe79f399ce.png)

「追加」を選択すると、リポジトリーの追加が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/63616ff9-0c04-cc11-12d9-3640b39dccac.png)


リポジトリーの追加では、以下のように入力し、追加します。

名前(N)：EGit
ロケーション(L)：http://download.eclipse.org/egit/updates
<img width="395" alt="コメント 2020-02-03 102444.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/f279b513-c4bd-e04e-bc8f-f1a6e207e421.png">

一覧が表示されたら、すべてにチェックを入れ、次へ進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/00fa9fd7-2273-6b3d-6126-8c8fe543dd7f.png)

インストールするものの一覧が出てくるので、次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/86b4747e-1a54-8df8-8cd1-15c62f9bc628.png)

利用規約に同意し、完了します。
<img width="701" alt="コメント 2020-02-03 103823.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/231baa59-207d-6399-5acc-f02170820a27.png">

これで、EclipseでGitHubを使用する準備ができました:relaxed:
#GitHubからEclipseにクローンし、プロジェクトを作る

次にGitHub上のチームで共有されたリポジトリをEclipseに入れていきます。
この作業を**クローン**と言います。クローンが終わるとEclipse上にプロジェクトができます。
＊チームのリーダー(以下master)がGitHubでリポジトリを作成し、自分とリポジトリの共有がされていることが前提です。

まずGitHub上で共有しているリポジトリClone or downloadを選択し、URLをコピーして置きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/1ac73bde-ead9-1cf2-cb8f-076088f0266c.png)

"Clone with HTTPS（HTTPSでクローン）"の下で右のマークをクリックしてください。
<img width="266" alt="コメント 2020-02-03 133046.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/54e3478d-e6c5-851d-0a66-44691f360eab.png">


次にEclipseを開き、ファイルからインポートを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/59baf100-621e-88cc-7f70-ad93524fe3aa.png)
Gitからプロジェクトを選び次へと進みます。
<img width="427" alt="コメント 2020-02-03 133651.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c687055d-4485-b736-6d3e-2c64f15e1410.png">
クローンURIを選び次へ
<img width="424" alt="コメント 2020-02-03 133716.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/6ccf495f-a64e-2b4c-7ffe-3944052a1bee.png">
URIのところに先ほどGitHubからコピーしものを貼り付けます。
ユーザーとパスワードも自分のものを忘れずに入力しておきましょう。
<img width="425" alt="コメント 2020-02-03 134519.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/85cb2f64-4617-5b0d-626d-06cbd301bce0.png">
次の画面でmasterにチェックをいれ、次に進みます。
<img width="379" alt="コメント 2020-02-04 090214.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/06ca597d-f8e6-933d-0f08-421af2d30746.png">

ローカル宛先はディレクトリをワークスペースのパス＋プロジェクト名のように設定
<img width="388" alt="コメント 2020-02-04 090456.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/60cc53e7-e25c-3735-1c8f-8956c115811b.png">

次へ進み、インポートを既存プロジェクトのインポートを選択します。
![コメント 2020-02-29 214714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/4acf8c37-8939-9ee1-d68c-98bf6279b693.png)


プロジェクトをインポートの画面で完了です。
![コメント 2020-02-29 214813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/d58ae7cc-1fcc-41de-fcf4-660076f32479.png)



これでクローンが完了し、Eclipse上にプロジェクトが完成しました:smile:
#自分の作業をプロジェクトに反映させる
Eclipse上にプロジェクトが無事に入り、個々の作業に入ります。
自分の作業をEclipse上で進めていき、GitHubでプロジェクトに反映させるまでの手順を追って説明していきます。

1. **自分の作業用のブランチを切る**
2. **コミット、プッシュする**
3. **プルリクエストを送る**
4. **マージし、ブランチの削除**
5. **masterに戻し、プル**

GitHubの用語を使っていますので、初心者の方はこちらのサイトを参考にしてみてください:point_down_tone2:
[【イラストで覚える】初心者のためのGitとGitHub用語集 | ずくろぐ](https://zukulog098r.com/git/)
###自分の作業用のブランチを切る
最初プロジェクトは以下のようにmasterになっているので、自分の作業する場所を作っていきます。
<img width="206" alt="コメント 2020-02-03 144559.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/a64fd5be-fda5-924d-26dc-3d1fd633466a.png">

この作業をブランチを切るといいます。プロジェクトを右クリック→チーム→切り替え→新規ブランチを選択します。

<img width="572" alt="コメント 2020-02-03 144927.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/efad836c-fcaf-747c-b541-e798884f0b27.png">

ブランチの名前を付けます。ブランチは作業を1つ1つ細かく切って分けていくので、やっている内容がわかりやすい名前が好ましいです。
<img width="428" alt="コメント 2020-02-04 092106.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/44da5441-081e-1e83-08aa-5054b5cd812e.png">


完了をし、ブランチが切れたので、自分の作業を行っていきます。
###コミット、プッシュする
コミット、プッシュしていきます。
**コミット**とは追加・変更したものを自分のリポジトリにセーブするようなイメージです。
**プッシュ**はローカルリポジトリ(コミットしてセーブしたところ)の内容をリモートリポジトリ(masterのリポジトリ)に反映させます。


Gitステージングのところから<font color=#008000>緑の＋マーク</font>で内容を変更したものを移動させます。コミットメッセージを書き、コミットおよびプッシュをします。
<img width="670" alt="コメント 2020-02-03 150914.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/00e60d36-400c-1b73-6bd4-3f6a43cc8624.png">

###プルリクエストを送る
次にプルリクエストを送ります。
**プルリクエスト**とは自分の変更をプロジェクトに反映させてもらえるように要求することです。
これはGitHub上で行います。

branchesを開きます。
<img width="761" alt="コメント 2020-02-03 161903.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/1aa3d0a7-ee1d-1a41-2e44-2744f5dd2d64.png">

以下のような画面になるのでプルリクエストします。
<img width="797" alt="コメント 2020-02-03 154023.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/fdb50c00-6ddb-44bb-0a2a-5f028c38a363.png">

何を変更したか、作業内容を書き、Create pull requestをします。
masterから許可が出るまで待ちましょう。
<img width="566" alt="コメント 2020-02-03 155639.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/8bf0fd9d-a272-3552-ce9d-845f56dfe938.png">



###マージし、ブランチの削除
masterからマージの許可が出てからマージします。
**マージ**とは、簡単に言うと加えた修正を統合することです。

Merge pull requestをします。
<img width="576" alt="コメント 2020-02-03 155809.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/76910b1c-4fc6-ac77-85f0-7b9322e66ecc.png">

そしてComfirm mergeでマージの完了です。
<img width="539" alt="コメント 2020-02-03 155848.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/36365552-ff75-233f-1961-8a238e9bf58a.png">

その後に、ブランチを削除しておきましょう
<img width="581" alt="コメント 2020-02-03 164416.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/cd4e02e6-28f5-ea66-0b32-af9ef82f231a.png">

###masterに戻し、プル
ブランチの削除が完了したら、Eclipse上でmasterに戻し、プルします。プルすることで、プロジェクトが最新の状態になります。
**プル**とは、リモートリポジトリのコミットをローカルリポジトリに送り込みます。データのダウンロードのようなものです。

プロジェクト右クリック→チーム→切り替え→masterにします。
<img width="617" alt="コメント 2020-02-03 165036.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/f5301089-10bb-cf66-ebd7-23f736690972.png">

切り替えが終わったらプルします。
<img width="486" alt="コメント 2020-02-03 165446.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/871c0bb5-8558-b419-618a-877462bb8423.png">

これで、プロジェクトは最新の状態です。

最後に気を付けなければならないのが、自分の作業をそのままmasterでやり続けない用に注意しましょう。
自分の作業をする際は必ず<font color=#FF0000>**新規ブランチを切る**</font>ことが大切です。

##**(おまけ)EclipseからGitHubリポジトリに結び付ける方法**
チームでの開発ではなく個人で、プロジェクトをGithubにあげたりすることもあると思います。
GitHubからクローンの方法は先ほどのやり方と同じです。
では逆にEclipseで作ったプロジェクトをGitHubのリポジトリに結び付ける方法も紹介します。

まず、GitHubでリポジトリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/96de63e7-119d-1846-7ce8-30db2423fe9c.png)

リポジトリの名前を決め、privateかpublicを選びます。
![コメント 2020-02-29 221431.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/ae822b61-7ae7-57c0-0401-f9285214ed6c.png)

作成したリポジトリのURLをコピーして置きましょう。
![コメント 2020-02-29 221804.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/adc6100a-f35d-32db-d659-dbd37643c6f6.png)

次にEclipseにいき、GitHubにあげたいプロジェクトを選択し、右クリック
チーム(E)→プロジェクトの共用(S)を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/969015bf-fc2a-84f2-2430-e16ff9bbd7ca.png)

Gitを選択し、次へ
![コメント 2020-02-29 222538.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/0448afd0-4186-41a1-e985-3339d5f4a7d3.png)

プロジェクトの親フォルダー内のリポジトリーを使用または作成(U)を選択
![コメント 2020-02-29 222722.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/39e93d0c-ee81-c301-41f0-9fc5c72c3e4c.png)

次の画面で、リポジトリの作成(C)を押すとチェックが入るので完了します。
![コメント 2020-02-29 222929.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c233ab27-d987-d28d-d53c-219d847b320a.png)

GitステージングでCommitしてGitHub上のリポジトリを結び付けていきます。
![コメント 2020-02-29 223355.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/ac4a7428-a2ba-5ff3-d0a7-9bb33ce787eb.png)

Commitメッセージをいれて、コミット及びプッシュ
![コメント 2020-02-29 223746.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/c6581d59-48a6-60d9-3aaa-5844fa91ac47.png)

宛先リポジトリーの画面が出てくるので先ほどコピーしたURLを貼り付けて次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/70ea4e3f-cca9-5cb9-db97-690581080a1c.png)

この画面が出てきたらこのまま次へ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/f4391210-18d5-b6a6-dd75-36492af64a4f.png)

結び付けたいリポジトリが出てくるので確認して完了します。
![コメント 2020-02-29 224418.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/b2920d3a-84ba-cf76-477f-6cced22a080d.png)


GitHubで確認してみましょう。１Commitになってれば成功です。
![コメント 2020-02-29 224736.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/39a6928a-0667-fd9f-94da-fa709ac1c909.png)



#参考
- [EclipseでGitを使ってみる | It works for me](https://www.blog.danishi.net/2019/04/30/post-866/)
- [GitHubとEclipseの連携とかまとめ](https://qiita.com/komikcomik/items/207794a332aa581c22d4)
- [RemoteのgitリポジトリからEclipseプロジェクトを作成する | gitの使い方講座](https://git-manual.net/make-eclipse-project-remote-git/)
- [GitHubを使うなら最低限知っておきたい、プルリクエストの送り方とレビュー、マージの基本 (1/2)](https://www.atmarkit.co.jp/ait/articles/1702/27/news022.html)