はじめに
下記のようなファイル構成になることはよくあると思います。
何らかのフレームワークを使っていれば、同じパターンの箇所は部品化して再利用もできるのですが、
JSPの基本的な機能だけでも効率化はできます。
<%--
Author : tool-taro.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<!DOCTYPE html>
<html>
<!-- headの内容が皆同じ -->
<head>
<title>tool-taro.com</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
index.jsp
</body>
</html>
<%--
Author : tool-taro.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<!DOCTYPE html>
<html>
<!-- headの内容が皆同じ -->
<head>
<title>tool-taro.com</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
index2.jsp
</body>
</html>
今回は、<head>~</head>までを部品化する対応をしてみます。
簡単に言えば、部品化した部分を別のheader.jspとして定義し、
もとのindex.jspおよびindex2.jspからincludeします。
実装例
header.jspを用意します。
<%--
Author : tool-taro.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<head>
<title>tool-taro.com</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
次に、index.jspおよびindex2.jspからheader.jspをincludeしますが、includeには2つの方法があります。
<%@ include %>タグ
初回include時にincludeする側に取り込まれます。
その後、includeされる側をいくら更新しても変更は反映されません。
includeする側を更新すると、変更が反映されます。
パフォーマンスの面では無駄がないですが、変更の反映については注意が必要です。
<jsp:include />タグ
includeする側が実行される度に、includeされる側へのリクエストが発生し、
その結果をincludeする側が取り込んで表示します。
includeされる側、includeする側、それぞれ常に最新の結果が得られます。
今回は<jsp:include />タグでやってみます。
<%--
Author : tool-taro.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<!DOCTYPE html>
<html>
<jsp:include page="header.jsp" flush="true" />
<body>
index.jsp
</body>
</html>
<%--
Author : tool-taro.com
--%>
<%@page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<!DOCTYPE html>
<html>
<jsp:include page="header.jsp" flush="true" />
<body>
index2.jsp
</body>
</html>
重複部分がすっきりしました。
動作確認
index.jspの実行結果を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>tool-taro.com</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
</head>
<body>
index.jsp
</body>
</html>
includeしている箇所は改行が入っていますが、
header.jspの内容がきちんとincludeされているのがわかります。
この後、header.jspだけを編集し、再度index.jspの実行結果を確認したところ、
header.jspの変更箇所がきちんと反映されていることも確認しました。
環境
-
開発
- Windows 10 Pro
- JDK 1.8.0_112
- NetBeans IDE 8.2
-
動作検証
- CentOS Linux release 7.2
- JDK 1.8.0_112
Webツールも公開しています。
Web便利ツール@ツールタロウ