JSP（JavaServer Pages）【 View（MVCのV）】

Java

（ブログ記事の一覧は「こちら」）

サーブレットは、サーバー上で動的なWebページを作成するJavaの技術についてでした。サーバー側の処理を書くのに向いていましたが、HTMLに出力するには（コード量が増えることから）あまり適していませんでした。
そこでJSP（JavaServer Pages）と呼ばれる技術が用意されています。JSPもサーバー上で動的なWebページを作成する技術ですが、JSPファイルはHTMLがベースになっています。

ここでは、JSPの基本と、サーブレットで作成したサンプル（入力画面、結果画面の作成）をJSPで作成する方法を確認していきましょう。

JSPファイルの作成、実行

JSPファイルの作成

「プロジェクト名」を右クリックして、「新規」-「JSPファイル」を選択します。

f:id:MJeeeey:20201125225008j:plain:w540

ファイル名を入力して、「完了」ボタンをクリックします。 （「result.jsp」としています）

f:id:MJeeeey:20201128231556j:plain:w480

以下のようになることを確認してください。

f:id:MJeeeey:20201128231739j:plain

JSPファイルの実行

JSPファイル（赤枠の部分）を右クリックして、「実行」-「サーバーで実行」を選択します。

f:id:MJeeeey:20201128232109j:plain:w540

簡単な修正

以下のように、bodyタグ内にJSPタグのプログラムを記述します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

Served at: 
<%= request.getContextPath() %>

</body>
</html>

実行すると、サーブレットの初期状態と同じ結果が出力されます。

JSPの基本構文

JSPの基本構文について確認していきます。（タグの書式に注目）

pageディレクティブ（<%@ ... %>）

JSPの設定を行います。以下は、初期状態の先頭行に記述されています。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
式（<%= ... %>）

変数や、メソッドの戻り値など、出力することができます。

<%= request.getContextPath() %>
スクリプトレット（<% ... %>）

Javaのコードを書くことができます。

<% 
int sum = 0;
for (int i = 0; i < 10; i++) {
    sum += i;
}
%>

サンプル（フォームからの呼び出し）

（「サーブレット」のときと同じ動作のものを作成します）

テキストボックスと送信ボタンを含む、入力フォームのHTMLを用意して、送信されたテキストデータをJSPファイルで受信して表示するWebアプリのサンプルを作成してみましょう。

HTMLファイルの作成

「プロジェクト名」を右クリックして、「新規」-「HTMLファイル」を選択します。

f:id:MJeeeey:20201123232008j:plain:w540

ダイアログが表示されたら、「form.html」として作成します。

以下のように、bodyタグ内にフォームを記述します。
（formタグのaction属性の値を、ご自身の環境に合わせるようにしてください。）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <form action="/ServletAppTest/result.jsp" method="post">
        名前：<input type="text" name="name">
        趣味：<input type="text" name="hobby">
        <input type="submit" value="送信する">
    </form>

</body>
</html>

JSPファイルの作成

「result.jsp」を作成して、以下のように追記します。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
    //文字コードをセット（日本語の文字化けを避ける）
    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html; charset=UTF-8");
%>

<p>
<%= request.getParameter("name") %>
</p>
<p>
<%= request.getParameter("hobby") %>
</p>

</body>
</html>

実行

「form.html」を右クリックして、「実行」-「サーバーで実行」を選択します。

テキストボックスに入力して送信ボタンを押すと、入力したテキストが出力される画面に移動することを確認してください。

課題

上記のサンプルについて、入力項目を「名前」「趣味」から、「特技」を加えたものに修正してください。