ソフトウェア工学実習 2023年度後期(2年)

今日の予習 フロントエンド開発はプレーンなJavaScriptから始まり、JQuery、ReactやVue、Angularといろいろなライブラリやフレームワークを利用してきた。 これらの違いをソースコードで比較する。 1. 入力内容を表示する テキストボックスに入力するとリアルタイムに表示される。 テキストボックスのinputイベントが発生したら、入力内容を取得して表示する。 JavaScript版 JQuery版 Vue.js版 2.ボタンクリックで表示 テキストボックスに入力後ボタンをクリックすると、入力内容が表示される。 JavaScript版 JQuery版 Vue.js版 3.配列で表を作成 オブジェクト配列の内容を表形式で表示する。 JavaScript版 JQuery版 Vue.js版 4.カウンタ ボタンをクリックする毎に数字がインクリメントされる。 JavaScript版 JQuery版 Vue.js版 今日、やったこと フロントエンド、バックエンド JavaScript、JQuery、Vue.js 今日のホワイトボード フロントエンド、バックエンド フロントエンドはクライアント側。 Webブラウザを使う場合はJavaScriptで開発。iOSやAndoroid上の専用アプリならSwiftやkotlinで開発。 バックエンドはサーバー側。 JavaやC#、PHPやPythonなど選択肢はいろいろ。 図　フロントエンド、バックエンド 同期通信、非同期通信 JavaScriptがクライアントで利用されるきっかけになったのがGoogle Mapのような非同期通信。Ajaxとも呼ばれている。 図　同期通信・非同期通信 同期通信は、サーバーへリクエスト送信するとレスポンスが返ってくるまでなにもしない。 非同期通信は、サーバーへリクエスト送信しレスポンスを待たずに次の処理を実行する。 Webページ全体を書き換える場合は同期通信。 サーバーからデータを取得して、Webページ中の一部分だけを書き換える場合は非同期通信で十分。 ただ、Webブラウザには非同期通信を実現する手段はないため、JavaScriptで制御する必要が...

今日、やったこと [練習問題]REST API 従業員一覧 今日のホワイトボード クライアントからサーバーへJSONデータを送る クライアント側(JavaScript) まず、送信データのオブジェクト作成。 fetch()で送信。そのさい、送信データのオブジェクトをJSON形式に変換(json.stringify(送信データ)) してHTTPのボディ部にセット。 サーバー側(Java) 受信データ(JSON形式)からJacksonを使ってJavaクラス(Employeeクラス)のインスタンス生成。 ただし、JSON形式(JavaScriptのオブジェクト)の各プロパティとJavaクラスのフィールドを対応させるために、Javaクラスのフィールドに@JsonPropertyをつける。 図　クライアント->サーバー　データ送信 URL、パスパラメータ REST APIではリクエストするURLで呼び出すサービスを識別する。 クラス、メソッドに付ける@Path()アノテーションでURLやパスパラメータを指定する。 なお、パスパラメータは引数に付ける@PathParam()で引数にセットすることができる。 図　URL、パスクエリ なお、クライアント側からサーバーに値を渡す方法にはパスパラメータ以外にクエリパラメータもある。 [練習問題]REST API 従業員一覧 正解例をあげておきます。 index.html とくにややこしいことはないかと。 employee.js テーブルを作成するinitTable()関数にてテーブル行にボタンを追加するあたりがポイント。 ...

今日、やったこと [REST API]サンプルアプリ拡張(クライアントサイド) 今日のホワイトボード 前回作成したREST APIのサンプルアプリのクライアント側の検索機能を追加しました。 MyResourceクラスのアノテーション @Pathアノテーション リクエストのURLとメソッドを紐づける。 図　@Pathアノテーション @PathParam、@QueryParam URLのパラメータとメソッドの引数を紐づける。 図　@PathParam、@QueryParam web.xmlとURL HTMLファイル　search.htmlを追加して、リクエストしても表示されない。 web.xmlの<servlet-mapping>が下図のようになっているため。 図　web.xmlとURL この<url-pattern>だとURLが  　http://localhost:8080/jersey_sample1/ のあとになにが続いてもサーブレット(MyResourceクラス)をリクエストしてしまう。 サーブレットは以下の  　http://localhost:8080/jersey_sample1/webapi/ でリクエストするようにweb.xmlを変更。 JavaScriptからリクエスト この授業ではfetch()を使う。 図　fetch()メソッド fetch()は引数のURLをリクエストする。 レスポンスはfetch()の戻り値の中に含まれる。戻値はPromissオブジェクト。 Promissオブジェクトのth...

今日、やったこと [評価用課題]オークションサイトの作成(Java版) 今日のホワイトボード [評価用課題]オークションサイトの作成(Java版) 資料に誤り、訂正がありました。 図　課題資料の修正内容 やってほしくないこと 課題作成にあたり、以下に気をつけてください。 無駄な変数 冗長な処理 DataReaderから検索結果を取り出す bool型はtrueかfalseだけ 変数、メソッド名の接頭語 以上は、 こちら に詳しく書いています。 また、 無駄なインスタンス生成 こちらは ここ に詳しく書いています。 あと、入札データの書き込みの際、以下のトランザクションになります。 対象商品の全入札データをロック ロック成功なら、対象商品の最高値取得 入札金額が最高値より大なら、入札データ書き込み、コミット 入札金額が最高値以下ならロールバック この間のDBアクセス時にエラーが発生してもロールバック 前回のC#版の時にはここを実装されていないかたが結構おられました。 次回は 今回の課題の締め切りは次回(11月30日(木))の2コマ目終了時です。  

今日、やったこと [練習問題]パスワード変更アプリ（Java版） 今日のホワイトボード [練習問題]パスワード変更アプリ（Java版） 正解例をあげておきます。 [DAO]PasswordDAO.java パスワードマスタに新規パスワードを登録する。 SQL実行時に発生するエラーに応じて検査例外をスローして通知する。  [Exception]NotFilledException.java 未入力の項目があるときにスローする検査例外クラス。 [Exception]NoUserException.java 入力されたユーザーIDに該当するユーザーがユーザーマスタに登録されていない時にスローする検査例外クラス。 [Exception]RequirementException.java 入力されたパスワードが要件を満たしていない時にスローする検査例外クラス。 [Presentation]IndexSrv.java サーブレット。 index.jspはWEB-INF以下に配置しているため、このサーブレットから起動する。 [Presentaion]index.jsp WEB-INF以下に配置。 次回は 評価用課題を作ってもらいます。

今日、やったこと [サンプルアプリケーション]ユーザー登録(Java版) [練習問題]パスワード変更(Java版)  今日のホワイトボード 文字列の空白チェック JavaにはC#のようなクラスメソッドのisNullOrEmpty()がない。 インスタンスメソッドのisEmpty()やisBlank()があるが、クラスメソッドではないため、実行前にnullチェックが必要！！ 図　java.lang.Stringの空白チェックメソッド [サンプルアプリケーション]ユーザー登録(Java版) ソースをあげておきます。 [データアクセス]UserDAO.java SQL実行時に発生するエラーのエラーコードはスローされるSQLExceptionのgetErrorCode()で取得できる。 主キー違反(ORA-00001)ならgetErrorCode()は1を返す。 [例外]DupplicateIDException.java IDが重複しているときにスローする検査例外クラス。 [例外]InvalidInviterIDException.java 登録者自身のIDを紹介者として指定したときにスローする検査例外クラス。 [例外]NoInviterException.java 指定された紹介者が存在しないときにスローする検査例外クラス。 [例外]NotFilledException.java 未入力の項目があるときにスローする検査例外クラス。 [プレゼンテーション]IndexSrv.java [プレゼンテーション]index.jsp 次回は 評価用課題をやってもらいます。