📘 Vol.8.6：【Struts2】画面部品の共通化！ s:include  /  s:component  徹底解説 〜JSPヘッダー/フッターの再利用でメンテ効率UP〜

## ✅ 本記事は、Struts2でJSPを書く際に頻出するタグの基本を網羅する  
📘　**「Vol.8.0〜8.7：Struts2 タグライブラリ入門編（基本操作・最低限の知識）」**　シリーズの一部です。

---

## 🔰 はじめに

Struts2でJSPを使って画面を開発していると、**同じHTML構造を何度もコピペ**していませんか？

- 画面ごとに `<header>` を手動で書く
- `<footer>` や `<nav>` のリンクを複製して保守ミス…

こういった**JSPの共通化・再利用**に役立つのが、Struts2のタグライブラリに含まれる  
**`<s:include>`** と **`<s:component>`** です。

この記事では、それぞれの違いや使い方、実務での応用方法を分かりやすく解説します！

---

## 📌 `s:include` とは？ ～外部JSPファイルの読み込み～

### ✅ 基本構文

```jsp
<s:include value="/view/common/header.jsp" />
```

JSP内に、指定した外部JSPファイルを**そのまま差し込む**イメージです。
HTMLの `<iframe>` とは違い、**ファイル内容が直接展開**される形です。

## ✅ パラメータを渡す場合`（<s:param>）`
```jsp
<s:include value="/view/common/userInfo.jsp">
  <s:param name="username" value="%{#session.username}" />
</s:include>
```
読み込まれたJSP側で `${username}` のように使用できます。

---
### 📌 `s:component` とは？ ～再利用部品としての読み込み～

## ✅ 基本構文
```jsp
<s:component template="/view/common/card.jsp">
  <s:param name="title" value="'お知らせ'" />
  <s:param name="content" value="'メンテナンスのお知らせがあります。'" />
</s:component>
```

テンプレートJSPにパラメータを渡して、汎用的な表示部品を使い回せます。
テンプレート側（例：`card.jsp`）では以下のように受け取ります：

```jsp
<div class="card">
  <h2><s:property value="parameters.title" /></h2>
  <p><s:property value="parameters.content" /></p>
</div>
```

---
### 🔀 使い分けのコツ
| 用途                       | おすすめタグ          |
| ------------------------ | --------------- |
| 静的な共通パーツ（ヘッダー、フッター）      | `<s:include>`   |
| 可変な部品（汎用メッセージカード、通知ブロック） | `<s:component>` |

---

### 💡 実務応用例：ヘッダーとフッターを共通化してみよう

🔧 ファイル構成例

```
/view/common/header.jsp
/view/common/footer.jsp
/view/user/userPortal.jsp
```

### ✅ userPortal.jsp に部品を読み込む
```jsp
<s:include value="/view/common/header.jsp" />

<!-- メイン画面内容 -->

<s:include value="/view/common/footer.jsp" />
```

---

### 🚨 よくあるエラーと対策
| エラー内容       | 原因と対策                                      |
| ----------- | ------------------------------------------ |
| パスが通らない     | `value` 属性はアプリルートからの相対パスで書く                |
| パラメータが null | `value="%{...}"` の `%{}` を忘れている or nameの誤記 |

---
### 📘まとめ
- `<s:include>` は「そのまま挿入」＝静的な部品向き

- `<s:component>` は「テンプレートとして再利用」＝パラメータを渡す部品向き

- JSPの共通パーツを部品化すると**保守性と再利用性が大幅アップ**！

---
## ▶ 次回予告
[📘 Vol.8.7：【Struts2】バリデーションUIの味方！ s:fielderror 系タグでエラー表示を制御する](https://qiita.com/juehara-crypto/items/b5bacb915f8baea2f2ec)

---


## 📚 関連記事（Vol.8シリーズ）

- [📘 Vol.8.0：【Struts2】OGNL入門　〜タグライブラリを支える最重要基礎技術〜](https://qiita.com/juehara-crypto/items/9b9558d46dfa5ac75224)

- [📘 Vol.8.1：【Struts2】タグライブラリの全体像と種類を把握する 〜JSP開発で使えるタグ一覧と役割まとめ〜](https://qiita.com/juehara-crypto/items/9635c8746d362496aef3)

- [📘 Vol.8.2：【Struts2】JSPタグライブラリ実践テンプレート集 〜現場で即使える！フォーム・URL・セッション活用まとめ〜](https://qiita.com/juehara-crypto/items/f57e473a85b2c9845730)

- [📘 Vol.8.3：Struts2で作る共通レイアウトJSP 〜header/footerを使った再利用設計〜](https://qiita.com/juehara-crypto/items/96cee6c986e13bbacd8c)

- [📘 Vol.8.4：【Struts2】「s:action」「s:token」タグ徹底解説！〜アクション呼び出しと二重送信防止の最前線〜](https://qiita.com/juehara-crypto/items/6e54c3be0c35aa464724)

- [📘 Vol.8.5：【Struts2】条件分岐タグ（s:if / s:else）徹底解説！ 〜表示制御と実務応用の決定版〜](https://qiita.com/juehara-crypto/items/d9883eae6585aa62b93e)

- [📘 Vol.8.7：【Struts2】バリデーションUIの味方！ `<s:fielderror>` / `<s:actionerror>` / `<s:actionmessage>` 徹底ガイド 〜エラーメッセージの表示とフォーム連携の基本〜](https://qiita.com/juehara-crypto/items/b5bacb915f8baea2f2ec)

---