今までの仕事などで、JSFを使ったことがある人はいるでしょうか。

JSFを簡単に説明すると、たとえばWebのアンケート欄でよく見かける機能が作れるものです。

名前や住所、性別、自由記入などこれらはJSFで書かれているものかもしれません。

この記事ではJSFとはどういったものかという詳しい説明との基本的な使い方を解説していきます。

そしてJSFの機能と仕組み、実際のタグの使い方や応用なども考えてみましょう。

JSFは長いコードに煩わされず、テキストフィールドなどを設置したい人、触ったことがないけれど作ろうと考えている人におすすめです。

もちろん、会社のホームページにアンケートを設置することを検討している人や、個人ブログで簡単なアンケートを取りたいという人にもおすすめです。

JSFとは



JSF(JavaServer Faces)は、オブジェクト指向プログラミング言語JavaのWebアプリケーションを作るためのフレームワークの一つ。

フレームワークにはほかにも種類があり「Play Framework」「Wicket」などがあります。

大規模なシステム向けのJava EE (Java platform Enterprise Edition) の仕様の一つでもあります。

「Faces」と付く通り、ユーザーに文字入力や回答を選択するボックスなどのユーザーインターフェースを作ることに特化しています。

たとえば「閲覧者はどんなことに興味があるのか」「どんな年代の人がこのページを読んでいるのか」などが分かるコードを組むことができます。


JSFの基本的な特徴



JSFの特徴は、Webアプリケーションを作るうえでの基本的なプレゼンテーションコンポーネントが用意されていることです。

  • 文字入力のためのテキストフィールド
  • 送信、キャンセルなどのボタン
  • 複数の選択肢の中から選べるセレクトボックス

などのコンポーネントを、「JSPカスタムタグライブラリ」を使用して表現できます。

そしてそのコンポーネントへ追加機能を与えることも可能です。

  • イベントの制御
  • ステート情報の保持
  • 入力値のチェック
  • データモデル変形
  • データモデルへのマッピング

こういったものなどがあります。

一見複雑そうに見えて、使わないほうが楽とも思えてしまうかもしれません。

しかし後述の「JSFの機能」で、この部分を詳しく解説していくので安心してください。

また、JSFはServlet API上に構築されているため、様々なクライアントのデバイスに対して出力できるようにカスタムが可能です。

JSF以外のプレゼンテーションテクノロジと併用できます。


似たような名前のJSPとの違いは

フリーランス　悩み


JSFと見間違えてしまいそうな「JSP」はどんなものでしょうか。

JSP(JavaServer Pages)はWebページの中に（<％>○○<％>と囲むことで）Javaプログラムを記述する言語となります。

1999年代から使われた言語です。

アクセスの要求がされると、Webサーバーが囲んだプログラムを実行します。

HTMLの表記やデータ処理用のJava表記が見づらいため扱いづらいものの、JSFよりも細かい分岐選択の処理などが行えます。

ほかにも、特定のハードウェアの仕様に依存することがないのも特徴です。

JSPが実行できる環境が備わっているなら同じように稼働ができるのも利点でしょう。


JSFを使用するメリット

JSFを使うことにメリットは、とにかく扱いが簡単なことです。

ツール化していてセットのために新しい言語を覚える必要もなく、普段使い慣れた言語から離れることもありません。

そおためプログラマーへの負担が軽減されます。

また、タグを使うことで簡単にユーザーインターフェースを作成できることも大きな強みです。

長い入力コードを入れる場合、例えばマネージドビーン用のセッター入力などは自動生成することができます。

フレームワークが標準化しているため、ツールをユーザーに提供したい場合に開発ツールを作りやすいという利点もあります。


JSFの機能

開発中と表示されたスマートフォン画面


ではJSFの機能を詳しく解説していきます。

なお、イベントハンドラ（イベント管理）はJavaScriptが適用されており、しっかり実装されているので安心してください。


UIコンポーネント

UIコンポーネントを使用するためのタグが用意され、JSFを使用したフォーム入力欄を簡単に形成できます。

自分だけのUIコンポーネント作成もでき、作ったコンポーネントは使い捨てることなく再利用可能です。


バリデーション

名前などの記入がされているか、必須項目を選択されているか、文字数は適当かなどフィールドをチェックし判断をします。

チェックしたときに不適切だった場合には赤枠で表示したり、文字を表示したりが可能です。


ステート管理（ステート情報保持）

オフィス画像


フォームに入力された値がJSFのコンテキストに保持される機能です。

バリデータでチェックした値が適切ではなかった場合など、再度入力フォームを表示する時に、入力していたデータを表示します。

ユーザーに再入力の手間を省くためには必須といっても良い機能でしょう。


データコンバージョン

入力された値を、指示したJavaの型に変換することが可能です。データモデルとの連携を簡単にすることができます。


ナビゲーション機能

ページ移動の設定を簡単に行える機能。

JavaBeansやデータベースなど表にでないバックエンドシステムデータとUIコンポーネントをマッピングします。


国際化

デフォルトの言語だけでなく、英語やフランス語などをユーザーがボタン一つで変更できるように設定できます。

海外向けにWebページを展開する際、専用ページではなく、既存のページを利用したい時に欲しい機能です。

JSFのライフサイクルについて

ネットワーク


JSFを知るうえで、ライフサイクルも押さえておきましょう。ライフサイクルは6つのフェーズから成り立っています。


Restore

ページのコンポーネントである、Javaオブジェクト「UI ViewRoot」でビュー（ここでは自由記入できる欄と選択肢）作り、「FacesContext」に納品。

初めてアクセスした場合は空の状態で表示されます。

JSFで作成したページから要求された場合は、すでに書き込みや選択が行われサーバーに納品されています。

レビューで記入したものが復元できるのも特徴です。


Apply Request

デスク周り


記入欄の各コンポーネントに付随されたデコード（decode）が呼び出され、各コンポーネントにその値が反映します。


Process Validation

記入欄に表記されたデータに正しく回答されているかのバリデータが行われます。


Update Model Value

数値がJSF構成ファイルであるfaces-config.xmlに登録されたJavaBeans「マネージドBean」に反映されます。


Invoke Application

ビジネスロジックが実行され、「送信」ボタンが解放されたり、リンクが増えたりといったアクションイベントが処理されます。


Renderer Response

エンコードメゾットが呼び出され、レスポンスが生成されるものです。

終了するとコンポーネントの状態がクライアント、またはサーバーに保存されます。


JSFを使うための開発環境の準備

嬉しそうにパソコンを触る男性


ではJSFを利用するための環境を準備しましょう。必要なのはこの2つです。

  • Java SE
  • NetBeans IDE（ソフト開発ツール、Webサーバー・サーブレットコンテナ）

実行環境とコンパイラはJava SE。

NetBeans IDEは開発ツールで、表示するための環境であるウェブサーバーとサーブレットコンテナの役割があります。

NetBeansは様々ありますが、Java EEに対応したものが必須です。

NetBeans IDE にはJSFを実行できるサーバーの「GlassFish」（オープンソース・コミュニティ）があるのでこちらを参照すると良いでしょう。

NetBeansをインストールして起動したあと、NetBeansの[ファイル]-[新規プロジェクト]を実行します。

どの種類のプロジェクトをつくるかという選択肢で「Java Web」「Webアプリケーション」を選択。

プロジェクトの保存場所を指定する。プロジェクトそのものの場所は自動です。

フレームワークの設定はどうするかを聞かれるので「JavaServer Faces」にチェックすると基本形が完成です。

設定が完了すると作成したプロジェクトに、自動生成されたindex.xhtmlファイルが表示され、コード内の編集ができます。

これはあくまでチュートリアルです。これから本格的にJSFを使ってみましょう。


JSFの基本的な使い方



JSFの記述形式は特殊な言語を使いません。しかし、準備段階のままではJSFの本当の力を発揮させることは不可能です。

マネージドビーンズをつくり、簡略化や呼び出しができるようにしましょう。

新規作成したソースパッケージを右クリックしてください。

「新規パッケージ」を実行。その後パッケージ名を設定。ここでは「project」と明記します。

先ほど作ったパッケージを右クリック。[新規]-[JSF管理対象ビーン]を実行します。

マネージドビーンズの名前を決め、「スコープの指定」を「セッション」に選択しましょう。

この手順を踏むことで自動的にひな形コードが生成されます。

あとは「public class UserInfoBean implements Serializable {」以下から自由にビーンを作成可能です。


受け取りたい情報と形式を設定する

デジタルマップ


アクセスしたユーザーから、何の情報を得たいかを設定していきましょう。

コードの中でセッター・ゲッターを挿入したい場所にカーソルを置いて右クリックします。

コンテキストメニューから「コード挿入」を選択してください。

「取得メソッドおよび設定メゾット」を選び、すべてを選択しましょう。

という工程を踏むことで、手間を省くことができます。

そして、そのあと必要なコードは自動生成してくれるので便利です。

長いコードをミスなく慎重に書くことがなくなり、自動でできるので大切な時間を無駄にしません。


インターフェースとしての顔・JSFページの作成



マネージドビーンが完成できたら、いよいよJSFページを作成できるようになります。

マネージドビーンで作ったものがしっかりと反映されるようにコードを書いていきましょう。

「新規ファイル」でJSFページを作成します。

「value=”#{マネージドビーン名.プロパティ名}”」で自動表示。

送信ボタンは「h:commandButton」で作成です。

この過程を踏むことで、コードが自動で完成します。あとはファイルを選択し「実行」ボタンを押すだけです。

フォームに生年月日と名前を入力し送信ボタンをクリックしてください。

その際、正しく表示ができているか確認しましょう。

また、必ず「戻る」ボタンも押して、入力したデータが残っているかも確認しておきます。


ナビゲーション機能を使ったページ作成

若いスタートアッププログラマ


今までの入力ページは、入力と出力は同じページで行っていました。

次はJSF機能のひとつである「ナビゲーション機能」を使って、自由なページ移動をさせてみましょう。

Webページの表現の幅が広がります。

入力用JSFページを「○○.xhtml」として作成し、「h:commandButton」に「actionプロパティ」を追加し値を「□□1」と決めます。

こうすることで、送信ボタンを押すと「□□1.xhtml」に移動させることができます。

移動先の出力ページでは「h:outputText」を利用してマネージドビーンから情報を取得し、表示してください。


基本系を使うだけでも、Webページの魅力が高まる



ここまでJSFの基本的な機能や使い方などを解説してきました。

言葉だけではとっつきにくいと感じられるかもしれませんが、導入自体はかなり簡単です。

パソコンとインストールできるネット環境があれば、今すぐにでも作成に取り掛かることができます。

このほかにも、ユーザーが選択できる「プルダウンメニュー」やワンクリックで選択が可能な「ラジオボタン」。

また、自由記入を可能にさせる「テキストエリア」など、JSFの便利な機能を使ったコンポーネントがあります。

この記事を機に、JSFの機能やメリットを再確認してみたり、実際に作ったりしてみてください。


SHIFTフリーランスは、SHIFTグループがプライムとして参画している独自案件をフリーランスエンジニア向けに紹介する唯一のプラットフォームサービスです。

エージェントによるサポートもありますので、ご利用を検討してみてはいかがでしょうか。