📗 Vol.8.19：【Struts2】テンプレートの再利用応用〜レイアウト共通化 × 動的UI部品の出し分け設計〜

Last updated at 2025-05-23Posted at 2025-05-23

✅ 概要

本記事では、Vol.8.18で構築した共通テンプレート構造をベースに、さらに一歩踏み込んで「テンプレート再利用の応用パターン」について解説します。画面種別・ユーザー状態・ページ機能に応じたUIの出し分けや、テンプレートレベルでの共通化技法にフォーカスします。

🎯 対象読者

Struts2ベースで複数画面構成のJSP設計を最適化したい方
ヘッダー/メニュー/フッターの出し分けを行いたい方
テンプレート構造を拡張しつつ保守性を高めたい方

🧱 基本構成の再確認（Vol.8.18）

<%@ include file="/common/header.jspf" %>
<s:include value="%{bodyPage}" />
<%@ include file="/common/footer.jspf" %>

💡 再利用応用パターン①：ログイン状態による出し分け

<c:choose>
  <c:when test="${sessionScope.user != null}">
    <jsp:include page="/common/menu-loggedin.jspf" />
  </c:when>
  <c:otherwise>
    <jsp:include page="/common/menu-guest.jspf" />
  </c:otherwise>
</c:choose>

利用シナリオ：ログインユーザーか否かでメニュー構造を変更
実装効果：テンプレート構造を維持しつつ動的切替が可能

💡 再利用応用パターン②：ページ種別ごとのタイトル・CSS切り替え

<c:set var="pageTitle" value="${pageScope.title != null ? pageScope.title : '共通タイトル'}" />
<title><c:out value="${pageTitle}" /></title>

<link rel="stylesheet" href="/css/common.css" />
<c:if test="${pageScope.specialCss != null}">
  <link rel="stylesheet" href="/css/${specialCss}" />
</c:if>

利用シナリオ：詳細画面だけ別スタイル適用など
実装効果：柔軟なレイアウト調整が可能

🧩 応用パターン③：bodyPage変数の切り替えによる柔軟な画面切替

Actionクラスから以下のように bodyPage を動的に設定：

bodyPage = "/view/UserManagementScreen.jsp";

テンプレートではそれを <s:include value="%{bodyPage}"/> で呼び出し。

実装効果：テンプレート側を修正せず画面だけ切り替え可能

🏗 応用パターン④：共通テンプレート構造 × ロール別表示制御

<c:if test="${sessionScope.user.role == 'ADMIN'}">
  <s:include value="/admin/tools.jspf" />
</c:if>

実装効果：管理者向けの専用機能を共通テンプレート内に組み込み可能

✅ 実務ポイントまとめ

技法	内容	メリット
`<s:include>` × 変数	動的画面読込	再利用性・柔軟性向上
`<c:choose>`	条件分岐表示	状態依存UI切替
`header.jspf` / `footer.jspf`	レイアウト共通化	修正時の保守効率化
共通CSS/JS構成	表示の統一感	デザインブレ防止

📌 参考リンク

🔄 関連記事

🔜 次回予告

次回 Vol.8.20 では、テンプレートベースでのUI設計パターンの完成形として、よりモジュール化されたテンプレート管理法や、ページ種別テンプレート分割（BaseTemplate.jsp など）を紹介します！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

📗 Vol.8.19：【Struts2】テンプレートの再利用応用 〜 レイアウト共通化 × 動的UI部品の出し分け設計 〜