Java の JSP , Servlet を使った Web App 開発のはなし
JSP と Servlet の関係をざっくりまとめる
細かいことは気にしない！！いったんは流れが分かればOK！！！！
説明で使ってるサンプルプロジェクトは GitHub java-webapp-clump にあります

JSP, Servlet の役割

JSP
画面を作るやつ
表示・入力・URL実行
Servlet
画面(ブラウザ)から呼ばれて処理を呼ぶやつ
表示する画面決める・入力を受け取る・処理を呼び出す・処理結果を設定する

URL で画面（JSP）を表示

まずは画面が表示されるまでのつながり

ざっくりした流れ

ブラウザでURLを実行 ( URL直接うったり画面のボタン押したり etc.. )
Servlet が呼び出される
Servlet が JSP を返す
ブラウザにJSPが表示 ( 画面を表示 )

あとは 1～4 を繰り返す。
Servlet がブラウザから URL で呼び出されて JSP を返すことでやりとりしてる。

URL - Servlet のつながり

URL から Servlet を呼び出すときに気にするところ

HttpServlet を継承
@WebServlet が URL パスになる
URL を直接、うったときは get になるので doGet メソッドが実行される

RetroForIfServlet.java

@WebServlet("/retro_forif") // ここが URL のパス になる
public class RetroForIfServlet extends HttpServlet { // HttpServlet を継承する

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) // このメソッドが呼ばれる
			throws ServletException, IOException {
        // ・・・
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) // このメソッドは今は気にしない
			throws ServletException, IOException {
		// ・・・
	}
}

これで RetroForIfServlet の doGet メソッドが URL に
http://localhost:8080/java-wabapp-clump/retro_forif
をうったら呼び出される
画面にあるリンクとかクリックしたときも同じ

※Java の WebアプリのURLの見方はこんな感じ
http(s):// サーバ名・IP : ポート番号 / アプリ名 / アプリで決めたURLパス（ここでは Servlet で決めたやつ）

Servlet - JSP のつながり

Servlet から JSP を呼び出すときに気にするところ

request.getRequestDispatcher で表示したい JSP を指定 ( webaapp から相対パス )
forward で JSP に処理を転送 ( JSP が実行される )

RetroForIfServlet.java

	/** RetroForIfServlet.doGet メソッド */
    // 	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String view = "/WEB-INF/view/retroForIf.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view); // JSPを相対パスで指定して取得
		dispatcher.forward(request, response); // JSP に処理を転送
	}

これで RetroForIfServlet の doGet メソッドの処理で retroForIf.jsp が実行されるようにしている
retroForIf.jsp が実行されることでブラウザに画面が表示される

JSP - Servlet の値の受け渡し

画面 JSP から入力した値や Servlet から渡す値のつながり
JSP, Servletの値の受け渡しで使うスコープとしてリクエストスコープ、セッションスコープ、アプリケーションスコープがある
EL式でスコープを省略したときはリクエストスコープ、セッションスコープ、アプリケーションスコープの順で優先して取得できる

リクエストスコープ：クライアント（ブラウザ）から1回の通信が有効範囲
セッションスコープ：クライアント（ブラウザ）からの通信が有効範囲（ブラウザ閉じたりタイムアウトするとデータなくなる）
アプリケーションスコープ：アプリが有効範囲（アプリを落とす（サーバ停止）するとデータなくなる）

リクエストスコープ使った Servlet と JSP の受け渡し

JSP から Servlet に値を渡す

JSP から Servlet に値を渡すときに気にするところ

JSP
- form タグを使って action に URLパス , method に post を設定 ( Servlet の doPost メソッドが呼べる)
- input タグを使って name にキーを設定
- input タグの type = subimit はボタン
Servlet
- doPost メソッドを使う
- request.setCharacterEncoding で文字コード指定 (指定しないと日本語が文字化けする)
- request.getParameter で input タグの name に設定したキーを指定で値を取得
  (取得した値を String になる...用途に応じて型を変えてあげる, オブジェクト使えない...)

retroForIf.jsp

    <form action="retro_forif" method="post"> // action が URLパス, method に post
        <label>input：</label>
        <input type="number" name="input1" size="2" value="${input1}" min = "0" max = "9" required placeholder="0-9" /> // name にキーを設定
        <input type="hidden" name="workno" value="1" /> // name にキーを設定
        <input type="submit" /> // submit でボタンを配置
    </form>

RetroForIfServlet.java

	/** RetroForIfServlet.doPost メソッド */
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8"); // 文字コードを指定, `UTF-8` が良く使われる

		if ("1".equals(request.getParameter("workno"))) { // workno の値を取得
			int input = Integer.parseInt(request.getParameter("input1")); // input1 の値を取得
    		// ・・・
		} 
		// ・・・
	}

Servlet から JSP に値を渡す

Servlet から JSP に値を渡すときに気にするところ

Servlet
- request.setAttribute でキーと値を設定 (オブジェクトを設定できる)
- JSP - Servlet で取得した値をとっておきたいときも設定が必要
JSP
- ${ キー } のみでOK（オブジェクトの時はメソッドも使える）
- 値がブラウザで表示される

RetroForIfServlet.java

	/** RetroForIfServlet.doPost メソッド */
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		// ・・・

		if ("1".equals(request.getParameter("workno"))) {
    		// ・・・
			request.setAttribute("result1", result); // result1 をキーにして値を設定
			request.setAttribute("input1", input); // input1 をキーにして値を設定
			request.setAttribute("target1", target); // target1 をキーにして値を設定
		} 
		// ・・・
	}

retroForIf.jsp

    <form action="retro_forif" method="post">
        <label>input：</label>
        <input type="number" name="input1" size="2" value="${input1}" min = "0" max = "9" required placeholder="0-9" /> // input1 の値を取得
        <input type="hidden" name="workno" value="1" />
        <input type="submit" /> // submit でボタンを配置
    </form>
    <p>当てる数は．．．
        <c:if test="${!empty target1}"><span class="target"><c:out value="${target1}"/></span></c:if> // target1 の値を取得
    </p>
    <textarea rows="3" cols="80" name="result1" disabled placeholder="結果は．．．"><c:out value="${result1}"/></textarea> // result1 の値を取得
    <hr/>

セッションスコープ使った Servlet と JSP の受け渡し

リクエストスコープを使った値の受け渡しだとページ遷移などで情報をとっておけない
セッションスコープを使うことで情報をオブジェクトとしてとっておくことができる（※同一セッション内のみ）
セッションスコープ使った Servlet と JSP に値を渡すときに気にするところ

Servlet
- request.getSession() でセッションスコープが取得できる
- セッションスコープへの値の設定、取得に関してはリクエストスコープと同様のメソッド使える
  - request.getSession().setAttribute(キー, 値) でキーと値を設定 (オブジェクトを設定できる)
  - request.getSession().getAttribute(キー) で設定した値を取得（Object が戻ってくるのでキャストする必要あり）
- request.getSession().invalidate() でセッション情報を破棄
JSP
- ${ キー } のみで基本的にはOK（オブジェクトの時はメソッドも使える）
- Servlet でリクエスト, セッションに対して同じキーで設定した時はリクエストが優先されてしまう
- リクエスト、セッションで同じキーを設定した時にセッションの情報を取りたいときは ${ sessionScope.キー } で取得

Servlet - セッションスコープへの値設定

		// セッションスコープ値設定
		request.getSession().setAttribute("key", object);
		// セッション破棄
		request.getSession().invalidate();

JSP - セッションスコープからの値取得

		// リクエストに同一キーがない時（基本はこちらでOK）
		${key}
		// リクエストに同一キーがある時
        ${sessionScope.key}

アプリケーションスコープ使った Servlet と JSP の受け渡し

アプリケーションで情報を保持する方法としてアプリケーションスコープがある
ただしサーバ停止すると失われるのでDBを使うことが多いかも．．．
パフォーマンスとかでDBのデータ（マスタデータ）をキャッシュするとかで使うことがある
アプリケーションスコープ使った Servlet と JSP に値を渡すときに気にするところ

Servlet
- getServletContext() でアプリケーションスコープが取得できる
- アプリケーションスコープへの値の設定、取得に関してはリクエストスコープと同様のメソッド使える
  - getServletContext().setAttribute(キー, 値) でキーと値を設定 (オブジェクトを設定できる)
  - getServletContext().getAttribute(キー) で設定した値を取得（Object が戻ってくるのでキャストする必要あり）
JSP
- ${ キー } のみで基本的にはOK（オブジェクトの時はメソッドも使える）
- Servlet でリクエスト, セッション、アプリケーションに対して同じキーで設定した時はリクエストが優先されてしまう
- リクエスト、セッション、アプリケーションで同じキーを設定した時にアプリケーションの情報を取りたいときは ${ applicationScope.キー } で取得

Servlet - アプリケーションスコープへの値設定

		// アプリケーションスコープ値設定
		getServletContext().setAttribute("key", object);

JSP - アプリケーションスコープからの値取得

		// リクエスト、セッションに同一キーがない時（基本はこちらでOK）
		${key}
		// リクエスト、セッションに同一キーがある時
        ${applicationScope.key}

Servlet, JSP を作ってみる

Servlet, JSP で簡単に画面を表示

URL をリクエストしたらJSPを表示する流れを作ってみる

1. Servlet とりあえず doGet のみのクラス作成

/java-webapp-clump/src/main/java/presentation/servlet 直下に作成
HttpServlet を継承
@WebServlet にURLパスを指定 ( 下のコード例 http://localhost:8080/java-wabapp-clump/web_app_work )
doGet メソッドをオーバーライド
request.getRequestDispatcher で表示したい JSP を指定 ( 下のコード例 /src/main/webapp/WEB-INF/view/work.jsp )

WorkServlet.java

package presentation.servlet;

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;

@WebServlet("/web_app_work")
public class WorkServlet extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String view = "/WEB-INF/view/work.jsp";
		RequestDispatcher dispatcher = request.getRequestDispatcher(view);
		dispatcher.forward(request, response);
	}
}

2. JSP とりあえずなんか表示するの作る

/java-webapp-clump/src/main/webapp/WEB-INF/view 直下に作成
最初の5行が JSP の設定
それ以降は HTML をベースに JSP を使ってる

work.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>

<!doctype html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>JavaDevelop</title>
    <link rel="shortcut icon" href="<c:url value="/assets/favicon.ico" />">
    <link rel="stylesheet" href="<c:url value="/assets/bootstrap.min.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/bootstrap-icons.css" />">
    <link rel="stylesheet" href="<c:url value="/assets/styles.css" />">
</head>

<body>

    <%@ include file="./_headerNavbar.jsp" %>

    <main>
        <div class="container workspace">
            <h2>Hello World!</h2>
        </div>
    </main>

    <footer class="footer mt-auto fixed-bottom py-3 bg-secondary"></footer>

    <script src="<c:url value="/assets/bootstrap.bundle.min.js" />"></script>
    <script src="<c:url value="/assets/script.js" />"></script>
</body>

</html>

3. URL を実行して画面が表示できるか確認

ここまでやれば以下の URL 実行で画面が表示される！
http://localhost:8080/java-wabapp-clump/web_app_work

JSP 入力できるようにして Servlet で受け取って JSP に返す

先ほどのServlet → JSP 表示までをもとにして次は入力して画面に表示までを作ってみる

1. JSP 入力できるようにする（mainタブの中を修正）

/java-webapp-clump/src/main/webapp/WEB-INF/view/work.jsp の main タブの中を編集
form タグが重要, action に URLパス, method に "post" を指定 ( 下のコード例で上で作った Servlet の doPost メソッド実行 )
入力項目は input タグを使う, name を設定 ( Servlet で入力値を取得するときに使う )
実行ボタンは input タグで type に "submit" を指定

work.jsp


    <main>
        <div class="container workspace">
            <h2>Hello World!</h2>
	        <form action="web_app_work" method="post">
	            <label>入力：</label>
	            <input type="text" name="input1" />
	            <input type="submit" />
	        </form>
        </div>
    </main>

2. Servlet で入力を取得してなんかしら値を JSP に返す（doPostを追加）

request.setCharacterEncoding で文字コード指定 ( 指定しないと日本語が文字化けする可能性あり )
request.getParameter( "JSPで設定した name" ) で入力値を取得
request.setAttribute( "キー" , 値 ) で返したい値を設定 ( JSP で値を取得するときにキーを使う )
最後の doGet メソッド呼び出しで JSP を再度、表示する

WorkServlet.java


	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");

		String input1 = request.getParameter("input1");
        request.setAttribute("result1", "入力したのは " + input1);

		doGet(request, response);
	}

3. JSP で返ってきた値を表示する（mainタブの中に追記）

/java-webapp-clump/src/main/webapp/WEB-INF/view/work.jsp の main タブの中を編集
${ Servlet で設定したキー } で値を取得
c:out を使ってるのは安全のため．．．
入力に <script>alert(11111)</script> とか入れるとスクリプトが実行できてしまう

work.jsp


    <main>
        <div class="container workspace">
            <h2>Hello World!</h2>
	        <form action="web_app_work" method="post">
	            <label>入力：</label>
	            <input type="text" name="input1" />
	            <input type="submit" />
	        </form>
            <hr/>
            <p>返ってきた値は．．．<c:out value="${result1}"/></p>
            <p>出るけど危険．．．${result1}</p>
        </div>
    </main>

4. URL を実行して画面を表示して入力してボタン押して動きを確認

ここまでやれば以下の URL 実行で画面が表示される！
表示された画面のテキスト入力して送信ボタン押して動きを出力まで確認できるはず

Servlet/JSP の受け渡しにオブジェクト（DTO）を使ってみる

先ほどのServlet・JSP の入力の受け渡しのところで Servlet → JSP に返すところをオブジェクト（DTO）にまとめたのを作ってみる

1. Servlet・JSPの受け渡し用のオブジェクト(DTO) を作成

/java-webapp-clump/src/main/java/dto 直下に作成

Work.java


package dto;

/**
 * {@link Work}
 */
public class Work {

	/** 入力値 */
	private String input;

	/**
	 * コンストラクタ
	 * @param input 入力値
	 */
	public Work(String input) {
		this.input = input;
	}

	/**
	 * input を取得します
	 * @return input
	 */
	public String getInput() {
		return input;
	}

	/**
	 * input を設定します
	 * @param input 入力値
	 */
	public void setInput(String input) {
		this.input = input;
	}

	/**
	 * てきとうな文字列を返します
	 * @return てきとうな文字列
	 */
	public String tekito() {
		return "てきとうすぎる...";
	}

	/**
	 * てきとうな文字列を返します
	 * @return てきとうな文字列
	 */
	public String tekito(String tekito) {
		return "てきとうすぎる...引数..." + tekito + "...入力..." + input;
	}
}

2. ServletでDTOのインスタンス生成してJSPで使えるように設定（doPostに追記）

request.setAttribute を使って DTO を設定

WorkServlet.java


	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");

		String input1 = request.getParameter("input1");
		request.setAttribute("result1", "入力したのは " + input1);

		request.setAttribute("resultDto", new Work(input1)); // この行を追加

		doGet(request, response);
	}

3. JSP でDTOを使って表示する（mainタブの中に追記）

/java-webapp-clump/src/main/webapp/WEB-INF/view/work.jsp の main タブの中を編集
getter は ${ Servlet で設定したキー.インスタンス変数 } で使える
メソッドは ${ Servlet で設定したキー.メソッド } で使える
メソッドの文字列の引数はシングルクォーテーション ' で括る (数字は括らないでOK)

work.jsp


    <main>
        <div class="container workspace">
            <h2>Hello World!</h2>
	        <form action="web_app_work" method="post">
	            <label>入力：</label>
	            <input type="text" name="input1" />
	            <input type="submit" />
	        </form>
            <hr/>
            <p>返ってきた値は．．．<c:out value="${result1}"/></p>
            <p>出るけど危険．．．${result1}</p>
            <hr/>
            <hr/>
            <p>DTOつかってみると．．．</p>
            <p>getter は変数名で取得できる：<c:out value="${resultDto.input}"/></p>
            <p>メソッドも使える：<c:out value="${resultDto.tekito()}"/></p>
            <p>メソッドも使える：<c:out value="${resultDto.tekito('わたすあたい')}"/></p>
            <p>DTOだけだと：<c:out value="${resultDto}"/></p>
        </div>
    </main>

4. URL を実行して画面を表示して入力してボタン押して動きを確認

ここまでやれば以下の URL 実行で画面が表示される！
表示された画面のテキスト入力して送信ボタン押して動きを出力まで確認できるはず２

HTML(JSP)/CSS つかって見た目をかえる

HTML と CSS を関連付けることで見た目を変えることができる
よく使われる方法として．．．

HTML でタグや class 属性を設定しておき
CSS でタグや class ごとにスタイルを定義する

CSSの設定方法でよく使うやつの例を参考として記載

CSS の設定方法でよく使うやつの例

/* tag : そのまま */
div {
  background-color: #000000;
}
/* id属性 : "#" を頭につける */
#test {
  background-color: #000000;
}
/* class属性 : "." を頭につける */
.test {
  background-color: #000000;
}

HTML, CSS （＋JavaScript）をうまく使うと見た目を変えることができるくらいで覚えておこう～

例 divタグの背景色を HTML, CSS 使って変えてみる

1. CSS を編集（追記する）

/java-webapp-clump/src/main/webapp/assets/styles.css に追記

style.css

.back_red {
  background-color: red;
}
.back_blue {
  background-color: blue;
}
.back_pink {
  background-color: pink;
}
.back_green {
  background-color: green;
}

2. JSP で divタグを準備してブラウザに表示してみる

/java-webapp-clump/src/main/webapp/WEB-INF/view/work.jsp の main タブの中に追記
<div class="css で定義した class (「.」を除いた形) ">・・</div> を div タグに class 属性を指定-
http://localhost:8080/java-wabapp-clump/web_app_work で表示を確認してみる（class 属性の値を変えると色が変わる）

work.jsp


            <div class="back_red">てきとうなわく</div>

例 divタグの幅とかを HTML, CSS 使って動かしてみる

1. CSS を編集（追記・修正する）

/java-webapp-clump/src/main/webapp/assets/styles.css に追記・修正
http://localhost:8080/java-wabapp-clump/web_app_work で表示を確認してみる（枠に動きがつく）

style.css

.back_red {
  background-color: red;
  animation-name: animation1;          /* 定義する keyframess の名前と合わせる */
  animation-duration: 3s;              /* 動きをつける間隔 */
  animation-iteration-count: infinite; /* 動かす回数 infinite は無限 */
}
.back_blue {
  background-color: blue;
  animation-name: animation1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.back_pink {
  background-color: pink;
  animation-name: animation1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.back_green {
  background-color: green;
  animation-name: animation1;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

/* 0, 50, 100% で変化中のスタイルを指定、0%が開始時点, 100%が終了時点 */
@keyframes animation1 {
  0% {
    width: 20%;
  }
  100% {
    width: 100%;
  }
}

Apendex

JSP でよく使う HTML のタグ

form タグ (入力を送るとき)

    <form action="URLパス" method="post or get">
	    <label>入力：</label>
        <input type="text" name="input1" />       <!-- input はいくつでもかける -->
	    <input type="submit" />                   <!-- type submit で送信 -->
    </form>

input タグ (入力項目)

        <!-- いろいろあるので適当に．．． -->
        <label>入力 テキスト：</label>
        <input type="text" name="input1" /><br/>
        <label>入力 数字：</label>
        <input type="number" name="input2" /><br/>
        <label>入力 日付：</label>
        <input type="date" name="input4" /><br/>
        <label>入力 カラーコード：</label>
        <input type="color" name="input5" /><br/>
        <label>入力 ファイル：</label>
        <input type="file" name="input6" /><br/>

JSP で処理・式を簡易に使う方法

JSP は基本的には HTML の構文を使って書くが．．．
HTML とは違い処理(条件分岐, 繰り返し etc) や式を簡易に使う方法があるのでざっくり...

JSPで処理を使う方法 : taglib

JSP で使えるように taglib の設定を記載

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

// 記載方法はこんな感じ
<%@ taglib prefix="JSP内で書くときのタグ名になる" uri="taglibのURI" %>

タグライブラリ	概要
core `prefix="c"`	変数操作, 条件分岐, 制御構文, URL管理などの基本機能
i18n `prefix="fmt"`	メッセージ, 通過などのロケール, 数値, 日付などのフォーマット処理の機能
function `prefix="fn"`	コレクション(List, Map配列など)処理, 文字列操作の機能

taglib の使い方(HTML のタグと大枠は一緒)

// 1行で書ききれる場合
<preficで設定したname:処理名 attribute1="値1" attribute2="値2" ・・・ />

// 間にJSPの処理が必要な場合
<preficで設定したname:処理名 attribute1="値1" attribute2="値2" ・・・ >
    // 処理記載
</preficで設定したname:処理名>

書き方の例をいくつか

// 出力 c:out
<c:out value="出力内容"/>

// 値設定 c:set
<c:set value="設定値" />

// 条件分岐 c:if
<c:if test="条件を記載">
    // 条件に一致した場合の処理
    // else ない...
</c:if>

// 条件分岐 c:choose
<c:choose>
    <c:when test="条件1">
        // 条件1に一致した場合の処理
    </c:when>
    <c:when test="条件2">
        // 条件2に一致した場合の処理
    </c:when>
    <c:otherwise">
        // 上の条件にはまらない場合の処理
    </c:otherwise>
</c:choose>

// 繰り返し c:forEach
<c:forEach items="配列, リストなど" var="配列, リストを取り出した値を設定する変数名">
    // var の変数を使いながら処理
</c:forEach>

// 日付フォーマット fmt:formatDate
<fmt:formatDate value="日付の値" pattern="yyyy/MM/dd HH:mm:ss.SSS などの出力形式" />

JSP で式を使う方法 : EL式

JSP で使えるように EL式の設定を記載

<%@ page isELIgnored="false" %>

書き方はこんな感じ

${式を書く}

書き方の例をいくつか
$ で囲むと 10+10 とかもできるけど使い方としては Servlet で設定した値を参照するときが多いのでその書き方
taglib の属性の値としてもEL式が使える

// Servlet で request.setAttribute("key", 値) で設定した値の取得
${key}
※ taglib の属性の値として使う
<c:out value="${key}"/>

// Servlet で request.setAttribute("key", クラス) で設定したクラスのgetterから値の取得
${key.propetyName} ※getXxx の xxx のみにする感じ

// Servlet で request.setAttribute("key", クラス) で設定したクラスのメソッドを実行して戻り値を取得
${key.method()} ※引数も設定すれば渡せるけど型を合わせるのは大変...

// Servlet で request.setAttribute("key", 配列 or List) で設定した 配列 or List の値を取得
${key[0]}
${key[1]}
※ c:forEach と合わせて使うことが多いかも
<c:forEach items="${key}" var="val">
    {$val} // 処理で使う時は var で指定した変数を使う
</c:forEach>

// Servlet で request.setAttribute("key", Map) で設定した Map の値を取得
${key.mapKey}

EL式にある暗黙オブジェクト
宣言とか設定とかを Servlet, JSP でしてなくても使える暗黙オブジェクトがある
色々あるので今はそんなのあるんだなの理解でOK、気になるやつをちょっと調べるとHTTP通信わかるようになるかも！？

暗黙オブジェクト	概要
{$requestScope}}	リクエストスコープ(1回リクエスト) に設定したキー、値のマップみたいないやつ
{$sessionScope}}	セッションスコープ(同一タブの画面遷移) に設定したキー、値のマップみたいないやつ
{$applicationScope}}	アプリケーションスコープ(アプリ全体) に設定したキー、値のマップみたいないやつ
{$pageScope}}	ページスコープに設定したキー、値のマップみたいないやつ
{$param}}	リクエストパラメータに設定したキー、値のマップみたいないやつ
{$header}}	リクエストヘッダに設定したキー、値のマップみたいないやつ
{$cookie}}	クッキーに設定したキー、値のマップみたいないやつ

JSP, Servlet の役割

URL で画面（JSP）を表示

ざっくりした流れ

URL - Servlet のつながり

Servlet - JSP のつながり

JSP - Servlet の値の受け渡し

リクエストスコープ使った Servlet と JSP の受け渡し

JSP から Servlet に値を渡す

Servlet から JSP に値を渡す

セッションスコープ使った Servlet と JSP の受け渡し

アプリケーションスコープ使った Servlet と JSP の受け渡し

Servlet, JSP を作ってみる

Servlet, JSP で簡単に画面を表示

1. Servlet とりあえず doGet のみのクラス作成

2. JSP とりあえずなんか表示するの作る

3. URL を実行して画面が表示できるか確認

JSP 入力できるようにして Servlet で受け取って JSP に返す

1. JSP 入力できるようにする（mainタブの中を修正）

2. Servlet で入力を取得してなんかしら値を JSP に返す（doPostを追加）

3. JSP で返ってきた値を表示する（mainタブの中に追記）

4. URL を実行して画面を表示して入力してボタン押して動きを確認

Servlet/JSP の受け渡しにオブジェクト（DTO）を使ってみる

1. Servlet・JSPの受け渡し用の オブジェクト(DTO) を 作成

2. ServletでDTOのインスタンス生成してJSPで使えるように設定（doPostに追記）

3. JSP でDTOを使って表示する（mainタブの中に追記）

4. URL を実行して画面を表示して入力してボタン押して動きを確認

HTML(JSP)/CSS つかって見た目をかえる

例 divタグの背景色を HTML, CSS 使って変えてみる

1. CSS を編集（追記する）

2. JSP で divタグ を準備してブラウザに表示してみる

例 divタグの幅とかを HTML, CSS 使って動かしてみる

1. CSS を編集（追記・修正する）

Apendex

JSP でよく使う HTML のタグ

JSP で処理・式を簡易に使う方法

JSPで処理を使う方法 : taglib

JSP で式を使う方法 : EL式

1. Servlet・JSPの受け渡し用のオブジェクト(DTO) を作成

2. JSP で divタグを準備してブラウザに表示してみる