コンホ?ーネントアフ?ローチによるソフトウェア开発の俊敏性と品质向上の実现～カスタマーショーケース
Download as PPTX, PDF0 likes110 views
2020年2月4日（火）に UDX GALLERY NEXT で開催された「Embarcadero Tech Vision 20」で発表したときのスライドです。
More Related Content
What's hot (20)
Similar to コンホ?ーネントアフ?ローチによるソフトウェア开発の俊敏性と品质向上の実现～カスタマーショーケース (20)
![[3rd 長崎QDG] チームで、長期間で、たくさんのソフトウェアを快適に開発し、価値を生み続けるためのエンジニアリング](https://cdn.slidesharecdn.com/ss_thumbnails/nagasakiqdg2018-teams-180208122831-thumbnail.jpg?width=560&fit=bounds)
![[SCCM 友の会] System Center Configuration Manager この秋おさえておきたい最新機能!](https://cdn.slidesharecdn.com/ss_thumbnails/pr25-190409082439-thumbnail.jpg?width=560&fit=bounds)
More from Takuya Tsuchida (9)
Recently uploaded (13)
![ElasticsearchでSPLADEする [Search Engineering Tech Talk 2025 Winter]](https://cdn.slidesharecdn.com/ss_thumbnails/searchtech-250228102455-ddc5ce09-thumbnail.jpg?width=560&fit=bounds)
コンホ?ーネントアフ?ローチによるソフトウェア开発の俊敏性と品质向上の実现～カスタマーショーケース
- 1. 本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 コンポーネントアプローチによる ソフトウェア開発の俊敏性と品質向上の実現 土田 拓也 Mikatus 株式会社 プロダクト開発グループ／デザイングループ グループリーダー
- 2. アジェンダ ? Mikatus のご紹介 ? Sencha Ext JS 選定の理由 ? コンポーネントアプローチによる開発とテスト ? DEMO: Sencha Architect と Sencha Test による実装例
- 3. Mikatus のご紹介 ? Mikatus のミッション ? クラウド税務?会計?給与システム A-SaaS ? Adobe AIR から Sencha Ext JS へ
- 7. Adobe AIR から Sencha Ext JS へ 2020年末に Adobe のサポート終了
- 9. Sencha Ext JS 選定の理由 ? クラウド税務?会計?給与システム A-SaaS の要件 ? エンタープライズ品質の Sencha 製品群
- 10. クラウド税務?会計?給与システム A-SaaS の要件 ? 動作の安定性 ? データの整合性 ? 計算結果の正確性 ? デスクトップアプリケーション並みの高速な操作性 ? 最低でも10年以上帳票出力する機能を維持できる保守性
- 11. エンタープライズ品質の Sencha 製品群 ? 十分に検証された高機能コンポーネント群 ? ベストプラクティスを自然に実現できる統合開発環境 ? DOM 要素単位ではなくコンポーネント単位での自動テスト環境 ? エンタープライズ水準のサポート体制 ＋ ＋
- 12. コンポーネントアプローチによる開発とテスト ? DEMO: Sencha Architect と Sencha Test による実装例 ? コンポーネントアプローチによる開発とテストのベストプラクティス
- 13. DEMO: Sencha Architect と Sencha Test による実装例
- 14. 画面を適切な独自コンポーネントに分割する DOs ? 画面を適切な粒度の独自コンポーネントに分割する ? 独自コンポーネントに分割するときに画面設計も合わせて見直す DON’Ts ? 画面を独自コンポーネントに分割せずに画面を実装する ? 画面を細かすぎる独自コンポーネントに分割する ? 独自コンポーネントを無理に複数の画面で再利用する ? 画面設計のワイヤフレームを不可侵としてコンポーネント分割を進める
- 16. 標準コンポーネントを素直に正しく利用する DOs ? 標準コンポーネントを組み合わせて独自コンポーネントを実装する ? 標準コンポーネントのコンフィグでコンポーネントの動作を指定する ? 標準コンポーネントの公開メソッドでコンポーネントを操作する DON’Ts ? 標準コンポーネントを深く継承して複雑なコンポーネントを実装する ? 標準コンポーネントの非公開メソッドでコンポーネントを操作する ? 標準コンポーネントをオーバーライドしてコンポーネントの動作を変更する ? 標準コンポーネントの操作を大量に手続き的に実装する
- 17. 例：実装例の Toolbar を標準コンポーネントに分割する Ext.Button iconCls: x-fa fa-plus text: Add Ext.Button iconCls: x-fa fa-minus text: Delete Ext.Toolbar docked: top Example.view.books.Toolbar
- 18. 独自コンポーネントを公開インターフェイスで疎結合にする DOs ? 独自コンポーネントを設定するための公開コンフィグを定義する ? 独自コンポーネントを操作するための公開メソッドを定義する ? 独自コンポーネントと連携するための公開イベントを定義する ? 直接の子であるコンポーネントの公開メソッドを呼ぶ ? 下位のコンポーネントに依存する DON’Ts ? コンフィグ／メソッド／イベントなどの公開インターフェイスを定義しない ? 直接の子でないコンポーネントのメソッドを呼ぶ ? 上位のコンポーネントに依存する
- 19. 例：実装例の Toolbar に公開インターフェイスを定義する Configs deleteButtonDisabled : 削除ボタンの有効／無効 Methods enableDeleteButton : 削除ボタンを有効にする disableDeleteButton : 削除ボタンを無効にする Events addButtonClicked : 追加ボタンがクリックされた deleteButtonClicked : 削除ボタンがクリックされた Example.view.books.Toolbar
- 20. 例：実装例の Grid に公開インターフェイスを定義する Example.view.books.Grid Methods createNewBook : 新しい本を作成する deleteSelectedBook : 選択された本を削除する Events bookSelected : 本が選択された bookDeselected : 本の選択が解除された
- 22. 独自コンポーネントのインターフェイスを自動テストする DOs ? 独自コンポーネントの公開インターフェイスを自動テストする ? REST API の通信は SimManager と Simlets でモックにする ? テストカバレッジを参考にしつつテストを充実させる DON’Ts ? 独自コンポーネントをテストしない ? テストカバレッジ100%を必達にする
- 25. Sencha Architect と Sencha Test による実装手順 ? サンプルアプリケーションの実装手順は下記記事参照 ? Sencha Architect と Sencha Test で開発環境を構築する ? Sencha Architect と Sencha Test の開発環境に REST API モックサーバーを追 加する ? Sencha Architect でコンポーネントを実装して Sencha Test で自動テストす る
- 26. まとめ ? コンポーネントアプローチで開発できる Sencha Ext JS にしよう ? ビジュアル開発できる Sencha Architect で始めよう ? Sencha Test によるコンポーネントテストで品質を担保しよう ＋ ＋
Editor's Notes
- #2: ここからは、コンポーネントアプローチによる Web アプリケーション開発の事例について Mikatus 株式会社の土田が発表させていただきます。
- #3: 本日のアジェンダはこのようになっておりまして、当社 Mikatus をご紹介させていただいた後に、当社のプロダクト開発でなぜ Sencha Ext JS を選定しているかを説明し、コンポーネントアプローチによる開発とテストをする中で実際に見えてきたベストプラクティスをデモを混じえつつお話させていただきます。
- #4: それでは、まずはじめに当社 Mikatus についてご紹介させていただきたいと思います。
- #5: 当社 Mikatus 株式会社は、「税理士のみなさまにとって、なくてはならない存在として」というミッションを掲げ、税理士のみなさまないしは税理士が所属する会計事務所に向けてサービスを提供する会社となっております。昨年社名をアカウンティング?サース?ジャパンから変更してミカタスになりました。前の社名だと聞き覚えのある方がいらっしゃるかもしれません。さて、当社は税理士の皆様に向けて幅広くサービス提供をしておりますが、
- #6: クラウド税務?会計?給与システム A-SaaS が主力製品となっておりまして、会計事務所の仕事を一気通貫でクラウドでできるサービスとなっています。
- #7: A-SaaS の画面のひとつはこのようなものになっていまして、見ていただくとおわかりかと思いますが、グリッドやテキストフィールド、ボタンなどの要素が詰まった UI になっています、昔ながらのプロフェッショナル向けの業務アプリケーションという印象を受けられるのではないでしょうか。そして、こちらのアプリケーションは Adobe AIR で開発されています。10年程前に創業したときの選択肢としてはそんなに悪くなかったと思うのですが、
- #8: Adobe Flash プラグインの配布終了に伴い、Adobe AIR の Adobe によるサポートも2020年末に終了することになりました。その移行先として当社は Sencha Ext JS を選定しました。その理由はのちほどのスライドで説明させていただきますが、実施に Sencha Ext JS で作り直しているアプリケーションは、
- #9: このようなものです。Adobe AIR で開発したアプリケーションの UI をある程度踏襲しながら開発しているので似てはいますが、完全にブラウザー上で動作しています。Sencha Ext JS での開発が進み Adobe AIR で開発されたアプリケーション以上のものができあがりつつあります。
- #10: 改めて、なぜ当社が Sencha Ext JS を選定するに至ったかを簡単にご説明差し上げたいと思います。
- #11: 会计事务所向けの业务システムということで复雑な业务ロジックが含まれることは想像に难くないと思います。要件としても、动作の安定性やデータの整合性、计算结果の正确性などは当然求められますが、クラウドで提供するにあたりデスクトップアプリケーション并みの高速な操作性はチャレンジングな要件となってきます。また、法律の関係で10年以上は帐票が出力できることを维持しなければなりません。この中で、动作の安定性と高速な操作性、保守性はクライアントアプリケーションにおいて重要な要件になってきます。その要件を満たすようなフレームワークとして、
- #12: エンタープライズ品質の Sencha 製品群を当社は選定しました。十分に検証され、高機能なコンポーネントを持つ Sencha Ext JS のみならず、ベストプラクティスを自然に実現できる統合開発環境である Sencha Architect やコンポーネント単位でテストを書けるテスト環境 Sencha Test など、Sencha 製品群によるエコシステムが高品質な業務システム開発に貢献します。移り変りの早いフロントエンド界隈ですが、エンタープライズ向けということもあり、長期に渡ってサポートされるところも重要なポイントです。
- #13: これまで当社は Sencha を導入してコンポーネントアプローチによる開発を行ってきました。サンプルアプリケーションによるデモをした上で、当社なりのコンポーネントアプローチによる開発とテストのベストプラクティスをご紹介したいと思います。
- #14: デモでお见せする実装例は本の一覧を管理するアプリケーションです。実装例について简単に动作を説明した后に、自动テストを実行してお见せしたいと思います。今回はコードの详细は时间の関係で割爱しますが、ベストプラクティスはこの実装例を元に説明したいと思います。（デモへ移动）デモでお见せする実装例はとてもシンプルなものとなっています。本の一覧になっていて、タイトルと着者を编集できます。选択して削除することもできれば、新规作成することもできます。シンプルなアプリケーションではありますが、ツールバーの部分とグリッドの部分はコンポーネントとして分かれていまして、それぞれを独立してテストできるようになっています。そのテストを実行してみたいと思います。（テスト画面へ）一瞬なので见逃さないようにしてください。（テスト実行）はい。このようにコンポーネントごとに独立してテストを実行しています。もう一度実行しますね。今度はテストでコードカバレッジを取得するようにしてみます。（カバレッジ実行）コードカバレッジもこのように取得できるので、ある程度テストケースを実装するときの参考になるかと思います。このような形でアプリケーションを开発するときには各コンポーネントを独立して実装してテストをしながら开発を进めることで品质の高いアプリケーションが実现できます。そのような开発をしていくためのベストプラクティスをスライドの后半でご绍介していきたいと思います。
- #15: 今お见せしたアプリケーションではコンポーネントごとにテストを実施しました。アプリケーション开発をする上で画面を适切な粒度のコンポーネントに分割することは重要です。また、コンポーネントに綺丽に分割できないときは画面设计においＵＸ上の课题があることが多いので、画面设计に立ち返ってみることをオススメします。その一方で、コンポーネントに分割せずに开発したり、ボタンひとつひとつを独自コンポーネントとして定义しないようにしましょう。独自に作成したコンポーネントを再利用し过ぎるのも问题になることが多いので注意してください。ある画面のためだけに独自コンポーネントに机能を追加し始めたら赤信号です。
- #16: 実装例のアプリケーションはブックスツールバーとブックスグリッドにコンポーネント分割をしています。それらのコンポーネントをブックスメインが包含して接続しています。
- #17: 独自のコンポーネントを実装する際には当然 Sencha が用意している標準コンポーネントを利用します。それらを素直に正しく組み合わせて独自コンポーネントを実装してください。よく考えられたコンフィグやメソッドが各標準コンポーネントに準備されています。それらを使用しましょう。ただし、それらを何度も継承して複雑なコンポーネントを実装しないようにしましょう。また、標準コンポーネントの非公開メソッドを使用したり、Sencha 独自の機能であるオーバーライドという方法で標準コンポーネントの内部動作を 変更するのはやめましょう。手続的にではなく、できるかぎり宣言的に実装するのもポイントです。
- #18: これはツールバーの例ですが、当然 Sencha の標準コンポーネントで構成されています。ツールバーは標準のツールバーで実装していますし、追加と削除のボタンは標準のボタンです。そのコンフィグを利用してアイコンやテキストを表現しています。ここまでシンプルなコンポーネントばかりではないですが、自然で素直な方法で実装できていることが理想です。
- #19: さらに独自コンポーネントはできる限り疎结合になるように実装しましょう。公开インターフェイスとしてコンフィグ?メソッド?イベントを定义します。メソッドによる连携は直接の子どものコンポーネントに限定して、下位のコンポーネントだけに依存するようにしましょう。そうしない场合、どの机能を使用していいかわからないので复数人で开発していると思いもよらない密结合が発生し、保守性が着しく下がってしまうことがあります。
- #20: 実装例のツールバーで言えば、削除ボタンの有効无効を切り替えるコンフィグがあります。本を选択していないときは削除ボタンをクリックできなくしたかったからです。その削除ボタンを有効にしたり无効にしたりするメソッドがありますし、追加と削除のボタンがクリックされたときに発火するイベントも定义されています。このコンポーネントについて言えば、この公开インターフェイス以外を触らないでくださいということになります。このあたりを开発チームでルール化しておくと开発が安定するかと思います。
- #21: グリッドの公开インターフェイスもシンプルです。新しい本を作成するメソッドと选択された本を削除するメソッドだけが公开メソッドです。本が选択されたり解除されたりしたときはツールバーの削除ボタンの有効无効と连携したいので、本の选択状态に対応するイベントも定义しています。
- #22: 本を选択して削除する処理の流れをシーケンス図に起こしたものです。ツールバーとグリッドが子でメインが亲です。必ず亲との连携はイベントで、子との连携はメソッドになっています。コンポーネントはこのような形で疎结合にしておくのがオススメです。
- #23: 独自コンポーネントを疎結合にしておくとそのコンポーネントを自動テストしやすくなります。独自コンポーネントをテストするときは公開インターフェイスを自動テストするようにします。REST API の通信は SimManager と Simlets という Ext JS の機能でモックにすることができます。先程お見せしたようにテストカバレッジも出るので、それを参考にテストを充実されていきましょう。テストをしないというのは問題ですが、テストカバレッジ100%を常に目指してテストをし過ぎるのも問題になったりします。何事もバランスですね。
- #24: 先程のシーケンス図で言うところの各コンポーネントの処理を独立してテストします。
- #25: そのとき各コンポーネントのインターフェイスを入力と出力の観点でテストしていくといいです。
- #26: 今回の実装例の详细は时间の都合で别の记事として书いていますので、手元の环境で试してみたい方はこちらを参考にしてみてください。
- #27: 最後にまとめますと、コンポーネントアプローチで開発できる Sencha Ext JS はエンタープライズ品質のアプリケーションを開発する上でオススメです。最初はビジュアル開発できる Sencha Architect が取っ付きやすくていいと思います。Sencha Test によるコンポーネントテストも一緒に実施することで複雑なアプリケーションでも高い品質を担保できます。ぜひ試してみてください。
- #28: ご清聴ありがとうございました。