トップエスイー： サイエンスによる知的ものづくり教育プログラム
文部科学省科学技術振興調整費 産学融合先端ソフトウェア技術者養成拠点の形成 トップエスイー
～サイエンスによる知的ものづくり教育プログラム～
トップエスイー ソフトウェア開発実践演習
トップエスイー サイエンスによる知的ものづくり教育プログラム
SPA ※ Webアプリの保守開発時に利用する 画面遷移理解支援ツールの開発と評価
（株）日立製作所 是木玄太 [email protected]
ツールを用いた画面遷移理解支援プロセス
評価
保守開発における問題点
手法・ツールの適用による解決
近年，WebアプリはSPA型が主流となっている．SPA Webアプリの保守開発時には，設計書陳腐化等の原 因で，ソースを直接読んで理解した上で作業する必 要性がしばしば生じる．しかし，画面とソースの関係 が複雑なため，保守開発の画面遷移削除・修正時に 下記の問題がある．
① 修正すべきソースファイルの特定が困難
② 修正時に影響が波及する画面の特定が困難
問題点①②の解決を支援するプロセスを確立した上 で，支援ツールを開発した．支援ツールは，開発者を 利用対象とし，「ソースコードを入力とした可視化図 の自動生成」と「ユーザインタラクティブな可視化図 強調表示」を特徴とする．
# 理解項目
（対応するプロセス番号） ツール 未使用 [m]
ツール使用 [m]
効果
1 画面の画面定義構造理解(a) 53 1 98%減 2 仕様と設計の画面関係理解(b) 32 32 ー 3 特定画面遷移ハンドラのソース特
定(d) 25 1 96%減
4 特定画面遷移ハンドラ修正による
影響波及画面の特定(e) 27 1 96%減
計 137 35 74%減
✤
自作の小規模SPA Webアプリに対して，報告者がツー ル未使用・使用の２パターンで作業実施・計測結果と課題
✤
結果•
ツール使用で未使用時と比べて74%の作業時間削減見込 みを得て，ツールの有効性を確認した．•
小規模SPA Webアプリでも，自動生成した設計の画面 遷移図が煩雑なものとなったため，規模に応じて見せ方 を変える必要あり✤
今後の課題•
大規模なSPA Webアプリへのツール適用•
ツールの機能拡充，ユーザビリティ向上•
様々なSPAフレームワークへの対応✤
SPA Webアプリの特徴•
クライアントで画面遷移•
従来のWebアプリと比べて，画面構成や画面遷移が複雑•
画面の一部だけが画面遷移portal.html, portal.js header.html, header.js, footer.html, footer.js sidemenu.html, sidemenu.js
target.html target.js portal
portal.top
portal.top.side portal.top.side.target
d. 対象画面遷移 を実現するソース を強調表示
e. 影響波及画 面の強調表示
toHotel()
新幹線予約画面
ホテル予約画面
c. 削除・修正対象の 画面遷移をユーザ指定
b. 仕様の 画面と手動で
紐付け a. ソースから設計の
画面遷移図自動生成(画面 毎に画面定義の組作成)
画面遷移理解支援プロセス
1 Template 画面定義
(HTML)
Controller (JS) 1
1 Model
(JS)
＊
＊
画面 画面
遷移 0..1
＊
＊
＊1
画面遷移
＊ ハンドラ Viewport
＊
＊
1
1
root 1
1 遷移先
＊ ＊
＊ View
1 1..＊
abstract 差し込む
0..1
name 1 name
子画面
＊
1
＊1 ＊
SPA Webアプリの画面遷移概念図
遷移元
※SPA: Single Page Application
