【備忘録】Eclipseで動的Webを新規作成してGitHub管理まで

# 概要
Eclipseで動的Webのプロジェクトを触っていると、「すでに出来ているプロジェクトへの改変」作業を繰り返すので、実は「新規」で作ろうとすると手順が思い出せずアタフタします。

なので、ここでは備忘録としてEclipse（Pleiades）で新規に動的Webを作成し、HelloWorldを表示するServlertを作成した上でGitHubに登録するまでの手順を備忘録で残しておきます。

★初稿では「Mavenに変換」してMavenプロジェクトにしてましたが、記載内容的には意味がなかったので、Maven化するのを削除しました。（9/26）

# 前提条件
* Eclipse環境（Pleiades）【今回は2022-09版で進めます】
　→Java Full Editionを使用しています。
　→正確には2022-06を更新して09にしてます。(が、途中で2022-09にすげ変わってます。途中で気づいた）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/718cc3d5-a8af-7e1c-7c94-270cdf2a4a93.png)


# 手順1:Pleiades Eclipseを起動する
まずは、Eclipseを起動します。
レイアウトは、昔からこれで慣れているのでカスタマイズしてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/25936ba9-2c1a-9287-07be-6778f2e170a6.png)

# 手順2:新規でプロジェクトを作成する
「ファイル」-「新規」-「動的Webプロジェクト」と進めてクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/75a4c067-6243-3e4e-d1fc-d587bf00b6ba.png)

「プロジェクト名」に適当な名前を入力します。
（今回は「SampleProject」としてます。
入力したら「次へ」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/0e80c34f-f985-4580-64ae-44b6bd07b2fa.png)

まず、いつからかここで作成されるフォルダ構成が変わってしまっています。
なので、見慣れた状態に修正します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/af90d8e6-62f2-7087-b4c6-2a9a66d0324f.png)
「src￥main￥java」を選択して「除去」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/726503a0-d57a-222f-aea6-7c714b1429ed.png)
何もなくなったので「フォルダーの追加」ボタンで再度フォルダを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/b7b116e9-c827-6f8e-7ab3-1b3401504de2.png)
「src」と入力して「OK」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/89b869de-3a0d-d7a4-e88b-16311cee2dc1.png)
下記のようになっていればOK
そしたら「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/36cd8d4b-0c6c-f0f4-8ab9-2db882ccad7e.png)

静的ファイル置き場なども変わってます。
なので、下記の赤枠の箇所を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/57918f92-5c5f-6b08-c09e-97a5fb5a767f.png)
下記のように「src/main/webapp」を「WebContent」に。
web.xmlの生成にチェックを付けます。
そして「完了」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/877ea6a1-622e-2af8-7ef7-f0d9b35f6eea.png)

生成されると下記のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/e89a1441-d3ab-a368-4d7c-3db94393811d.png)

```
C:\PLEIADES\2022-06\WORKSPACE\SAMPLEPROJECT
├─.settings
├─build
│  └─classes
├─src
└─WebContent
    ├─META-INF
    └─WEB-INF
        └─lib
```

# 手順3:JUnitのtestフォルダを追加する

JUnitのテストソースを格納するフォルダを作成します。
プロジェクト（SampleProject）を選択して、右クリックし、「新規」-「フォルダー」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/b9f5948f-3765-f144-8f31-f4dbd7f618ea.png)
新規で「test」をいうフォルダを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/069fd837-c923-2626-c506-209ddde27a84.png)
作成したら、再度プロジェクトを選択して右クリックし、「プロパティー」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/c7de66e3-aa13-2e92-f5e1-60b2c783d3ec.png)
プロパティの左メニューから「Javaのビルド・パス」を選択して、右側の「ソース」タブを選択します。
そして、「フォルダーの追加」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/e6361958-b09e-a665-0c32-ffabcc01edd6.png)
先ほど作成した「test」フォルダを選択して「OK」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/f13e117a-ab0b-7da3-6d33-aecd25a4aba1.png)
追加された「test」を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/a3e63fc3-3149-00a2-6098-7ab95e0e96d2.png)
「テスト・ソースを含む：いいえ」を選択して、「切り替え」をクリック
さらに「ソース・フォルダーごとに出力フォルダーの指定を可能にする」にチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/5d657dd6-bf31-a7a8-1ebb-987ac74e62be.png)
そうすると、下記のように「test」の出力フォルダは分けないとダメだぞ。と言われる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/d77bbf2b-ea7e-d451-9165-bee40c0ed72f.png)
「出力フォルダー」を選択して「編集」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/447f32f4-4af5-99d1-9145-a76a1f73008d.png)
「特定の出力フォルダー」を選択して「参照」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/a84235a9-b17f-7f38-ee4d-daf746f2e2aa.png)
「build」フォルダを選択して、「新規フォルダーの作成」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/5dd13260-d387-8c58-c11d-6c5de2d226b1.png)
新規フォルダー「test-classes」と入力して「OK」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/71482ce2-f676-a00a-cd5f-c04a5ef26d5e.png)
下記のように追加されたら「test-classes」フォルダを選択して「OK」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/65c0de28-af6f-68a8-0b25-e7c254ca14e1.png)
下記のようになるはずなので「OK」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/0dda0fde-cdf0-cf03-3321-ee3a7fced5f8.png)
先ほどのエラーメッセージが消えて、作成した「test-classes」が設定されていたら「適用して閉じる」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/93f749f6-2f4a-333d-6698-e4a38e8cd548.png)

# 手順4:Hello World!サーブレットを作成する
まずは、Servletを追加します。
「src」フォルダを選択して、「新規」-「その他」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/6106aad1-bd63-6876-5a06-5c31d7492af6.png)
リストから「Web」を探して、展開し、その中の「サーブレット」を選択して「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/4952e4da-6aa2-cb0f-afad-fdbefde621ae.png)
Javaパッケージとクラス名を適当に決めて入力して「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/38e963e5-de9e-8ce7-d1d2-2cad40d0678a.png)
特に何も変更せずに「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/db81e453-d0de-3495-87e0-8456e65d4891.png)
今回はGetのみ受け付けることにするので「doPost」はチェックを外しておく。
そして「完了」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/a50a9c7e-eb99-0c22-d6df-888cc457502e.png)
自動的にGetを持ったServletクラスが作成される。
すでにアノテーションで「@WebServlet("/HelloWorld")と書かれているので、web.xmlを改変したりするのは不要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/f4d3f5c4-8088-91a7-f337-4345ef295923.png)

# 手順5:実行してみる
プロジェクトを選択して右クリックし、「実行」-「サーバーで実行」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/b765301c-6c1e-666e-8761-9b2f88a04fdc.png)
「既存のサーバーを選択」を選択していることを確認して、下のサーバー一覧「localhost」を展開する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/4a479060-6e05-417d-3444-03b33e847d6f.png)
今回はTomcat9のJava17で作成しているので下記を選択して「このプロジェクトを実行するときは常にこのサーバーを使用」にチェックを付けて「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/4cfc4cdc-013c-73ec-d444-441845e6eb24.png)
「構成済み」の一覧に「SampleProject」が表示されていることを確認して「完了」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/dcfe09e4-382c-8ce3-2d47-06786cbe2953.png)

初回の起動ではEclipseとOpenJDK Platform binaryの警告が出るので「アクセスを許可する」ボタンを押して進める
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/62a63d81-e9e6-64dc-cc77-2a1a811e4565.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/9e8d3489-4fab-e8a6-578e-f392f3e8244a.png)

自動的にブラウザが起動してSampleProjectのルートへアクセスする。
今回は、ルートには何も設定していないので「404エラー」が表示されることで正解。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/e8146333-4e44-3979-cb47-2e78bc99c339.png)

作成したサーブレット「HelloWorld」をURLの末尾に追加してアクセスすると下記のように表示されたら無事動作していることを確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/cc647832-3c8c-f0f3-a5d9-144f3879cb0d.png)

終了するときは下記のように停止ボタンを押して止める。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/fdde5142-6e0a-cbd4-825a-18cdfe0082f7.png)

# 手順6:GitHubへの登録
最後の作業です。

まずは、SampleProjectを選択し、右クリックして「チーム」-「プロジェクトの共用」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/677b1f35-42c5-9114-95a5-afa154604e78.png)
リポジトリータイプは「Git」を選択して「次へ」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/76bd50cb-dfaf-0876-f94d-4bd312be8097.png)
Gitリポジトリーの構成は、下記のように表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/07968ff8-afed-8b11-3eb0-d380575aeafc.png)
まずは「プロジェクトの親フォルダー内のリポジトリーを使用または作成」にチェックを付けます。
そして、プロジェクトに表示されているSampleProjectを選択します。
（チェックを付けるのではなく、その行を選択します）
そうすると、下の「リポジトリーの作成」ボタンがアクティブになるので、クリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/18c8723b-1b93-e67e-e804-3e793b0de72e.png)
「リポジトリー」欄に「.git」が追加表示されます。
「完了」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/4cc626e2-81cf-2153-fda1-b3316565b3ad.png)

続いて、まずはローカルのGitリポジトリにコミットします。
「チーム」-「コミット」を選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/ecfe0608-4f2e-a88c-48aa-d4a0732706bc.png)
ステージされていない変更に多々列挙されているので、「Ctrl+A」で選択して「ステージされた変更」へドラッグアンドドロップします。
そして、コミットメッセージ欄に適当に記入します。（”Initial Commit”とでも書いておけばOK）
そしたら「コミット」ボタンでコミットします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/7b142976-5040-02a3-5a0b-d0705cb42253.png)

Git操作用のパースペクティブを表示しておきます。右上の切り替えボタンで「Java」と「Git」が切り替えられるようになります。
「ウィンドウ」-「パースペクティブ」-「パースペクティブを開く」-「その他」と選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/b2a85611-5675-7626-e46b-f4b986a92332.png)
パースペクティブ一覧から「Git」を選択して「開く」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/1e8454a2-ca9e-812e-0440-cae323887d63.png)
そうすると下記のようにGit用のタブに切り替わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/ae830c71-f2da-24d9-6337-01b959284770.png)

続いて、GitHub側へ移動して、SampleProjectのリポジトリを作成します。
Public/Privateはどちらでもよいです。
READMEや「.gitignore」などを選択すると「main」のブランチが作成されてしまうので何もしないで「Create repository」をします。
⇒Eclipse側からプッシュしようとすると「master」というブランチが作成されているので、このまま進めると「main」と「master」という2つのブランチが出来上がることになり、結局無駄な「main」ブランチを削除するので、最初からブランチを作らないようにしてます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/fb646e60-1bdc-6ff9-d00b-edafed842fad.png)
何もブランチができないと下記のような画面になります。
ここで表示されている「https://github.com/takanek07/SampleProject.git」というURIが必要になるので、メモっておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/c0512788-ef00-1de6-e931-b476a873af63.png)
Eclipse側でリモートリポジトリ（GitHub）へプッシュします。
「ブランチのプッシュ‘master‘」を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/f699e838-d624-0726-9aa1-1e80dd5ae1f6.png)
下記のような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/213e4665-96eb-4b12-b9b7-144665dddd38.png)
「ロケーション」のURIの欄に先ほどメモったURIをペーストします。
「認証」のユーザーにはGitHubのユーザーIDを入力し、パスワードには「パスワード」ではなく「Personal access token」を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/25e409e0-d6db-3c18-a3c0-05fcc3902090.png)
「Personal access token」とは、GitHubのページで「Setting」-「Developer settings」とメニューを辿ると下記のように「Personal access tokens」を作成、管理するページがありますので、そこで作成したtokenのことです。
※割愛しますが、過去別のところで説明しているのでリンク張っておきます。

https://qiita.com/TAKANEKOMACHI/items/0101f0ff88fad2696e81

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/aada0a47-653e-7a2a-0389-d5e12fd37cdc.png)

次に「プレビュー」か「プッシュ」ボタンで進めていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/9e220065-b940-83c0-a53e-83f6fe09a270.png)
「プッシュ」するとローカルの「master」ブランチがGitHub側のリモートに「新規ブランチ」でmasterができたことが分かります。
「閉じる」をクリックしてダイアログを閉じます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/fad5b308-122e-99b7-5f95-baa760d0ca6f.png)
GitHub側で確認をしてみます。
とりあえず、それっぽく管理できたことが分かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/222251/eedf85b9-b501-b412-2f83-7895463ba4d9.png)

ひとまず、これで終了とします。

次回は、AntビルドでWARファイルを作ったり、JUnitのファイルを作ったりします。