Embed Size (px)
Citation preview
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
クラウド税務・会計・給与システム開発にスピードを！A-SaaS が Sencha Ext JS / Sencha Test を導入した軌跡 第36回 エンバカデロ・デベロッパーキャンプ
アカウンティング・サース・ジャパン株式会社 土田 拓也・斎藤 はるか・北村 圭
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 2
アジェンダ
はじめに Sencha Ext JS を選定した経緯 Sencha Ext JS で開発したプロダクト紹介 Sencha Test による UI テスト自動化の軌跡 デモ：Sencha Test で UI テストを実装してみよう おわりに
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
はじめに アカウンティング・サース・ジャパン A-SaaS（エーサース） テスト自動化チーム
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 4
https://www.a-saas.com
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 5
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 6
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 7
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 8
テスト自動化チーム プロダクト開発グループ グループリーダー 土田 拓也 開発生産性をあげたくて Sencha を導入した責任者
プロダクトＱＡグループ ＱＡエンジニア 北村 圭 リソースを理由に品質を妥協したくない頑固なＱＡ
プロダクト開発グループ フロントエンドエンジニア 長谷部 テスト自動化を推進する陰の実力者
プロダクト開発グループ テストオートメーションエンジニア 斎藤 はるか ＱＡの負担を減らし品質向上を目指すテスト自動化エンジニア
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Sencha Ext JS を選定した経緯
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 10
税務プロフェッショナル向けアプリケーション クラウド税務・会計・給与システム A-SaaS に求められる要件
動作の安定性 データの整合性 計算結果の正確性 デスクトップアプリケーション並みの高速な操作性 最低でも7年以上帳票が出力できることを維持できる保守性
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 11
既存開発技術：Adobe Flex + Adobe AIR
＋
Rich Internet Application (RIA)
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 12
2020年末 Adobe Flash Plugin 配布終了
https://theblog.adobe.com/adobe-flash-update/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 13
Adobe Flex + Adobe AIR ➞ ???
こりゃ本気で移行しなきゃなんないね
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 14
新規開発技術：HTML5 + CSS3 + JavaScript
＋ ＋
Single Page Application (SPA)
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 15
普通の Web アプリケーション
ページ
ブラウザー
ページ
ページ
サーバー 指定 URL を表示
リンクのクリック
フォームの送信
HTML
HTML
HTML
画面 遷移
画面 遷移
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 16
Single Page Application (SPA)
ページ
ブラウザー サーバー 指定 URL を表示
データの取得 (AJAX)
フォームの送信 (AJAX)
HTML
JSON
JSON
http://www.atmarkit.co.jp/ait/series/5303/
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 17
SPA を実現するために必要なこと
マルチブラウザーに対応する サーバーと AJAX で通信する 画面の状態をすべて JavaScript で管理する UI コンポーネントが必要になる
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 18
JavaScript フレームワーク：Angular, React, Vue
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 19
比較表：公式コンポーネントの有無
業務アプリケーション向け 公式コンポーネント
モバイルアプリケーション向け 公式コンポーネント
* 2018年現在は公式コンポーネントがあるが2016年時点はなかった
*
*
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 20
JavaScript フレームワーク：Sencha Ext JS
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 21
比較表：公式コンポーネントの有無
業務アプリケーション向け 公式コンポーネント
モバイルアプリケーション向け 公式コンポーネント
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 22
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 23
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 24
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 25
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 26
ビジュアルアプリケーションビルダー：Sencha Architect
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 27
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 28
包括的なテストソリューション：Sencha Test
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 29
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Sencha Ext JS で開発したプロダクト紹介 A-SaaS コネクト A-SaaS 会計システム A-SaaS 請求書
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 31
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 32
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 33
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
Sencha Test による UI テスト自動化の軌跡
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 35
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目）
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 36
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目）
A-SaaS コネクト
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 37
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目）
A-SaaS コネクト
A-SaaS 会計システム（刷新）
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 38
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 39
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 40
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 41
Photo by Ben White on Unsplash
テスト自動化を1年間 何もやっていない！
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 42
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 43
2017年夏 Sencha Test の公式トレーニング受講
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 44
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 45
2017年秋 Sencha Test でのテスト実装を検証開始
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 46
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 47
2017年冬 準備事項が多すぎて挫折
独自コンポーネントをテストするライブラリを開発する API をモック化してサーバーの状態変化を回避する Jenkins でテストを日次で実行する 自動テストにすると生産的なテストケースを決定する 自動テストに相応わしいテストケースを量産する
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 48
Sencha Ext JS / Sencha Test 導入のタイムライン
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
採用
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 49
2018年春 テストエンジニア採用を開始
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 50
Sencha Ext JS / Sencha Test 導入のタイムライン
契約更新（3年目）
契約更新（3年目）
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
採用
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 51
Sencha Ext JS / Sencha Test 導入のタイムライン
契約更新（3年目）
契約更新（3年目）
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS 請求書 A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
採用
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 52
Sencha Ext JS / Sencha Test 導入のタイムライン
契約更新（3年目）
契約更新（3年目）
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS 請求書 A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
採用 テストエンジニア参加 自動化チーム発足
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 53
2018年夏 テスト自動化チーム発足
ＱＡエンジニア 北村 圭
・自動テストすべきケースを選定する ・自動テストを記述する
フロントエンドエンジニア 長谷部
・テストに必要な Ext JS の情報を提供する ・アプリで対応する事項を開発に展開する
テストオートメーションエンジニア 斎藤 はるか
・自動テストのためのインフラを整備する ・自動テストやライブラリを実装する
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 54
Sencha Ext JS / Sencha Test 導入のタイムライン
契約更新（3年目）
契約更新（3年目）
2016 春 夏 秋 冬
Test
Ext JS
2017 春 夏 秋 冬
2018 春 夏 秋 冬
契約開始（1年目）
契約開始（1年目） 契約更新（2年目）
契約更新（2年目）
A-SaaS 請求書 A-SaaS コネクト A-SaaS フリコミ
A-SaaS 会計システム（刷新）
空白の期間
Sencha Test 公式研修受講
検証開始
採用 チーム発足
テスト自動化スタート
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 55
2018年秋 新会計システムの UI テスト実装開始
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
デモ：Sencha Test で UI テストを実装してみよう
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 57
デモの流れ
1. 出納帳画面の説明 2. インスペクター機能の紹介 3. テストスクリプトのライブコーディング 4. テストスクリプトの実行 5. 実際に使用しているテストスイートの実行
“
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
DEMO
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
おわりに これからやりたいこと 本日のまとめ
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 60
これからやりたいこと
ＱＡエンジニアが自動テストを記述できるようにする CI/CD ツール Jenkins での日次テスト実行を実現する テスト管理ツール TestRail にテスト結果を連携する BrowserStack でのマルチブラウザーテストを実現する
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。 61
まとめ
SPA の業務アプリケーション開発なら Sencha Ext JS にしよう ビジュアル開発できる Sencha Architect で始めよう Sencha Test による自動 UI テストで品質も担保しよう
＋ ＋
本文書の一部または全部の転載を禁止します。本文書の著作権は、著作者に帰属します。
THANKS! www.embarcadero.com/jp
第36回 エンバカデロ・デベロッパーキャンプ
