J2EE（JSP・Servlet）の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。３回目は入力と出力で画面が遷移しない題材（円ドル変換）をMVCモデルで実装してみます。

開発概要

J2EEアプリケーション・サーバ（Tomcat）を利用して開発を行うということを前提に実装を進めていきます。開発ツールには統合開発環境のEclipseを用いることにします。

題材として日本円を米ドルに変換するWebアプリケーションを作成します。入力画面に為替レートと日本円を入力すると、同じ画面内に米ドルの金額が表示されます。入力画面と変換結果の出力画面には同じJSPを使うため、GETリクエスト時にもBeanの実体化が必要になります。

J2EE環境ですので使用言語は当然Java（JSP・Servlet）となり、設計技法にはMVCモデルを使います。MVCモデルとはWebアプリケーションの構成をModel（業務ロジック）ーView（表示）ーController（制御）に分割して設計する技法です。３つのモデルに役割分担することで部品化が促され、ひいてはチーム開発に貢献します。

実装していく過程でEclipseの利用方法が不明な場合は、別途メール等でお知らせください。この講座では、作成済みの仕様と設計書から「J2EE環境でのMVCモデルの実装の仕組みを学ぶ」ことを目的とします。

開発方針

Webアプリケーションの開発環境には図１のようにEclipse2023を用います。

Spring等のフレームワークは使用しません。これは、MVCモデルにおけるhttpプロトコルの処理の実装を直に学んでいただきたいためです。

開発に必要な仕様と最小限の設計ドキュメントは提示します。この情報をもとに、まずは、自分で試行錯誤しながら実装してみてください。

設計仕様

【円ドル変換の仕様】
以下の条件を具現化するWebアプリケーションの作成を行います。
（条件）
・urlを指定してサイトにアクセスすると２つの入力欄（為替レート、日本円）と計算ボタンが配置された画面を表示します
・「計算ボタン」をクリックすると同じ画面内に米ドルの金額を表示します
・入力する為替レートは小数点２桁です
・入力する日本円は整数値です
・出力する米ドルは、小数点３桁目の四捨五入で小数点２桁の表示です

【Model（処理ロジック）の設計方針】
以下の仕様で実装します。
（仕様）
・米ドル＝日本円÷為替レート
・米ドルは小数点３桁目を四捨五入します
　　Javaの例：double dollar=((double)Math.round((yen/rate)*100)/100);
（実装）
・JavaBeansの仕様に基づきYenDollarBean.javaを作成します
・package名は jp.ict.aso.model とします
・作成するクラスはSerializableインターフェースを実装します
・変数はprivate宣言します
・引数なしのコンストラクタを実装します
・適切な引数を与えるコンストラクタを実装し、引数はインスタンス変数に格納します
・処理ロジックを実装します、このとき処理結果はインスタンス変数に格納します
・setterメソッドを実装します　
・getterメソッドを実装します　　

外部設計

接続urlはhttp://localhost:8080/libcon/Yenとします。よってEclipseの動的Webプロジェクトの名前はlibconとなり、サーブレットのurlパターンはYenとなります。

Eclipseのメニューバーより
ファイル→新規→動的Webプロジェクト→「libcon」プロジェクトを作成する
※作成済みであればこの処理は必要ありません

urlにアクセスすると図２のような、起動画面が表示されます。為替レートと日本円を入力して「計算ボタン」をクリックすると、図３のように米ドルの金額が計算され入力値と共に画面下部に表示されます。この時、新たな画面へ遷移はしません。

内部設計

クラス連携図は図４のようになります。

円ドル変換ロジックのクラス図は以下のようになります。
-------------------------------------- //クラス名
YenDollarBean
-------------------------------------- //フィールド（プロパティ）
- yen:double
- dollar:double
- rate:double
-------------------------------------- //メソッド
+ YenDollarBean()                           //コンストラクタ
+ calcDollar():void                           //ロジック
+ setYen(yen:double):void               //セッター
+ setRate(rate:double):void             //セッター
+ getRate():double                           //ゲッター
+ getYen():double                            //ゲッター
+ getDollar():double                        //ゲッター
--------------------------------------
- private
+ public

実装手順

１．円ドル変換ロジック用JavaBeansクラスを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→クラス
→以下の内容で作成

・YenDollarBean.java　
　　パッケージ：jp.ict.aso.model
　　名前：YenDollarBean
　　ソースコード：考えましょう！

２．リクエストコントロール用Servletクラスを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→その他→Web→サーブレット
→以下の内容で作成する

・YenDollarServlet.java　
　　パッケージ：jp.ict.aso.controller
　　クラス名：YenDollarServlet
　　ソースコード：考えましょう！　※アノテーションは/Yen

３．起動画面を表示するJSPファイルを作成します

Eclipseパッケージ・エクスプローラより
libconプロジェクトを右クリック→新規→その他→Web→JSPファイル
→以下の内容で作成する

・yenDollar.jsp
　　保存場所：libcon/src/main/webapp/WEB-INF/jsp
　　ファイル名：yenDollar.jsp
　　ソースコード：考えましょう！

実行確認

サーブレットクラス（YenDollarServlet.java）を実行します！！

Eclipseパッケージ・エクスプローラより
YenDollarServlet.javaを右クリック→実行→サーバーで実行
→図５のように実行される

ソースコード例

以下に各プログラムのソースコードの例（本文内では「考えましょう！」になっている部分）を示しますので、実装の参考にしてください。