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

Java JSP

はじめに

下記のようなファイル構成になることはよくあると思います。 何らかのフレームワークを使っていれば、同じパターンの箇所は部品化して再利用もできるのですが、 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>

今回は、\～\までを部品化する対応をしてみます。 簡単に言えば、部品化した部分を別の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の変更箇所がきちんと反映されていることも確認しました。

環境

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