見出し画像

MVCモデルによるWebアプリケーション開発(No7.貸付返済)-J2EE

J2EE(JSP・Servlet)の環境でWebアプリケーションの開発方法を学ぶ講座をシリーズで提供しています。7回目は部品として作成されたクラスファイル(リボルビング型カードローンの返済シミュレーションをhtml形式で出力するBean)を活用する方法を学びます。チーム開発での役割分担を想定しています。


開発概要

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

題材としてリボルビング型カードローンの返済シミュレーションを行うWebアプリケーションを作成します。リボルビング型ローンなので毎月の返済額が一定となり、借入残額によって返済期間が変動します。入力画面に借入額、利率、返済額を入力すると、返済期間のシミュレーション結果を表示する画面に遷移します。返済期間を計算するBeanは提供します。このBeanは、参照先に示す「アプラス(新生銀行) 元利定額リボルビング払いシミュレーション」と同じ結果を返すようオリジナルで作成したものです。

(参照先)
アプラス(新生銀行) 元利定額リボルビング払いシミュレーション
https://www.aplus.co.jp/creditcard/revo/simulation/index.html 

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

今回、業務ロジックであるBeanは作成しません。他のチームメンバーが作成したという想定で提供されたBeanを活用することにします。

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

開発方針

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

図1.開発環境 Eclipse 2023

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

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

設計仕様

【貸付返済シミュレーションの仕様】
以下の条件を実現するWebアプリケーションの作成を行います。
(条件)
・urlを指定してサイトにアクセスすると3つの入力欄(借入額、利率、返済額)と「シミュレーションボタン」が配置された画面を表示します。
・借入額とは借入残金、利率とは実質年率、返済額とは月々の返済金額を表しています。
・借入額は円単位で、利率は%の実数値を小数点以下2桁で、返済額は円単位で入力します。
・貸付利子(手数料ともいいます)の計算は「借入残金×(年率÷12)」で端数切捨てで求めています。
・返済額は一定です。つまり返済額=借入残金充当額+貸付利子となります。
・「シミュレーションボタン」をクリックすると画面が遷移して月毎の借入残金の履歴を表示します。

【Model(処理ロジック)】
LoanSimBean.classが提供されます。
(仕様)
・引数で借入額(円)と年利率(実数値)と返済金額(円)を受け取る
・月毎の借入残金を計算しhtml形式で変数に保持する
・借入残金の変数はメソッドで外部に公開される

外部設計

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


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


urlにアクセスすると図2のような、起動画面が表示されます。借入額(初期借入額)と年率(想定利回り)と期間(積立総月数)を入力して「シミュレーションボタン」をクリックすると、図3のように借入残金のシミュレーション結果の表示画面に遷移します。

図2.起動画面
図3.借入残金のシミュレーション画面

内部設計

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

図4.MVCモデル図

提供される貸付返済計算ロジック(LoanSimBean.class)の使い方とクラス図は以下のようになります。

(使い方)
・LoanSimBeanクラスを借入残額年利率返済金額の3つの引数をもつコンストラクタで実体化します。
・simulationメソッドを実行することでsimフィールドに借入残金の履歴がhtml文字列で表組されます。
・利用側のクラスはgetSim()メソッドで借入残金の履歴を取得します。

(クラス図)
package:jp.ict.aso.model
-------------------------------------- //クラス名
LoanSimBean
-------------------------------------- //フィールド(プロパティ)
- zankin:int                                       //入力単位は円(借入残額)
- riritu:double                                  //入力単位は%の実数値(年利率)
- hensai:int                                       //入力単位は円(返済額)
- sim:String                                      //借入残金の履歴(html形式)
-------------------------------------- //メソッド
+ LoanSimBean(zankin:int,riritu:double,hensai:int):
+ simulation():void                          //シミュレーション実施
+ getSim():String                             //結果の取得
+ getZankin():int                              //設定された借入残額取得
+ getRiritu():double                         //設定された利率取得
+ getHensai():int                              //設定された返済額取得
--------------------------------------
-:private
+:public
#:protected

1.貸付返済計算ロジック用JavaBeansクラスを使用する準備をします

(1)クラスファイルの準備をします
以下Windows環境を想定しています。
事前に「提供Beanフォルダ」を作成しておきます(例 c:¥提供Bean)。
提供Beanフォルダ内にLoanSimBean.classを保存しておきます。
その際パッケージの階層に従ってください。
(例 c:¥提供Bean¥jp¥ict¥aso¥model¥LoanSimBean.class)

(2)LoanSimBean.classをEclipseのビルド・パスに追加します


Eclipseパッケージ・エクスプローラより
moneyプロジェクトを右クリック→ビルド・パス→ビルド・パスの構成→「ライブラリ」タブ→「クラスパス」クリック→外部クラス・フォルダーの追加→「提供Bean」を指定します→最後に「適用して閉じる」をクリック
 
※図5のように一度設定されていれば再度設定する必要はありません。

図5.Javaのビルドパス追加画面

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


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


LoanServlet.java 
  パッケージ:jp.ict.aso.controller
  クラス名:LoanServlet
  ソースコード:考えましょう! ※アノテーションは/Loan

3.借入額・利率・返済額の入力画面のJSPファイルを作成します


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


・loanForm.jsp
  保存場所:money/src/main/webapp/WEB-INF/jsp
  ファイル名:loanForm.jsp
  ソースコード:考えましょう!

4.シミュレーション結果の出力画面のJSPファイルを作成します


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


・loanResult.jsp
  保存場所:money/src/main/webapp/WEB-INF/jsp
  ファイル名:loanResult.jsp
  ソースコード:考えましょう!

実行確認

サーブレットクラス(LoanServlet.java)を実行します。しかし、、、

1.InternalServerErrorとなります

実行用Beanのデプロイ(配置)が必要です。この設定を行わないと図6のような実行時エラーになります。


Eclipseパッケージ・エクスプローラより
LoanServlet.javaを右クリック→実行→サーバーで実行
→図6のようにエラーとなる


図6.実行時エラー画面

2.実行用Beanを配置します

LoanSimBean.classをEclipseの実行時のクラスパスに追加します。


Eclipseプロジェクト・エクスプローラより
パッケージ・エクスプローラではありません!
moneyプロジェクトを展開→buildを展開→classesを展開→jpを展開→ictを展開→asoを展開→modelがなければ作成


図7のようにmodelフォルダの位置へLoanSimBean.classをドラッグ&ドロップすることで実行時クラスパスにBeanが追加されます。
※Eclipseを終了させると、再度追加が必要な場合があります。

図7.実行時クラスパスの位置

3.再度実行します

Tomcatサーバを再起動したのち、再度サーブレットクラス(LoanServlet.java)を実行します。


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


図8.起動画面

ソースコード例と提供Bean

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

また、提供BeanとしてLoanSImBean.classを次のセクションに置きますので、ダウンロードして使用してください。

ここから先は

219字 / 4画像 / 1ファイル

¥ 1,000

この記事が気に入ったらサポートをしてみませんか?