eclipse4.8 で maven で wabapp(servlet, jsp) の雛形作成

eclipse4.8 で maven の webapp(servlet, jsp) の雛形を作るとエラーがいくつかあったりしたので備忘録でメモ
使った eclipse は `pleiades-4.8.0-java-win-64bit-jre_20180923`
プロジェクト作成時に標準のディレクトリ構成がいくつかなかった...
github 入れて捨てたら空ディレクトリだめなの忘れてて追加したやつ全部、消えてしまった．．． `.gitkeep` でとりあえず逃げよう．．．
一旦、作ったやつを github [java-webapp-clump](https://github.com/sueasen/java-webapp-clump) に入れてます、Bootstrap で見た目だけそれっぽく．．．
プロジェクト作成からはめんどくさい方は [サンプルプロジェクト実行まで](https://qiita.com/sueasen/items/0a4399ed41648ae89f41#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E5%AE%9F%E8%A1%8C%E3%81%BE%E3%81%A7) を参考にしてください

# プロジェクト作成からJSPブラウザ表示まで
## maven プロジェクト作成
1. 右クリック - [新規] - [プロジェクト]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/2f412f23-aaf3-acb1-e70b-9d758a93a05a.png)
1. [Maven] - [Maven プロジェクト] - [次へ]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/09ee2f44-577d-8c85-f9b4-c2faece50e2b.png)
1. デフォルトのまま [次へ]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/75d91cf3-522e-ec09-b2dc-117dc6959e84.png)
1. [フィルター] に `webapp` 入力 - [アーティファクトId] `maven-archetype-webapp` 選択 - [次へ]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/80eb0665-03c3-64d0-a40b-2fc02f361c4c.png)
1. [グループId], [アーティファクトId] に 任意の値 入力 - [完了]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/819ec7ea-1dc0-6811-6ff6-6bd842865a11.png)

## ディレクトリ追加(maven 標準に合わせて最低限)
1. src/main/java を追加
1. src/test/java を追加
1. src/test/resources を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/191bb2db-2d29-be90-539e-b92303a8858d.png)

参考：maven 標準ディレクトリ構成

|ディレクトリ|役割|
|---|---|
|src/main/java|作成するアプリケーション/ライブラリのソースコード|
|src/main/java|作成するアプリケーション/ライブラリのソースコード|
|src/main/resources|作成するアプリケーション/ライブラリのリソース|
|src/main/filters|リソースに適用するフィルタ|
|src/main/assembly|アセンブリ記述子、配布用ファイル (zip や tar.gz など) の作成に関する情報|
|src/config|設定ファイル|
|src/main/webapp|Web アプリケーションに必要なソース|
|src/test/java|テスト用のソースコード|
|src/test/resources|テスト用のリソース|
|src/test/filters|テスト用のリソースに適用するフィルタ|
|src/site|サイトの作成に必要なファイル|

## pom 更新
1. エンコード、Javaのバージョン設定
1. Servlet API を追加
1. JSTL タグライブラリを追加
1. [実行] - [Maven clean] で更新
```xml:pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

  <modelVersion>4.0.0</modelVersion>
  <groupId>webappjavabase</groupId>
  <artifactId>webappjavabase</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>webappjavabase Maven Webapp</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <java.version>1.8</java.version>
    <maven.compiler.source>${java.version}</maven.compiler.source>
    <maven.compiler.target>${java.version}</maven.compiler.target>
  </properties>

  <dependencies>
    <!-- servlet api -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
    </dependency>
    <!-- jsp tag library jstl -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <dependency>
      <groupId>org.apache.taglibs</groupId>
      <artifactId>taglibs-standard-impl</artifactId>
      <version>1.2.5</version>
      <scope>runtime</scope>
    </dependency>
  </dependencies>

  <build>
    <finalName>webappjavabase</finalName>
  </build>
</project>

```

## 起動確認（サーバ実行 Tomcat8）
1. プロジェクト選択して右クリック - [実行] - [サーバで実行]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/07539142-91d7-8e86-235c-4efe98ba2d29.png)
1. [Tomcat8] 選択 - [完了]
1. "Hello World!"が表示されればOK（`src/main/webapp/index.jsp` が表示)
※適当なブラウザからもURLで確認できる `http://localhost:8080/projectname` 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/f5e07c79-0feb-8889-ba9b-c3d98c2be0ea.png)

## Servlet 作成して JSP 表示
1. Servlet を作成するパッケージ作成 ※例では `src/main/java/controller`
1. 作成したパッケージ直下に `HttpServlet` を継承したファイル作成 ※例では `SampleServlet`
    - `@WebServlet` でリクエストURLのパスを設定 ※ 例では `/sample`
    - `doGet` の中で JSP 指定してフォワード
1. プロジェクトをサーバ実行して上のURLで表示できればOK ※ 例では `http://localhost:8080/projectname/sample`

```java:例 SampleServlet.java
package controller;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * {@link SampleServlet}
 */
@WebServlet("/sample") // ここがリクエストURLの一部になる ex) http:localhost:8080/projectname/sample
public class SampleServlet extends HttpServlet {

	/**
	 * {@inheritDoc}
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        // 指定したファイルに受け取ったリクエストを転送してレスポンスを返す
		String view = "/index.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view);
		dispatcher.forward(request, response);
	}

	/**
	 * {@inheritDoc}
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}

```

# サンプルプロジェクト実行まで
Bootstrap5いれてみためだけそれっぽくしてます

## GitHub から zip ダウンロード
1. GitHub の [java-webapp-clump](https://github.com/sueasen/java-webapp-clump) を開く
1. [Code] - [Download ZIP] で zip ダウンロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/1c1c9cdf-a145-6911-2b05-61d73e6cad2e.png)

## Eclipse にプロジェクトをインポート
1. Eclipse ひらく
1. [ファイル] - [インポート] を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/cafd58bd-a92d-cd8a-e971-0f26ad400d9e.png)
1. [一般] - [既存プロジェクトをワークスペースへ] を選択して [次へ] を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/aa90c7d4-a90b-e133-fc61-1ead1f377c5e.png)
1. [アーカイブ・ファイルの選択] を選択して GitHub からダウンロードした `java-webapp-clump-main.zip` を指定して [完了] を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/358d2b3f-6ee1-a5d8-6677-6520f360941c.png)
1. ビルドをまってエラーがなければ一旦、OK（警告は中途半端な状態にしてるので出てしまいます．．．）

## サーバ実行(Tomcat8)
1. プロジェクト `java-webapp-clump` を選択して右クリック - [実行] - [サーバで実行] を押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/4b800a49-cc01-7b71-8d8c-a25da6924d68.png)
1. Java8 の [Tomcat8.5サーバ] を選択して [完了] を押下 (2回目からは [ローカルホストのTomcat8(Java8)] を選べばOK)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/8dea8d3f-955f-c116-75c4-80f772527cc8.png)
1. 起動したら http://localhost:8080/java-wabapp-clump/ にアクセスで以下のページが開けばOK
※ eclipse で表示されるページは気にしないでOK...Eclipseの設定変えて外部ブラウザを開くようにした方が良いかも．．．
※ 詳細は [eclipseで起動するWebブラウザを変更](https://qiita.com/sueasen/items/452a2fa756f61c9c6817) を参照
※ 外部ブラウザへの変更方法：ヘッダメニュー[ウィンドウ] - [設定]クリック - [一般] - [Webブラウザー]クリック - [外部Webブラウザ―を使用] を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/f723a7d4-4e54-7a43-0446-020e98418028.png)

## トラブルシューティング
複数端末からサンプル落として実行したら通信状況？？とかではまったケースがいくつかあったので解決までの対処方法の備忘録

- ビルドエラー出てないけどTomcat起動がうまくいかない
    - 原因：Maven依存関係(プロジェクトから参照してるライブライetc..., pom.xml参照) の取得がうまくできていない
    - 対処：
        1. Mavenローカルリポジトリの直下を全部削除（エクスプローラを使用、削除できない時は eclipse 一旦、落とす）
            - MavenローカルリポジトリのWindowsデフォルトパス： `%HOMEPATH%\.m2\repository`
            - Mavenローカルリポジトリのeclipseからの確認方法
                - ヘッダメニュー[ウィンドウ] - [設定] をクリック
                - [Maven] - [ユーザ設定] をクリックで表示される [ローカルリポジトリ―] の値
        1. eclipse で プロジェクト右クリック - [Maven] - [プロジェクトの更新] を実行

- ビルドエラーが出ている or ビルド失敗（Maven依存関係の取得失敗）
    - 原因, 対処：「ビルドエラー出てないけどTomcat起動がうまくいかない」と同じ

- ビルドエラーが出ている or ビルド失敗（GitHubからのコード取得失敗）
    - 原因：GitHubからの zip ダウンロード時に一部ファイルが欠落して取得がうまくできていない
    - 対処：
        1. プロジェクトを削除して 「GitHubからzipダウンロード」からやり直す
            - プロジェクトの削除時の注意、削除ダイアログの [ディスク上からプロジェクト・コンテンツを削除] を必ずチェック
            ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/b0814157-c6a5-6a7c-84af-245eef9dbf19.png)
            - プロジェクト削除時に上のチェックを忘れた方はエクスプローラを使用してワークスペースから削除

- 実行してTOPページ開くがメニューで他ページ行くと 404 NotFound でページ遷移できない
    - 原因：プロジェクトのビルド失敗でクラスファイルが作られてない
    - 対処：
        1. eclipse のヘッダメニュー [プロジェクト] - [クリーン] をクリック

# Eclipse と GitHub つなげる
eclipse と Github つなげるときの参考に大きいので別ページ．．．
- [GitHubアカウント作成＆アクセストークン取得](https://qiita.com/sueasen/items/d00156f2617305b01511)
- [GitHub 空リポジトリ作成 ＆ eclipse からプロジェクトを入れる](https://qiita.com/sueasen/items/d9cfa34557b5d21d1f9f)
- [Githubのリポジトリを ecipse に落としてくる](https://qiita.com/sueasen/items/07ae91c5ebbee9a4de81)

# Java Webアプリざっくり構成
3層アーキテクチャ（プレゼンテーション層（UI）、ビジネスロジック層（サービス（機能））、データアクセス層（データ処理））に分けた構成やMVCモデルをもとにしてる
今回のJava Webアプリの各リソースの関連、役割ははこんな感じ
サンプルプロジェクトにはビジネスロジック層は入口だけ．．．

## 各リソースの関連図・配置場所
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51758/c805f3bb-2643-900c-cf3f-7fe0af5e4d26.png)

## 各リソースの役割 （サンプルにない箇所も多い．．．）

|リソース|役割|備考|サンプル有無|
|---|---|---|---|
|JSP(HTML)|UI部分。入出力をおこなう|ビジネスロジックは実装しない|○|
|Servlet(Controller, Action)|画面遷移、業務ロジック(サービス)の呼出|ビジネスロジックは実装しない|○|
|Dto(VO)|入出力項目、データの受け渡しで使われる箱|属性のみを持つ|○|
|Service|業務処理の入口、トランザクションを管理、ServiceがServiceを持ったり共通する処理はビジネスロジックのクラスとして独立させたり Entity に処理を持たせることが多い|interface と実装を分離する|○|
|Dao|データ参照、登録、更新、排他制御をおこなう|interface と実装を分離する|×|
|Entity|データモデル、属性の保持とモデルが行う処理をもつ|データのみ持つ基底クラスと処理を持つ拡張クラスに分ける|×|

## 3層アーキテクチャ

|層|概要|
|---|---|
|プレゼンテーション層|入出力の部分、ブラウザなどを使ってユーザとの入力・出力を行う。広義でとらえるとシステム外とのに入出力を管理する役割がある。UI/UXを決めるところ、別の言葉だとフロントエンド|
|ビジネスロジック層(アプリケーション層)|入力に対しての処理、提供するサービス（システム）の処理部分で入力を受けて結果（出力）を返す、別の言葉だとバックエンド（データアクセス層含む）|
|データアクセス層(データ層)|処理したデータを管理、ここでは登録・更新・削除などデータアクセスする部分を分けて記載しているがデータベースなどを一つの層としてデータ層とすることもある、データベースは別の用語だとDWH(データウェアハウス)などもある|

## MVCモデル

|名称|概要|
|---|---|
|Model|システムの処理部分（ビジネスロジック・データアクセス）。Controller から使われる、View/Controller に依存しないように作ると疎結合になる|
|View|入力・出力(表示)の部分。UI/UX の部分。Controller を使う、見た目部分のみ改善できるようになる、ただし Model の改修に影響を受けやすい|
|Controller |Model と View をつなぐ部分。Viewから使われて Model を使う、View からユーザ入力をもらい Model を呼び出し結果を View に返す、Model・View の改修に影響を受けやすいが Controller のみ改善で処理フローの改修が可能な時がある|

※補足:コメント
この構成は一昔前までは主流だったが最近は プレゼンテーション層の Controller をクライアント(フロントエンド)に持たせる感じの MVVMモデルが流行ってきてる
その流れにあるのがフロントエンドのFWにある React, Vue などを使ったシステム
バックエンドは業務ロジック呼び出しのみ行う Controller があり API の受け口として機能する
またAPIを小さい機能として独立させていきマイクロサービスとしてシステム開発することが増えてきてる

# Appendix（参照ページ, サンプル場所 etc...）
参照してるページだったりサンプルの場所です

### サンプル
- [サンプル(ベース) github java-webapp-clump](https://github.com/sueasen/java-webapp-clump)
- [サンプル(処理の流れ・いろいろ処理) github java-webapp-clump](https://github.com/sueasen/java-webapp-clump/tree/answer0926)

※サンプル使った構築手順は  [サンプルプロジェクト実行まで](https://qiita.com/sueasen/items/0a4399ed41648ae89f41#%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E5%AE%9F%E8%A1%8C%E3%81%BE%E3%81%A7)  を参考に
### GitHub連携
- [GitHubアカウント作成＆アクセストークン取得](https://qiita.com/sueasen/items/d00156f2617305b01511)
- [GitHub 空リポジトリ作成 ＆ eclipse からプロジェクトを入れる](https://qiita.com/sueasen/items/d9cfa34557b5d21d1f9f)
- [Githubのリポジトリを ecipse に落としてくる](https://qiita.com/sueasen/items/07ae91c5ebbee9a4de81)
### 処理の流れ・いろいろな処理
- [JSP と Servlet ざっくりまとめ](https://qiita.com/sueasen/items/37d97ebda6117f6f63c3)
- [Servlet と Service ざっくりまとめ](https://qiita.com/sueasen/items/233b239456567fbbc849)
- [JSPとServletでファイルアップロード](https://qiita.com/sueasen/items/f3e026f35f3b7323a98b)
- [Service と Dao(DB処理) と Entity ざっくりまとめ](https://qiita.com/sueasen/items/e170930fa3d8be50499c)
- [JSP/Servlet から WebAPI（フリー、APIキー不要）つかってみる](https://qiita.com/sueasen/items/e9cec1d10f1ba2e323a7)
- [JSP/Servlet にリクエスト・レスポンスにヘッダ設定などする前後処理を入れる Filter](https://qiita.com/sueasen/items/0e40b2a5c004bedb5ddf)
### eclipse設定
- [Tomcat の ホットデプロイ (リロード) 設定（起動時にJava変更を反映）](https://qiita.com/sueasen/items/931733fd9106dd80eb88)
- [eclipseで起動するWebブラウザを変更](https://qiita.com/sueasen/items/452a2fa756f61c9c6817)