サーブレットとJSPを使った画面表示

# はじめに
こんばんわ、きりです。
本記事は[Nablarchを使ってみよう](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17)のサブ記事として作成しております。

[前回](https://qiita.com/kirin1218/items/db1ba8af6c323c925919)はサーブレットの作成を行い、ブラウザからのHttpアクセスに対して、Javaのプログラムを実行することに成功しました。

今回は[サーブレット](https://qiita.com/kirin1218/items/99a51d8ffed8b107b4f9#%E3%82%B5%E3%83%BC%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E3%81%A8%E3%81%AF)と[JSPファイル](https://qiita.com/kirin1218/items/99a51d8ffed8b107b4f9#jspjava-servlet-pages%E3%81%A8%E3%81%AF)を使って画面の表示を行ってみようと思います。

本記事以外のコンテンツは[こちら](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17#nablarch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7)から閲覧可能です。

なるべく、初心者目線で作成するつもりですが、分かりづらい部分ありましたら、コメント頂きたいです。

# 動作環境
|種類|バージョン|
|---|---|
|OS|Windows 11 Professional 21H2|
|Eclipse|2022 Full Edition|

※Eclipseのダウンロードについては、[こちら](https://qiita.com/kirin1218/items/02bfeb333335842c56ae)の記事をご確認ください。

# 前提
本記事は[サーブレットの作成](https://qiita.com/kirin1218/items/db1ba8af6c323c925919)の記事で作成したプロジェクトを編集します。

# JSPの作成
プロジェクト名を右クリック > 新規 > JSPファイル　をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/0b9abc34-e1b1-0217-4cab-6c22e477a3f6.png)

作成場所とファイル名を指定して完了ボタンをクリックします。
今回はwebappフォルダの直下にHello.jspというファイル名で作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/74a00ffa-332e-85d8-023a-2d9f1c17bd03.png)

# JSPの変更
JSPを以下のように変更します。
```Hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
  // Servletのデータ受け取り
  request.setCharacterEncoding("UTF8");
  String strMessage = (String) request.getAttribute("message");
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<body>
  <p>
  <%=strMessage%>
  </p>
</body>
</html>
```

```
<%
  // Servletのデータ受け取り
  request.setCharacterEncoding("UTF8");
  String strMessage = (String) request.getAttribute("message");
%>
```
の部分で、Javaソース内でセットした変数の値をstrMessageに代入しています。
今回はJavaソース内でmessageという属性に値が設定された想定でのコードです（Java側のコードは後ほど）

```
<body>
  <p>
  <%=strMessage%>
  </p>
</body>
```
こちらのソースでHTMLのコードに変数strMessageの値を埋め込んでいます。

# サーブレットの変更
JSPの実装に合わせて、java側のコードも編集します。
JSP側ではmessageの属性が作成され値が設定されていることを期待しているため、以下のようにdoGetメソッドを編集します。

``` HelloServlet.java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
  // 呼び出し元Jspからデータ受け取り
  request.setCharacterEncoding("UTF8");

  // 呼び出し先Jspに渡すデータセット
  request.setAttribute("message", "HelloWorld");

  // Hello.jsp にページ遷移
  RequestDispatcher dispatch = request.getRequestDispatcher("Hello.jsp");
  dispatch.forward(request, response);
}
```

doGetのメソッドの引数にはHttpServletRequest型の変数とHttpServletResponse型の変数の2つが存在します。
requestはクライアントからのリクエスト情報が格納されています、responseにはクライアントへ返却するための値を設定します。

JSPを利用する場合は、フォーワードという仕組みを利用して画面表示を行います。
getRequestDispatcherにより、Hello.jspリソースのDispatcherを取得し、forwardメソッドにより処理を転送します。
転送時に引数として渡す、requestオブジェクトにmessage属性をセットしておくことで,jsp側で参照が行えるようになります。

[getRequestDispatcher](https://spring.pleiades.io/specifications/platform/8/apidocs/javax/servlet/servletrequest#getRequestDispatcher-java.lang.String-)

# Getパラメータの取得
サーブレット側でGETパラメータを取得する場合はrequestオブジェクトのgetParameterメソッドを指定します。
引数としてパラメータのキーを指定します。getParameterMapメソッドで一括でパラメータを取得することもできます。

以下のようにサーブレットのコードを変更してみます。

``` HelloServlet.java
protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String name = request.getParameter("name");

    // 呼び出し元Jspからデータ受け取り
    request.setCharacterEncoding("UTF8");

    // 呼び出し先Jspに渡すデータセット
    if (name != null) {
      request.setAttribute("message", "Hello," + name);
    } else {
      request.setAttribute("message", "Hello");
    }

    // Hello.jsp にページ遷移
    RequestDispatcher dispatch = request.getRequestDispatcher("Hello.jsp");
    dispatch.forward(request, response);
  }

```

nameパラメータのた値を取得し、値がセットされている場合とされていない（null)場合で条件分岐し、セットされている場合は画面に表示するように変更しました。

ブラウザからパラメータをセットしてENTERします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/4e07b5b7-c335-0caf-6236-ace2b5d6c302.png)

以下の画像の通り指定したnameが表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/4ad2ad8f-9cbc-879b-d647-b7bc5f98cac2.png)

[getParameter](https://spring.pleiades.io/specifications/platform/8/apidocs/javax/servlet/servletrequest#getParameter-java.lang.String-)
[getParameterMap](https://spring.pleiades.io/specifications/platform/8/apidocs/javax/servlet/servletrequest#getParameterMap--)

# フォワードの応用
jspを利用する場合は[上記](#サーブレットの変更)のようにgetRequestDispatcherにJSPファイルのパスを指定しました。
getRequestDispatcherの引数には別のサーブレットを指定することもできるため、ひとつ実験してみます。

まずは、GoodbyeServletという新たなサーブレットクラスを作成します（作成方法は[こちら](https://qiita.com/kirin1218/items/db1ba8af6c323c925919#%E3%82%B5%E3%83%BC%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E8%A8%AD%E5%AE%9A)をご確認ください)。

作成したGoodbyteServlet.javaのdoGetメソッドを一部変更します。

``` GoodbyeServlet.java
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    response.getWriter().append("Goodbye");
  }
```
画面にGoodbyeと表示します。

続いて、HelloServlet.javaのdoGetメソッドも変更します。

``` HelloServlet.java
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    String name = request.getParameter("name");

    // 呼び出し元Jspからデータ受け取り
    request.setCharacterEncoding("UTF8");

    // 呼び出し先Jspに渡すデータセット
    if (name != null) {
      request.setAttribute("message", "Hello," + name);
    }

    // Hello.jsp にページ遷移
    RequestDispatcher dispatch;

    if (name != null) {
      dispatch = request.getRequestDispatcher("Hello.jsp");
    } else {
      dispatch = request.getRequestDispatcher("GoodbyeServlet");
    }
    dispatch.forward(request, response);
  }
```

```
    if (name != null) {
      dispatch = request.getRequestDispatcher("Hello.jsp");
    } else {
      dispatch = request.getRequestDispatcher("GoodbyeServlet");
    }
```

上記の処理によりパラメータにnameが指定されていなかった場合ないGoodbyeServletへフォワードするように変更しました。

以下、動作確認結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/6fece848-1617-0943-d624-c64525bcbbf2.png)

nameを指定しなかったのでさよならといわれてしまいました。

# インクルードを使ったヘッダーの表示
インクルードはJSPファイルの中に別のJSPを埋め込む仕組むです。
例えば、複数の画面(jsp）において、共通のヘッダーやフッターを表示したい場合に利用します。

利用方法は以下のようなincludeディレクティブをJSPファイルの表示したい箇所に記載するだけです。

```
<%@include file = "ファイルのパス" %>
```

試してみましょう。
まずはHeader.jspというファイルを新規で作成します（作成方法は[こちら](#jspの作成))。
次にHeader.jspファイルを以下のように書き換えます。

``` Header.jsp
<%@ page contentType="text/html; charset=UTF-8" %>
ヘッダー情報の表示
<hr style="text-align: left; margin-left: 0px; height:2; background-color:'red'; width:150"></hr>
```

Hello.jsp側も変更します。

``` Hello.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
  // Servletのデータ受け取り
  request.setCharacterEncoding("UTF8");
  String strMessage = (String) request.getAttribute("message");
%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ハロー</title>
</head>
<body>
  <%@include file= "Header.jsp" %>
  <p>
  <%=strMessage%>
  </p>
</body>
</html>
```

bodyタグ内に以下を追記してます。
```
<%@include file= "Header.jsp" %>
```
動作確認してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/803458/574fe9a0-0322-6c17-3e18-d586df01888b.png)

画面に「ヘッダー情報の表示」という項目が追加されました。
※nameパラメータを渡さないとgoodbyeが表示されるので注意

# 最後に
今回はJSPファイルを使った基本的な画面表示の方法について整理しました。
次回は、ボタンやインプットなどをフォーム追加とサーブレット側での入力内容の取得する方法について、整理する予定です。

他の記事については[こちら](https://qiita.com/kirin1218/items/242ee0f174f1cb12ef17#nablarch%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%A8%98%E4%BA%8B%E4%B8%80%E8%A6%A7)から御覧ください。

# 参考リンク
* [ServletからJsp(Html)呼び出し(データ渡し)](https://tokkan.net/jspservlet/servletjsp.html)
* [サーブレットからJSPへ画面遷移](https://kanda-it-school-kensyu.com/java-jsp-servlet-contents/jjs_ch09/jjs_0901/)
* [制御の受け渡し](https://www.samuraiz.co.jp/adobeproduct/jrun/docs/jr4/docs/html/Programmers_Guide/techniques_servlet17.html)