サーブレット&JSPの基本｜動的インクルードとアクションタグ

サーブレット&JSPの基本｜動的インクルードとアクションタグ

共通パーツを1か所にまとめて、JSPをすっきり管理する。動的インクルードとアクションタグで画面作成を効率化しよう

業務向けのWebアプリケーションでは、画面の構成が複雑になりやすくなります。

ログイン画面、メニュー画面、一覧画面、詳細画面、登録画面、確認画面など、たくさんのJSPファイルを作成することがあります。

そのとき、すべての画面に共通して表示したい部分が出てきます。

たとえば、ページ上部のヘッダー、画面下部のフッター、著作権表示、サイトメニュー、問い合わせリンク、利用規約へのリンクなどです。

このような共通部分を、すべてのJSPファイルにコピーして貼り付ける方法もあります。しかし、この方法はあまりよくありません。

最初は簡単に見えますが、あとからフッターの文言を変更したくなったとき、すべてのJSPファイルを修正する必要があります。JSPファイルが5個ならまだ対応できますが、20個、50個と増えていくと、修正漏れが起こりやすくなります。

また、JSPファイルにはHTMLだけでなく、JSP特有の記述やJavaに関係する処理が含まれることもあります。Webデザイナーが見た目を調整したいだけなのに、JSP内にJavaのコードが多くあると、作業しづらくなってしまいます。

そこで役立つのが、動的インクルードです。

動的インクルードを使うと、JSPファイルの実行中に別のJSPファイルを呼び出し、その出力内容を現在の画面に取り込めます。

たとえば、共通フッターをsiteFooter.jspとして1つだけ作成しておき、各画面からそのJSPを取り込むようにします。すると、フッターの内容を変更したいときは、siteFooter.jspだけを修正すればよくなります。

この記事では、動的インクルードの基本、フォワードとの違い、jsp:includeを使った書き方、標準アクションタグの考え方、そして実際にフッターを取り込むJSPの作成方法を学習していきます。

共通パーツをコピーして貼り付ける問題

WebサイトやWebアプリケーションでは、複数の画面で同じ内容を表示することがよくあります。

代表的なのが、ヘッダーとフッターです。

ヘッダーとフッターの役割

これらは、画面ごとに毎回違う内容ではなく、Webアプリケーション全体で統一されることが多い部分です。

しかし、同じ内容だからといって、すべてのJSPファイルにコピーして貼り付けると、保守が大変になります。

コピーして貼り付ける方法の問題点

共通部分は、できれば1か所にまとめて管理したいところです。

そのために使えるのが、動的インクルードです。

動的インクルードとは

動的インクルードとは、JSPファイルの実行中に別のJSPファイルを呼び出し、そのJSPが出力した内容を現在の出力に取り込む仕組みです。

たとえば、studyHome.jspの中でsiteFooter.jspを動的インクルードするとします。

この場合、studyHome.jspが実行される途中でsiteFooter.jspも実行されます。そして、siteFooter.jspが出力したHTMLがstudyHome.jspの出力結果の一部として組み込まれます。

動的インクルードの流れ

インクルード元とは、ほかのJSPを呼び出す側のJSPです。

インクルード対象とは、呼び出されて出力内容を取り込まれる側のJSPです。

図1：動的インクルードで共通フッターを取り込む

この図から分かること

動的インクルードでは、インクルード元のJSPが実行されている途中で、別のJSPを呼び出します。

呼び出されたJSPは、その場で実行され、出力したHTMLがインクルード元の出力結果に取り込まれます。

共通フッターをsiteFooter.jspとして分けておけば、複数の画面から同じフッターを取り込めます。フッターの文言を変更したい場合も、siteFooter.jspだけを修正すればよくなります。

動的インクルードで管理しやすくなるもの

動的インクルードは、複数画面で共通して使う部品に向いています。

特に、同じ内容を何度も表示する部分を別ファイル化すると、JSP全体が整理しやすくなります。

動的インクルードに向いている部品

これらを各JSPに直接書くと、画面数が増えるほど修正が大変になります。

動的インクルードを使うと、共通部分を別JSPとして切り出せるため、変更に強い構成になります。

フォワードとの違い

動的インクルードは、別のJSPへ処理を渡すという点でフォワードと似ています。

しかし、動きには大きな違いがあります。

フォワードは、フォワード先へ処理を移したあと、フォワード元には戻ってきません。

一方、動的インクルードは、インクルード対象を実行したあと、インクルード元へ処理が戻ってきます。

フォワードと動的インクルードの違い

画面そのものを切り替えたいときはフォワードを使います。

現在の画面の一部として、別のJSPの出力を取り込みたいときは動的インクルードを使います。

RequestDispatcherでも動的インクルードはできる

動的インクルードは、サーブレットやJSPの中でRequestDispatcherを使って行うこともできます。

考え方としては、RequestDispatcherを取得し、includeメソッドでインクルード対象を実行します。

基本的な流れは次のようになります。

RequestDispatcher dispatcher = request.getRequestDispatcher("インクルード対象");
dispatcher.include(request, response);

この書き方を使えば、サーブレットクラスからでも動的インクルードを実行できます。

ただし、JSPファイルの中で共通フッターなどを取り込むだけなら、もっと簡単な書き方があります。

それが、jsp:includeを使う方法です。

jsp:includeとは

jsp:includeは、動的インクルードを行うための標準アクションタグです。

JSPファイルの中に次のように書くことで、別のJSPファイルを実行し、その出力内容を取り込めます。

jsp:includeの基本形は、次の2通りです。

page属性には、インクルードしたいJSPファイルの場所を指定します。

この指定は、インクルード元JSPファイルのディレクトリを起点とした相対パスです。

たとえば、studyHome.jspとsiteFooter.jspが同じsrc/main/webappディレクトリにある場合は、page属性にsiteFooter.jspと指定します。

アクションタグとは

jsp:includeのように、JSPの中でJavaに関係する処理を呼び出すためのタグをアクションタグと呼びます。

見た目はHTMLタグに似ていますが、HTMLタグとは役割が違います。

HTMLタグは、ブラウザに表示する構造や見た目を表すためのものです。

一方、アクションタグは、JSPの処理としてサーバ側で実行されます。

HTMLタグとアクションタグの違い

jsp:includeは、JSPファイル内で動的インクルードを行うためのアクションタグです。

タグのように書けるため、Javaのコードを直接書くよりもJSPが読みやすくなります。

図2：アクションタグはJavaの処理を呼び出す

この図から分かること

jsp:includeは、見た目はタグですが、内部的にはJavaに関係する処理を呼び出しています。

JSPにJavaのコードを直接書かなくても、タグ形式で動的インクルードを指示できます。

そのため、JSPファイルをHTMLに近い見た目で管理しやすくなります。Webデザイナーと開発者が分業するときにも、JSP内のJavaコードを減らせる点が役立ちます。

標準アクションタグとは

jsp:includeのように、JSPで最初から用意されているアクションタグを標準アクションタグと呼びます。

標準アクションタグには、インクルード以外にも、JavaBeansの利用やフォワードに関するものがあります。

主な標準アクションタグ

標準アクションタグを使うと、JSPの中にJavaコードを直接書く量を減らせます。

特に、共通部品の取り込みにはjsp:includeが便利です。

標準アクションタグの基本文法

標準アクションタグは、HTMLタグに近い形で書きます。

基本形は、次の2通りです。

たとえば、siteFooter.jspを動的インクルードする場合は、次のように書けます。

<jsp:include page="siteFooter.jsp" />

または、次のようにも書けます。

<jsp:include page="siteFooter.jsp"></jsp:include>

どちらの書き方でも、siteFooter.jspを実行し、その出力内容を現在のJSPに取り込めます。

アクションタグを書くときの注意点

アクションタグは、HTMLタグのような見た目をしていますが、書き方には注意があります。

特に、大文字と小文字が区別される点、終了タグを省略できない点に気をつけましょう。

アクションタグの注意点

たとえば、jsp:Includeのようにincludeのiを大文字にすると、正しいアクションタグとして認識されません。

また、<jsp:include page="siteFooter.jsp">のように開始タグだけを書いて終了タグを書かないと、JSPの処理でエラーになります。

空要素として書く場合は、<jsp:include page="siteFooter.jsp" />のように閉じます。

動的インクルードの動作確認

ここからは、実際に動的インクルードを使って、共通フッターを取り込むJSPを作成します。

今回は、学習メモサイトのトップ画面をイメージします。

studyHome.jspでは、ページの本文を表示します。

siteFooter.jspでは、共通フッターとしてコピーライトを表示します。

studyHome.jspの中でjsp:includeを使い、siteFooter.jspの出力内容を取り込みます。

作成するファイル

どちらもsrc/main/webappディレクトリに保存します。

同じディレクトリに置くため、jsp:includeのpage属性にはsiteFooter.jspと指定します。

図3：studyHome.jspにsiteFooter.jspの出力を取り込む

この図から分かること

studyHome.jspは、ページ本体を出力するJSPです。

その途中でjsp:includeを使い、siteFooter.jspを呼び出しています。

siteFooter.jspが出力したフッター部分は、studyHome.jspの出力結果に取り込まれます。

ブラウザから見ると、studyHome.jspの本文とsiteFooter.jspのフッターが1つのHTMLとして表示されます。

動的インクルードを行うJSPファイルの例

ファイル名： studyHome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>動的インクルードによる共通フッター表示</title>
</head>
<body>
<h1>学習メモサイトへようこそ</h1>
<p>このサイトでは、ServletとJSPの学習記録を管理します。</p>
<p>学習した内容を画面ごとに整理し、復習しやすい形で表示します。</p>

<jsp:include page="siteFooter.jsp" />

</body>
</html>

studyHome.jspは、src/main/webappディレクトリに作成します。

このJSPがインクルード元です。

本文の下に<jsp:include page="siteFooter.jsp" />を書いています。

これにより、studyHome.jspの実行中にsiteFooter.jspが呼び出され、siteFooter.jspが出力した内容がこの位置に取り込まれます。

動的インクルードで取り込まれるJSPファイルの例

ファイル名： siteFooter.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<footer>
<p>Copyright Study Note Project All Rights Reserved.</p>
<p><a href="studyHome.jsp">トップへ戻る</a></p>
</footer>

siteFooter.jspも、src/main/webappディレクトリに作成します。

このJSPは、動的インクルードで取り込まれる側のファイルです。

画面本体全体を書くのではなく、フッターとして表示したい部分だけを記述しています。

studyHome.jspと同じディレクトリにあるため、studyHome.jsp側ではpage属性にsiteFooter.jspと指定するだけで取り込めます。

page属性のパス指定

jsp:includeのpage属性には、インクルード対象の場所を指定します。

この指定は、インクルード元JSPファイルから見た相対パスです。

今回の例では、studyHome.jspとsiteFooter.jspが同じsrc/main/webappディレクトリにあります。

そのため、次のようにファイル名だけを指定しています。

<jsp:include page="siteFooter.jsp" />

配置場所と指定例

パスを間違えると、インクルード対象のJSPが見つからず、実行時エラーになることがあります。

どのJSPから見た相対パスなのかを意識して指定しましょう。

動作確認の手順

studyHome.jspとsiteFooter.jspを作成したら、ブラウザで動作を確認します。

プロジェクト名はstudyなので、次のURLでアクセスします。

http://localhost:8080/study/studyHome.jsp

確認手順

この表示が確認できれば、studyHome.jspからsiteFooter.jspが動的インクルードされています。

ブラウザの表示例

共通フッターを変更した場合

動的インクルードのよいところは、共通部分を1つのファイルにまとめられることです。

たとえば、siteFooter.jspのコピーライト表記を変更するとします。

その場合、siteFooter.jspだけを修正すれば、siteFooter.jspを取り込んでいるすべてのJSPに変更が反映されます。

共通ファイル化のメリット

このように、共通パーツを別ファイルに分けると、画面が増えても管理しやすくなります。

JSPからJavaコードを減らす考え方

JSPは、画面表示を担当するファイルです。

そのため、できるだけHTMLに近い形で書けると、Webデザイナーにとっても開発者にとっても扱いやすくなります。

JSP内にJavaのコードが多くなると、画面の構造が分かりにくくなります。

動的インクルードをRequestDispatcherのincludeメソッドで書くこともできますが、JSPではjsp:includeを使うことで、Javaコードを書かずに同じ指示ができます。

書き方の違い

jsp:includeを使うと、JSP内のJavaコードを減らし、画面用ファイルとして読みやすくできます。

動的インクルードを使うときに意識したいこと

動的インクルードは、共通部品を管理しやすくする便利な仕組みです。

ただし、画面を分割しすぎると、どのJSPがどこで取り込まれているのか分かりにくくなることもあります。

意識したいポイント

動的インクルードは、共通部分を1か所にまとめられる便利な方法です。

特に、複数のJSPで同じフッターやヘッダーを使いたい場合に効果を発揮します。

動的インクルードとアクションタグで押さえたいこと

動的インクルードは、JSPの実行中に別のJSPを呼び出し、その出力内容を取り込む仕組みです。

フォワードとは違い、インクルード対象を実行したあと、インクルード元へ処理が戻ってきます。

JSPでは、jsp:includeを使うことで、Javaコードを直接書かずに動的インクルードを行えます。

標準アクションタグは、JSPで最初から用意されているアクションタグです。jsp:includeのほかに、jsp:forward、jsp:useBean、jsp:setProperty、jsp:getPropertyなどがあります。

アクションタグはHTMLタグに似た見た目ですが、大文字と小文字が区別され、終了タグを省略できない点に注意が必要です。

共通フッターのような部品をsiteFooter.jspとして分けておくと、複数の画面から取り込めるようになります。これにより、JSPの重複を減らし、修正しやすい画面構成にできます。