[JavaEE]JSFのxhtmlは画面表示で使用するファイルだ

2025年5月9日

とてぃです。

本日はJSF（JavaServer Faces）で画面を生成するxhtmlファイルについて、実際の記述や設計時に気をつけているポイントをまとめます。

○メインファイルはxhtmlになります。
JSFではJSPではなくxhtmlファイルが画面の定義ファイルとなり、実行時にはHTMLとしてブラウザに出力されます。

xhtmlファイル設計で気をつけていること

  1. EL式（Expression Language）に統一する
  2. 画面の判定は極力しない
  3. 画面で出力させるオブジェクトはひとつにまとめる

それぞれの理由・ポイントを解説します。

1. EL式に統一する

xhtmlでは、#{bean.property}や${bean.property}といったEL式（式言語）を使って、Javaのバッキングビーン（ManagedBean）とデータをバインドします。
EL式は、画面に表示する値の取得や、条件分岐（rendered属性など）にも活用でき、可読性・保守性が高くなります。

また、JSTLのやなどのJSPタグと混在させると、JSFのライフサイクルやスコープの違いで意図しない動作やバグの原因になるため、uiタグやcタグ（JSTL）は極力混在させないのがベストプラクティスです。

2. 画面の判定は極力しない（必要ならフラグで制御）

画面側で複雑な条件分岐を増やすと、xhtmlが煩雑になり保守が難しくなります。
どうしても分岐が必要な場合は、バッキングビーンでフラグ（booleanやenum）を用意し、xhtmlではrendered属性やEL式でシンプルに制御するのがおすすめです。 

<h:outputText value="有効" rendered="#{bean.activeFlag}" />
<h:outputText value="無効" rendered="#{!bean.activeFlag}" />

このように、rendered属性で表示/非表示を切り替えることで、xhtml側のロジックを最小限にできます。

3. 画面で出力させるオブジェクトはひとつにまとめる

画面で表示するデータを1つのDTOやBeanにまとめておくと、xhtml側でのデータバインディングがシンプルになり、再利用性・保守性が向上します。
複数のBeanやMapをバラバラに参照するより、設計が一貫しやすくなります。

テンプレートや共通レイアウトの活用

JSFでは、Faceletsテンプレートを使うことで、ヘッダー・フッター・メニューなど共通部分を一元管理できます。
<ui:composition>や<ui:define>、<ui:insert>、<ui:include>タグを活用し、メンテナンス性の高いxhtml設計を心がけましょう。 

<ui:composition template="template.xhtml">
  <ui:define name="content">
    <h:outputText value="#{bean.message}" />
  </ui:define>
</ui:composition>

テンプレートを使うことで、各画面のメインコンテンツだけを個別に記述でき、共通部分の修正も一括で行えます。

補足：xhtmlファイルの作成・配置

  • プロジェクトのsrc/main/webapp配下に配置するのが一般的
  • ファイル拡張子は.xhtmlを指定（JSPではなくXHTML！）
  • テンプレート選択時は「strict」か「transitional」を選択（HTML5移行の場合はstrict推奨）
  • バッキングビーンとのバインディングはEL式で

まとめ

  • JSFの画面はxhtmlファイルで定義し、実行時にHTMLとして出力される
  • EL式によるデータバインディングを統一し、JSTLやcタグとの混在は避ける
  • 画面での判定・分岐は極力減らし、必要ならフラグでシンプルに制御
  • 出力オブジェクトは1つにまとめて保守性アップ
  • テンプレートや共通レイアウトを活用し、再利用性・メンテナンス性を高める

今日はこんな感じで終わります。最後まで読んでいただきありがとうございました。

技術html,java

Posted by xxoruioxx