3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-14

#はじめに

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

環境一覧
プログラミングソフト:Eclipse 2020
JAVA SE 14
Tomcat 8.5.88
Git for windows 2020 10月時点最新版 :version 2.28.0
Git Hub

  • 環境作成編

#1 Webアプリを作る為の環境を構築しよう

#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にアクセスしてDownloadを押すだけ.
特に設定は変えなくても大丈夫なのでデフォルト状態でインストール.元々過去のバージョンがインストールされていても勝手にアップデートされる.
インストールされたらGit Bashというソフトを開く
01-1.jpg

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

$ git --version

#2. Git Hubでリポジトリの作成
ログインした後,左上のNewからリポジトリを作成.すでに作ったものはNewの下にリストとして表示されている.
02-1.jpg

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

⑤Git の管理に含めないファイルを指定するためのファイル(除外ファイルの指定).

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

02-2.jpg

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

リポジトリのトップ画面からCodeを押す.
04-1.jpg

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

04-2.jpg

Eclipseを開き,サーバを停止しておく.

スライド1.JPG

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

スライド3.JPG

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

スライド4.JPG

クローンを選ぶ.

スライド5.JPG

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

スライド6.JPG

作成されているブランチの一覧が表示されるので(今回はmainのみ),一番最新のブランチを選択する.

スライド7.JPG

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

スライド8.JPG

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

スライド9.JPG

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

スライド10.JPG

あとは, #1 Webアプリを作る為の環境を構築しようの記事にあるように動的Webプロジェクトを新規作成していく.

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

スライド12.JPG

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

スライド13.JPG

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

スライド14.JPG

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

スライド15.JPG

コミットメッセージを入力して(add:変更点など)を入力してコミットを押す.

スライド16.JPG

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

スライド17.JPG

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

スライド18.JPG

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

スライド19.JPG

スライド20.JPG

スライド21.JPG

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

スライド22.JPG

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

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

スライド23.JPG

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

スライド24.JPG

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

スライド26.JPG

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

スライド26.JPG

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

スライド27.JPG

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

スライド28.JPG

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

スライド29.JPG

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

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

スライド1.JPG

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

スライド2.JPG

Invite a collaboratorを押す.

スライド3.JPG

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

スライド4.JPG

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

スライド6.JPG

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

スライド8.JPG

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

スライド9.JPG

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

スライド11.JPG

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

スライド13.JPG

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

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

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

104.jpg

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

スライド6.JPG

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

106.jpg

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

107.jpg

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

108.jpg

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

110.jpg

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

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

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

09-3.jpg

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

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

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?