実践的なサンプルアプリをその場でコーディングします！

Size: px

Start display at page:

Download "実践的なサンプルアプリをその場でコーディングします！"

こうだいひがき
5 years ago
Views:

1 2007 Autumn 実践的なサンプルアプリをその場でコーディングします! 株式会社ティーアンドエフカンパニー出羽健一 1

2 講師紹介名前 : 出羽健一 dewa@tafc.co.jp / 所属 : 株式会社ティーアンドエフカンパニー tafc co 所属 : 金沢工業大学大学院客員准教授担当 : サーバーサイド Java 特論 2

3 本セッションについて本セッションは以下の執筆記事のライブコーディング版です WEB + DB PRESS vol. 41 ( 技術評論社 ) 特集 2: つらい Java から楽しい Javaへ Seasar2 サクサク開発実践カリキュラムサンプルコードのダウンロードド 3

4 このセッションの目的開発現場でアーキテクトが作成するお手本的なサンプルアプリケーションをより良いものに仕上げるためのヒントを提供する活字では伝わりにくいライブならではの開発リズムイメージを体感してもらうマスターメンテナンス用のコードジェネレータでできることをわざわざ手間暇かけて伝えようとしているのではありません! 4

5 サンプルアプリの要件アーキテクチャや共通コンポーネントお作法一部の機能だが最終品質レベルを目指す正常系だけでなく異常系も考慮最低でも参照系と更新系を 1 機能づつ作る生産性保守性開発容易性セキュリティ運用パフォーマンス等を考慮する 5

6 サンプルアプリ開発は難しい? そもそも Web アプリ特有の非機能要件の対応は易しくないフレームワークやライブラリが提供している個別の機能をどのように組み合わせて開発すれば良いかが分からない正常系以外の要件をどこまで盛り込むかに迷う技術的な問題ではなくプロジェクト管理の問題できないとやらないは違う 6

7 サンプルアプリの仕様 7

8 画面遷移図 ( 参照系 ) 8

9 画面遷移図 ( 更新系 ) 簡単な仕様ですが応用が効きます! 9

10 ER 図 DEPT ID (PK) NAME VERSION_NO EMP ID (PK) NAME HIRE_DATE DEPT_ID (FK) VERSION_NO EMPはEmployeeの略で社員テーブル DEPT はDepartment の略で部署テーブル 10

11 DDL CREATE TABLE EMP ( ID INTEGER NOT NULL PRIMARY KEY, NAME VARCHAR(20), HIRE_DATE DATE, DEPT_ID INTEGER, VERSION_NO NO INTEGER ); CREATE TABLE DEPT ( ID INTEGER NOT NULL PRIMARY KEY, NAME VARCHAR(20), VERSION_NO NO INTEGER ); ALTER TABLE EMP ADD CONSTRAINT DEPT_ID_FK FOREIGN KEY (DEPT_ID) REFERENCES DEPT (ID); 11

12 ライブコーディング開始! 12

13 手順 ~ 準備編 ~ Step 1: 開発環境の構築省略 Step 2: DB 設計省略 Step 3: Eclipse 起動省略 Step 4: プロジェクトの作成 Step 5: DB 起動 Step 6: DBFlute のセットアップ Step 7: DB からコード生成 Step 8: Tomcat 起動 13

14 使用する主な S2 関連プロダクトベースフレームワーク Seasar 2.4 プレゼンテーション層のフレームワークデータアクセス層のフレームワーク Eclipseプラグイン Teeda DBFlute Dolteng 14

15 ミドルウェア構成 Application Teeda DBFlute S2Dao Seasar2(S2Container) Seasar RC1 / S2Dxo Teeda SP1 Tomcat S2Dao RC1 JDK DBFlute

16 開発環境 IDE Eclipse (Language Pack) IDE 用プラグイン Dolteng EMecha S2JSF プラグイン DbLancher Web Tomcat あまり聞いたことないなぁ ~ DB H2 16

17 EMecha とは? DBFlute の開発環境構築を簡単にする Eclipseプラグイン Eclipse プラグイン更新サイトから入手可能 17

18 EMecha の使い方 1. パッケージエクスプローラーにて Dolteng で作成したプロジェクトを選択 2. メニューから [ 新規 ] - [ その他 ] - [DB Flute Wizards] - [DBFlute Client Directory] を選択ナビゲーターとかでは動かないので注意!! 後の手順は省略 ( 何とかなると思う ) 18

19 DBFlute の概要 1 DB から DB アクセス用のコードを自動生成アプリケーションの約 9 割はこれでまかなう DB ジェネレータ (DBFlute) 読込生成 Behavior ConditionBean DAO Entity 高水準低水準 19

20 DBFlute の概要 2 複雑な処理は外だし SQL で対応する SQL ファイル対話 SQL ツール (S2Dao と同じ形式 ) 読込ジェネレータ (DBFlute) DBFlute ランタイム (S2Dao) パラメータ用 Bean 生成生成戻り値の格納用 Bean 20

21 手順 ~ 参照系アプリ ~ Step 1: HTML ファイルから Page クラス生成 Step 2: 検索条件入力ページ画面遷移 Step 3: 検索結果一覧ページ一覧処理 ( データアクセスモデル変換 ) 絞りこみ並べ替え日付書式 21

22 アノテーションによるインジェクション Setter インジェクションの代替ソースコードの可読性が向上する public スコープでなくても良いインジェクションの失敗時に null をセットするではなく = BindingType.MUST) ValueLabelService valuelabelservice; 複数のクラスから使用するフィールド名は場合は共通の親クラスに定義するコンポーネント名にする 22

23 サクサク開発のテクニック 1 わざとコンパイルエラーを作りこみ Eclipseに修正候補を提示させるテクニックお手軽で強力かつ応用が効くぜひマスターしよう! 次の特性によって生み出されたサクサク感コードジェネレータタイプセーフ言語 IDEサポートホットデプロイ 23

24 サクサク開発のテクニック 2 基本手順 1. わざとコンパイルエラーを作りこむ例 : 存在しないメソッドをでっちあげて呼び出そうとするメソッドの雛形を自動生成宣言してない変数を使ってメソッド呼び出し変数宣言のコード生成 2. エラー箇所に素早く移動する 3. Eclipse に修正候補を提示させて選択する 24

25 サクサク開発のテクニック 3 1 未定義メソッド呼出等でコンパイルエラーをでっち上げる 2 Ctrl + < でエラー箇所へ移動する (Ctrl + > でも OK) 3 Ctrl + 1 でエラー修正候補を表示して選択コンパイルエラーを示す赤波下線この時点では findemps メソッドは存在しない 4 メソッドの雛形が生成される 25

26 S2Dxo のポイント 1 役割マッピング処理を簡素化する特徴インターフェースにメソッドを宣言するだけ実装クラスは書かなくて良い同名プロパティの自動マッピングマッピング漏れはアノテーションで指定する 26

27 S2Dxo のポイント 2 Before - S2Dxo を使わない通常のマッピング EmpUpdatePage p convert(emp entity) { EmpUpdatePage page = new EmpUpdatePage(); page.setempid(entity.getid()); page.setempname(entity.getname()); page.sethiredate(entity.gethiredate()); page.setdeptid(entity.getdeptid()); Stirng deptname = null; if (entity.getdept() td t()!= null) { deptname = entity.getdept().getdeptname(); } } page.setdeptname(deptname); tn tn return page; ネストに伴う NullPointerException 対策 27

28 S2Dxo のポイント 3 After - S2Dxo : id, empname : name") EmpUpdatePage convert(emp emp); メソッド宣言とアノテーションのみ!! 28

29 S2Dxo のポイント 4 Dxo インターフェースに定義するメソッド規約その変換先プロパティ : 変換元プロパティ ) 変換先 convert( 変換元 ); その変換先プロパティ : 変換元プロパティ ) void convert( 変換元, 変換先 ); メソッド名の convert は慣習的なもので実際には任意のメソッド名で OK です 29

30 S2Dxo のポイント 5 例 : 自動マッピングしない社員名と部署名を明示的に指定してマッピング変換先 EmpListPage クラス側社員名 : empname プロパティ部署名 : deptname プロパティ変換元 Emp クラス側社員名 : nama プロパティ部署名 : dept.name empname : name, deptname : dept.name ) EmpDto[] convert(list<emp> emps); 30

31 手順 - 更新系アプリの実装 - Step 1: HTML ファイルから Page クラス生成 Step 2: 一覧ページからの遷移 Step 3: 社員変更ページプルダウンリスト 1 件分の照会処理モデル変換バリデーション Step 4: 社員変更確認ページラベル表示モデル変換テーブル更新処理 31

32 モジュール相関図 HTML SubApplication Service TABLE << abstract >> SubAppPage <<DI>> Behavior 処理系 <<extends>> <<DI>> Service <<DI>> <<DI>> Dxo Page Condition Bean データ系 Dto Entity Dolteng が生成手作り DBFlute が生成 SubApplicatonの粒度はディレクトリ 32

33 New Window1 新規ウィンドウオープンはバグの温床複数のウィンドウ間でのメモリ空間 ( セッション ) の共有を意識していないと思わぬバグを引き起こす Teeda の New Window 機能複数の新規ウィンドウを開いても各ウィンドウごとに別々のメモリを確保するため互いに影響を及ぼさない! 33

34 New Window2 やり方はたったこれだけ A タグに target= _blank を指定する <a href= hoge.html hoge.html target= _blank blank />hoge</a> リンク先のクエリーストリングに newwindow=true を含めるやり方もある参考 URL: 34

35 確認ページのコツ 1 表示用項目とサブミット用項目を用意課題 Page 側で表示用とサブミット用のプロパティを二重に用意することは避けたい HTML 内で同一の id が存在することは NG 解決策 HTML 側でハイフン付きの id を使う idに-( ハイフン ) を含めておくとハイフンから後ろは無視される HTML 内で同一のidを複数回使用する時に有効 35

36 確認ページのコツ 2 HTML 側表示用サブミット用社員名 :<span id="empname" >SMITH</span> <input id="empname-hidden" type="hidden" /> 入社日 :<span id="hiredate" >2007 年 09 月 10 日 </span> <input id="hiredate-hidden" type="hidden" /> -( ハイフン ) 以降は無視される Page 側 public String empname; public Date hiredate; サブミット用の項目は HIDDEN にして見えないようにする Page 側の empnameプロパティは HTML 側の empname と empname-hidden の両方に対応 36

37 手順共通系処理 - Step 1: レイアウト機能 Step 2: 共通エラーページ Step 3: ダブルサブミット対策 37

38 書かない技術 1 異常系のソースコードを書かないが品質を確保できるのが理想正常系 API を呼ぶだけで透過的に異常系処理が考慮される仕組み書かずして開発する言いたいだけ? 38

39 書かない技術 2 例えば社員一覧ページから社員変更ページへ遷移する時パタメーターとして社員 ID を受け取り DB アクセスして該当社員データを取得する Emp emp = empdao.find(empid); 一見問題無いように思われるが 39

40 書かない技術 3 empid に該当するレコードが見つからない時 DAOメソッドは null を返す null を想定した存在チェックのコードを書かないと NullPointerException が発生してしまう初級者は異常ケースの処理を書かない人が多く品質低下をまねく 40

41 書かない技術 4 そこで実行時例外と共通エラーページを組み合わせたテクニックを使う Emp emp = empbhv.selectbypkvaluewithdeletedcheck(empid); l l t 該当レコードが無い場合実行時例外である EnityAlreadyDeletedException が発生する該当データは既に削除されました共通エラーページ (error.html & ErrorPage.java) を使ってメッセージを表示する 41

42 書かない技術 5 今回のように DBFlute の Behavior を使えば実行時例外を逆手にとった手法により省力化 ( 書かない ) と品質向上 ( バラつき無し ) の両方を入手可能 Behavior(Bhv) は DBFlute が生成するクラス開発現場から生まれたDAOとEntityのベストプラクティス的な定番処理を扱う責務はSQL 実行より抽象度が高い DBアクセスモジュール 42

43 レイアウト機能 (Teeda) 共通のヘッダフッタメニュー等を簡単に扱える view/layout/layout.html を用意するだけで自動適用 hoge.html request と言いつつ LayoutPage.java は必ず用意すること! response hoge.html 合成 body 部分 layout.html <te:include te:src="/layout/header.html"/> <te:include te:src="/layout/menu.html"/> <te:includechildbody/> menu.html body 部分 header.html body 部分 43

44 ダブルサブミット対策 Kumu の JavaScript ライブラリを使う Kumu.Html.Disabled で二重送信を防止機能 form の二重送信防止アンカーの二重クリック防止導入 1. js ファイルをダウンロードして適当な箇所に配置 2. HTML ファイルの head タグ内で js ファイルを読み込む <script type="text/javascript" src="./js/kumu.js"></script> <script type="text/javascript" src="./js/event.js"></script> <script type="text/javascript" t/j t" src="./js/disabled.js"></script> /di d j "></ i * 44

45 Appendix 45

46 クラス図 sample.web.emp emp パッケージ << abstract >> AbstractEmp Page EmpSearch EmpList EmpUpdate EmpUpdateConfirm EmpUpdateComplete t Page Page Page Page Page << use >> << use >> EmpDto EmpDxo 46

47 public class AbstractEmpPage { } = BindingType.MUST) Emp = BindingType.MUST) EmpDxo = BindingType.MUST) ValueLabelService valuelabelservice; AbstractEmpPage クラス 47

48 public EmpDto[] empitems; ソースコードのポイント public Class prerender() { List<Emp> emps = findemps(); empitems = empdxo.convert(emps); return null; } EmpListPage#prerender メソッド 48

49 ソースコードのポイント public class EmpDto implements Serializable { /* 社員 ID */ public Integer id; public String empname; public Date hiredate; EmpDto クラス } public String deptname; 49

50 ソースコードのポイント EmpListPage#findEmps メソッド protected List<Emp> findemps() { EmpCB cb = new EmpCB(); /* テーブル結合 :DEPT */ cb.setupselect_dept(); /* 範囲検索 : 入社日 */ cb.query().sethiredate_datefromto(condfromhiredate, condtohiredate); /* 先頭一致 : 社員名 */ cb.query().setname_prefixsearch(condempname); ( ) /* 並べ替え : 社員名 ( 昇順 ) */ cb.query().addorderby_name_asc(); d } /* 検索の実施 */ return empbhv.selectlist(cb); 50

51 ソースコードのポイント EmpDxo インターフェース public interface EmpDxo { /* 社員一覧ページで使う変換処理 : name, deptname : dept.name") EmpDto[] convert(list<emp> emps); /* 社員更新ページで使う変換処理 : name, deptname : dept.name") void convert(emp src, EmpUpdatePage dest); } /* 社員更新確認ページで使う変換処理 : empname") Emp convert(empupdateconfirmpage page); 51

52 ソースコードのポイント EmpUpdatePage#prerender メソッド public List<ValueLabelDto> deptiditems; public Class prerender() { /* プルダウンリスト ( 部署 ) のデータ準備 */ deptiditems = valuelabelservice.finddepts(); /* DBから1 件分のEntityを取得 ( 削除されていれば例外をスロー )*/ Emp emp = empbhv.selectbypkvaluewithdeletedcheck(id); /* EntityのプロパティをPageクラスのプロパティへマッピング */ empdxo.convert(emp, this); } return null; 52

53 ソースコードのポイント ValueLabelDto クラス public class ValueLabelDto implements Serializable { private static final long serialversionuid = 1L; public Object value; public String label; これがないと例外が出る } 53

54 ソースコードのポイント EmpUpdateConfirmPage#doOnceUpdate メソッド /* doonce メソッドによるダブルサブミット防止 */ public Class doonceupdate() { /* モデル変換後にテーブル更新 */ Emp emp = empdxo.convert(this); empbhv.update(emp); } /* 社員更新完了ページへ遷移 */ return EmpUpdateCompletePage.class; 54

55 最後に復習重要復習はこちらで復習はこちらで! WEB + DB PRESS vol. 41 ( 技術評論社 ) 特集 2: つらい Java から楽しい Java へ Seasar2 サクサク開発実践カリキュラムサンプルコードのダウンロード 55

56 ありがとうございました! 56

Seasar.NET入門

Seasar.NET入門 2007 Spring Seasar.NET 入門 2007.5.27 Seasar.NET 杉本和也 2007 Spring Copyright 2004-2007 The Seasar Foundation and the others. All rights reserved. 1 杉本和也と申します高知県の株式会社アイビスに勤務していますプログラミング歴 6 年オープンソース歴 2 年