Java

Java JSPのヘッダ部分などを共通化して再利用

はじめに

下記のようなファイル構成になることはよくあると思います。
何らかのフレームワークを使っていれば、同じパターンの箇所は部品化して再利用もできるのですが、
JSPの基本的な機能だけでも効率化はできます。

index.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>

index2.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>
        index2.jsp
    </body>
</html>

今回は、<head>～</head>までを部品化する対応をしてみます。
簡単に言えば、部品化した部分を別のheader.jspとして定義し、
もとのindex.jspおよびindex2.jspからincludeします。

実装例

header.jspを用意します。

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 />タグでやってみます。

index.jsp

<%-- 
    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>

index2.jsp

<%-- 
    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_74
    • NetBeans IDE 8.1
  • 動作検証
    • CentOS Linux release 7.2
    • JDK 1.8.0_74

Webツールも公開しています。
Web便利ツール@ツールタロウ

スポンサーリンク