#2【初心者】知識0からeclipseでWebアプリ（Webサイト）を作る．「 GitHubとEclipseを繋げて動的Webアプリを共同開発する」

#はじめに

前回の[#1【初心者】知識0からEclipseでWebアプリ（Webサイト）を作る．「 Webアプリを作る為の環境を構築しよう」](https://qiita.com/RyoyaHase/items/ba13d78aefe821600357)では，EclipseをPCにインストールしてプロジェクトを作り，サーバーを立てて動かしてみた．
次に誰かと開発したり，自分の変更をオンライン上で管理する為にEclipseでGitHubを使用するための設定と，アップロード方法について書いていく．
使用するプロジェクトは[前回](https://qiita.com/drafts/ba13d78aefe821600357/edit)作ったものをそのまま使う．

環境一覧
プログラミングソフト：[Eclipse 2020](https://mergedoc.osdn.jp/)
JAVA SE 14
Tomcat 8.5.88
[Git for windows 2020 10月時点最新版](https://gitforwindows.org/) :version 2.28.0
[Git Hub](https://github.co.jp/)

- **環境作成編**

 #1 [Webアプリを作る為の環境を構築しよう](https://qiita.com/RyoyaHase/items/ba13d78aefe821600357)

 #2 [GitHubとEclipseを繋げて動的Webアプリを共同開発する]()（この記事）2020 10月更新


- **デザインを考えよう編**

- **フロントエンド作成編**

- **バックエンド作成編**

- **実際にサービスを動かしてみよう編**



今回の記事では，

1．Git Hubのインストール（更新）
2．Git Hubでリポジトリの作成
3．リポジトリとEclipseのプロジェクトを連携とコミット
4．作業用ブランチの作成
5．共同でリポジトリを編集する(collaborator登録)．
6. 参加したレポジトリの最新版ブランチをプルする．（最新版をダウンロードしてくる）
7．完成したプロジェクトをデフォルトブランチとして更新（最新の状態を共有できるように）

という流れ．

単語メモ
リポジトリ：バージョン管理によって管理されるファイルと履歴情報を保管する領域
コミット　：ローカルレポジトリのに自分の変更を上書きする（リビジョンとも呼ばれる）．
プッシュ　：リモートリポジトリに自分の変更履歴をアップロードする．
プル　　　：リモートレポジトリの内容をダウンロードしてくる．
マージ　　：リポジトリの内容をコピーすること．
ソリューション：プロジェクトのこと．

#1. Git Hubのインストール（更新）


[Git for windows](https://gitforwindows.org/)にアクセスしてDownloadを押すだけ．
特に設定は変えなくても大丈夫なのでデフォルト状態でインストール．元々過去のバージョンがインストールされていても勝手にアップデートされる．
インストールされたらGit Bashというソフトを開く
![01-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/4ef97c58-48bb-4d96-92b9-07058e94e2cc.jpeg)

Git Bashを起動後に，以下のコマンドを入力して正しくインストール/更新ができているか確認．

```
$ git --version
```

#2. Git Hubでリポジトリの作成
ログインした後，左上のNewからリポジトリを作成．すでに作ったものはNewの下にリストとして表示されている．
![02-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/fc674dc4-1bc8-28a6-7e60-6292d2729e61.jpeg)

Newを押すとリポジトリの作成画面が表示され，
①任意のリポジトリ名（プロジェクト名）
②リポジトリ説明文：任意
③公開するか，非公開にするか．（2019年から無料アカウントでも非公開のリポジトリを作成可能に）
④「Add a README file」はリポジトリの説明や使い方を書くREADMEファイルを事前作成するかどうか．基本的にはチェックを付けとく．

⑤Git の管理に含めないファイルを指定するためのファイル（除外ファイルの指定）．

⑥ライセンス＝使用許諾条件，ライセンスの選択は義務ではないが，ライセンスがない場合はデフォルトの著作権法が適用され，ソースコードの複製，配布，派生物の作成は誰にも許可されない．オープンソースのプロジェクトを作成をする際にはオープンソースライセンスを設定する．

![02-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/26826b51-d358-2fc3-278e-69e5091d079d.jpeg)



#3．リポジトリとEclipseのプロジェクトを連携

リポジトリのトップ画面からCodeを押す．
![04-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/068faca9-64ae-0b47-bb32-9db01b58c8d5.jpeg)

でてきた画面の「HTTPS」を右側のボタンを押してコピーする．

![04-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/08588ff8-fece-fbe9-7db8-ea531cc21d9c.jpeg)

Eclipseを開き，サーバを停止しておく．

![スライド1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/ee4c2d97-394c-2d82-5aed-b4e7b8621481.jpeg)

プロジェクト・エクスプローラーからプロジェクトフォルダを右クリックし，
「インポート」→「インポートの共有」を押す．

![スライド3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/b66f1478-d4d4-86a4-9a7a-e6134151ef2c.jpeg)

インポート画面が開くので，
「Git」→「Gitからプロジェクト」を押す．

![スライド4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/123b1aa8-fcf0-5df8-c555-9d6612d00626.jpeg)

クローンを選ぶ．

![スライド5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/9dda2d4a-bd13-5315-fce1-c1b0af681833.jpeg)

①先ほどGitでリポジトリを作成した際にコピーしたHTTPSのアドレスをコピペする．
②GitHubに登録しているユーザー名
②GitHubに登録しているパスワード
をそれぞれ入力する．

![スライド6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/305e781d-1953-ec68-8583-c7b90d7758aa.jpeg)

作成されているブランチの一覧が表示されるので（今回はmainのみ），一番最新のブランチを選択する．

![スライド7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/f651af8d-3f03-dd07-bc5a-12521f31893c.jpeg)

どこにフォルダを作成されるか聞かれるので，自身で設定したワークスペースファルダ内にプロジェクト名のファルダを作成して設定すると編集が楽．
前回記事からの流れで作っていれば（C:\Users\ユーザ名\Documents\eclipse\プロジェクト名）となる．

![スライド8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/cf257e4b-c034-7cd4-a82a-4048cf0b7a65.jpeg)

初めて作成する際に，秘密の質問を作成するか聞かれるので任意で作成する．一応作っていたほうがいい．

![スライド9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/3af7b804-210b-8010-0557-de8dc7e6f477.jpeg)

新規プロジェクト・ウィザードを使用してインポートにチェックして完了を押す．


![スライド10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c0c03cf2-26b2-17e7-bade-107adf8550f5.jpeg)

あとは， [#1 Webアプリを作る為の環境を構築しよう](https://qiita.com/RyoyaHase/items/ba13d78aefe821600357)の記事にあるように動的Webプロジェクトを新規作成していく．

次に，Eclipse上でGitHubのブランチを管理する為に不可欠なタブを，チーム→リポジトリ・ビューで表示から追加しておく．

![スライド12.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/2ec51a00-59c1-5c49-2d3a-7a7a79700ab7.jpeg)

新規で作ったプロジェクトフォルダをプロジェクト・エクスプローラから右クリックし，チーム→コミットを選択．

![スライド13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/bada6d40-8715-24b5-7e77-2d74db6d5af3.jpeg)

Gitステージングの為のタブが出るので，そこから2個の＋マークを押すと編集したがコミットされていないファイルがすべて下に移動する．特定のファイルだけ更新したい際にはファイル名を右クリックすると1個づつ追加できる．

![スライド14.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/0253cce2-c60f-7bb9-20bc-2d6cf3a580e9.jpeg)

下にファイルが移動していれば大丈夫．

![スライド15.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/cdedc330-e70a-0723-3adf-7414834a7a50.jpeg)

コミットメッセージを入力して（add:変更点など）を入力してコミットを押す．

![スライド16.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5c857999-7dc4-4802-9e94-b37b7d67d35d.jpeg)

Gitレポジトリータブを確認してmainの横にコメントついてることを確認．この時点ではオンライン上では変更されておらずGitHub上にはいないので注意．

![スライド17.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/78dd74a3-d26c-0d52-8c18-28ec6d4917f6.jpeg)

Gitステージングタブから，HEADのプッシュを選択．

![スライド18.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/38e7e368-5ebf-2bf2-4291-99243fc08005.jpeg)

色々と確認タブが出てくるがそのままで大丈夫．

![スライド19.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/192d6fd2-4ad4-d2e6-fdb0-3a857fc1a8b3.jpeg)

![スライド20.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/59fce737-2ef1-18c7-dd02-afc1f544af94.jpeg)

![スライド21.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/cd2e4ae6-386b-0ac9-fef0-f7117aa957db.jpeg)

Remote Tracking 内にあるmainの横にコメントついてることを確認すれば大丈夫，GitHub上にも更新されている．

![スライド22.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/cbbb2764-6526-21ad-1dca-26a89ef3339e.jpeg)

#4．作業用ブランチの作成

チーム→切り替え→New Branch...を選択．

![スライド23.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/59cce39b-7d4c-68d4-e583-c8e2ba22e62d.jpeg)

新しく作成するブランチ名を指定する．ここではnew1というブランチを作成．

![スライド24.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/07691d95-c7fd-ab06-4c6b-0e38104bb144.jpeg)

Gitリポジトリを確認するとnew1が追加されているのを確認する．

![スライド26.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/bfca77bd-9eea-7c3d-124d-d78f1d05f55b.jpeg)

ブランチ名の左上にチェックマークがついているのが編集中のものなのでnew1をクリックする．

![スライド26.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/dfda75a9-bd39-1005-5456-12b2589c1f27.jpeg)

チェックアウトするか聞かれるのでチェックアウトする．（チェックアウトって日本語だと違和感ある）

![スライド27.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/66c114aa-87d9-a68a-d49a-2768cba0dd4e.jpeg)

new1の左上にチェックマークがついてれば大丈夫．

![スライド28.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c0680720-d71a-d553-a585-3b733ea14389.jpeg)

「3．リポジトリとEclipseのプロジェクトを連携とコミット」でやったようにコミットをするとRemote Tracking 内にmainとは別にnew1が増えていればブランチの作成は完了．

![スライド29.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/c50cc6a5-647f-c50e-3feb-83baacad0138.jpeg)

#5．共同でリポジトリを編集する(collaborator登録)．

GitHubから共同で編集したいリポジトリを開き，Settingsを開く．

![スライド1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/89095f9c-b6fc-6069-f743-d7c4cd3c6d19.jpeg)

Stteings内のタブからManage accessを選ぶ．

![スライド2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/99d85d89-6f2e-3d75-4ca9-efc525de9a31.jpeg)

Invite a collaboratorを押す．

![スライド3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/e7e1e96d-f3f1-9644-610a-97cceae878a4.jpeg)

検索窓が出てくるので，一緒に編集したい相手のユーザIDかメールアドレスを入力する．

![スライド4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/2e806a96-63a7-02a3-a726-4186e0510fbb.jpeg)


候補がでてくるので選択．

![スライド6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/980edcb7-2972-60d1-dc87-d53ed89cfbe1.jpeg)

Add ユーザ名 to this repository　を押す．

![スライド8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/698320e0-4030-9e5e-ddf2-adc577d6f18d.jpeg)

Manage accessに追加されていれば問題ない．

![スライド9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/644e32e8-063a-0dd0-673d-53d9b431152d.jpeg)

招待された人には登録メールアドレスにメールが届くのでView invitationを押す．
リンク先で参加するかを尋ねられるのでacceptすれば参加完了．  


![スライド11.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/6b64aa88-7743-0a8d-56d3-02cf72ea4770.jpeg)

参加するとステータスがCollaboratorに変わっている．

![スライド13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a9a3639f-1881-4f4b-84db-e070a29c6390.jpeg)

追加されたコラボレータはレポジトリにアクセス権限が与えられ，プッシュが可能になる．これで共同編集の準備が完了．


#6. 参加したレポジトリの最新版ブランチをプルする．（最新版をダウンロードしてくる）

Gitリポジトリのタブの右上にあるクローンを押す．

![104.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/52a34cce-2327-79d0-1252-af8442f81626.jpeg)

①コラボレータになったリポジトリのHTTPSのアドレスをコピペする．
②GitHubに登録しているユーザー名
②GitHubに登録しているパスワード
をそれぞれ入力する．

![スライド6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/305e781d-1953-ec68-8583-c7b90d7758aa.jpeg)

プルしたいブランチのみにチェックを入れて

![106.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/a550d003-b32a-1c06-bfe1-21614562b874.jpeg)

ディレクトリは分かりやすいところに設定して完了を押す．

![107.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/f7a180ad-b685-45ea-a87c-daf10d86122b.jpeg)

レポジトリのフォルダが作成されるので，Branches→Localからクリックでそのままmainから開くか，レポジトリフォルダを右クリックしてインポートからプロジェクトを開く．（新規作成と同じ手順でやると上手く開かない時があるので注意．）

![108.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/02b9bfaf-7384-e6f4-8c53-6351cd4492ca.jpeg)

しっかりとプロジェクトが開かれているのを確認したら，あとは自分が作業するブランチを新しく作ってプログラムしていく．

![110.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/3565899e-0b62-1952-f620-9a6c7b9f7049.jpeg)

#7. 完成したプロジェクトをデフォルトブランチとして更新（最新の状態を共有できるように）

２つ方法があり
・Git Hubでデフォルトのブランチを変更する．
・mainに設定しているブランチにマージする．

Git Hubでデフォルトのブランチを変更する方法では，
①Settingsタブを選択
②Branchesタブを選択
③デフォルトにしたいブランチを選択してUpdateを押す．

![09-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/758746/5bf23e53-8d8b-ed8d-9154-092bc2122cfe.jpeg)

mainに設定しているブランチにマージする方法では，ブランチを切り替えて最新版をプッシュすればおｋ．

とりあえずこれで共同開発できる準備ができました．
次回は「どんなサイトを作るか」考えていきます．