Zenn
😽

ITスクールのWEB開発授業～「CustomTag」まとめ～概要と、「標準アクション <jsp: include>」例文

2023/09/16に公開
初心者
Web
JSP
#
customtag
#
標準アクション
tech

前書き

最近Servlet, Java(Class), JSP, JS, CSSにMVC、Singletonパタンを使う例文を作ることが多かったが、今回はJSPで使える新しい文法のまとめになる。

JSPの中でもともと「<% %>」というタッグを利用してJAVAコードの実行ができた。JSPでのJAVAコードで、条件文や反復分を実行することができた。しかし、JAVA形態のコードであって、少しは汚い感がある。

このような状況で、HTML文法のように見える「DOM」の形として、JAVAよりはHTMLに近いコードの形で上の文法を使えるのが、これからまとめる「CustomTag」である。

また、ページを読み込む方法に「include」というものがあるが、この文法もCustumTagを使わないと、読み込まれたページがいつも1番上に上がるのでほとんど活用ができないらしい。この部分も一緒にまとめてみる。

CustomTagとは？

CustomTagはjspで使える文法で、今まで私がしてきたMVCパタンのなかでは「V(View)」に当たるところである。

とりあえず、CustomTagの見た目はHTMLのDOMと似ている。DOMが何であるかをまた説明しようとしていたらもうこのまとめでは足りなさすぎるので、簡単に言うとHTMLという言語で構成される様々な内容に変化を入れるか、特別な機能ができるようにしてくれるインスタンスである。

もっと簡単に言うと、HTMLファイルで見られる、内容の最初と終わりに来る「<>」と「</>」記号になっている様々なキーボードである。

このような形で書かれたCustomTagは、JSPがServletに変換されるとき(JSPはもともと実行されるとき、Servletに変換される。)、一緒にJAVA言語に変換される。

形式は上記した通り、DOMを使うように(<>と</>の中にタッグの名前を入れる感じ)使う。<>と</>の間に別に内容が入らない場合なら、「< />」という形で書くこともできる。

次は、CustomTagの種類についてまとめる。

CustomTagの種類

学んだCustomTagの種類は、提供される環境(基本的に使えるか、他の過程が必要であるか)によって書きの2種類に分ける。

今回では、1番の標準アクションを使ってページの中にもう1つのページを入れる例文を作ってみた。前書きでも書いた通り、標準アクションを使わない場合はページの中にページを出力しても１番上に上がってしまうのであまり使えない。欲しい位置にページを出力する標準アクション例文は下でまたまとめる。

外部CustomTagでは、JSPで「<% %>」を使わづにjavaでできるようなは条件文、反復文、Format(あるデータを文字列、数字、実数に変換)をしてみる例文を下でまとめる。

標準アクションでの、ページの中にページを出力する例文

ページの中にページを出力することができると、１つのページの中で、他のページに移動しなくても色々なページを見せることができる。下記のコードの流れは下記のようになる。

コードを乗せる順番は、実行される順番にした。

HomeController

//１番最初に実行されるコード。「contentPage」ネームで１番最初に出力されるページである「home.jsp」を持って、「index.jsp」ページに移動する。

230913/Sep13_2_WebSite/src/main/java/com/inchel/sep132/main/HomeController.java
@@ -0,0 +1,26 @@
package com.inchel.sep132.main;

import java.io.IOException;
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("/HomeController")
public class HomeController extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	//「index.jsp」のなかで１番最初に出力するページの名前をAttributeに入れておく。
	request.setAttribute("contentPage", "home.jsp"); 
	//これから出力するページの上位にある、メインページに移動
	request.getRequestDispatcher("index.jsp").forward(request, response);
	}

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

次は、上のServletを実行すると自動的に繫がる「index.jsp」のコードになる。

index.jsp

//メインページ。このページの中で、「home」と「a」ページを出力する予定である。
//２つのページに繋がる「<a>」タグを持っている。
	
<%@ 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>
<link rel = "stylesheet" type = "text/css" href = "menuStyle.css">
</head>
<body>

	<hr>
	<div id = "Menus">
	<a href = "HomeController"> Home </a> <!-- この字をクリックすると、「HomeController.jsp」を実行する。 -->
	<a href = "AController"> A </a><!-- この字をクリックすると、「AController.jsp」を実行する。 -->
	</div>
	<hr>
	<div>
	<!--標準アクションの「jsp:include page = "ページのURL"」を使って、ページの中でページを出力する。 -->
	<!--各Servletで入れた「contentPage」ネームのAttributeをここに入れて、あたるURLのページを出力。 -->
	<!--最初に「HomeController」からこのページに来ると、「home.jsp」を出力する。-->
	<jsp:include page = "${contentPage}">
	</div>

</body>
</html>

次は１番最初に「index.jsp」ページに来ると、「jsp:include」標準アクションで出力される「home.jsp」のコードになる。

home.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>
<!--ページでは別になにもせず、ページの名前だけをみせる。 -->
ここは「home.jsp」です。

</body>
</html>

次は「index.jsp」で他のページに繋がる「A」文字を押したとき繫がる「AController」Servletである。「Home」を押したときに繫がる「HomeController」もう上記したので省略する。
「AController」Servletと「HomeController」Servletの違いは、「index.jsp」に移動する前に、「index.jsp」で出力するページを指定する「contentPage」というAttributeの値だけである。

AController.java
Sep13_2_WebSite/src/main/java/com/inchel/sep132/main/AController.java
@@ -0,0 +1,24 @@
package com.inchel.sep132.main;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AController
 */
@WebServlet("/AController")
public class AController extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//「index.jsp」で出力する「contentPage」Attributeの値を「a.jsp」にする
		request.setAttribute("contentPage", "a.jsp");
		request.getRequestDispatcher("index.jsp");
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	}
}

最後に、「index.jsp」で「A」を押したとき、「index.jsp」の中で出力される「a.jsp」のコードになる。別になにもせず、「ここはa.jspです」と出力する。

a.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>
	<h1> ここは「a.jsp」です。</h1>
</body>
</html>

以上で、jspで使えるCustomTagは何であるかと、その1っ種である標準アクション「jsp:」の「include」文法を通じてページの中でページを出力する例文をまとめてみた。ページの中でページを出力することができたら、もっと質の高いページを作れるので、これからもたくさん使えるのではないかと思った。

次は基本的に使える標準アクションでなく、外部のファイル(jstl.jar)を利用するCustomTagについてまとめる。

Discussion