画面遷移理解支援ツール
画面遷移理解支援プロセスを支援するために開発中の、画面遷移理解支援ツールを紹介します。ツールの主な特徴は2つあり、1つ目は「ソースコードを入力として、可視化図を自動生成」すること、2つ目は「ユーザーインタラクティブに可視化図を強調表示」することです。
ツールの構成を図8に示します。ツールはElectronアプリとして開発中です。Electronとは、JavaScript、HTML、CSSといった一般的なWeb技術を用いて、クロスプラットフォームなデスクトップアプリを作成できるOSSのフレームワークのことです。
ツールにソースコードを入力すると、EsprimaというOSSのJavaScriptパーサを利用してソースコードを解析し、PlantUMLやGraphVizといったOSSの可視化ツールを利用して可視化図を作成します。この際、ユーザーの指示に応じて可視化図を作り変えます。可視化図として画面遷移図を想定しており、これをUMLのステートマシン図で作成します。なお、入力するソースコードが利用しているSPAフレームワークはAngularとします。
画面遷移理解支援プロセスの評価と今後
画面遷移理解支援ツールは正常系に関して一通り開発が完了しており、提案した画面遷移理解支援プロセスの有効性を確認するために、予備評価を行いました。ユースケースとして、自作の小規模なSPA（Angular利用、21ファイル、358Steps）の「国内線航空機予約画面」から「国内線航空機新規予約画面」への画面遷移を削除・修正する際に、修正すべきソースファイルを特定し、また画面遷移を削除・修正した場合に影響が波及する画面を特定したい、というケースを考えてみました。結果を表1に示します。
ツール未使用時と使用時それぞれで作業時間を計測したところ、ご覧の通りユースケース実現までの時間を74％削減でき、有効性を確認できました。なお、ここでツール使用時は1回目を想定しているので、#2の仕様と設計の画面関係理解（b）では、未使用時と同じ32分の時間がかかっています。しかし2回目以降は、1回目ですでにツール内での仕様と設計の画面のひも付けが完了しているので、時間は0分となり、効果はさらに高くなります。
評価を行い、画面遷移理解支援ツールで自動生成した設計の画面遷移図には、少々煩雑でユーザーが見づらいと思える部分があることが分かりました。このような見づらさは、例えばソース規模に応じて不要な部分は簡略化するといったアプローチで改善を図り、ツールの訴求力を向上させた上で、将来的にはツールをオープンにしたいと考えています。
トップエスイーについて
「トップエスイー」は、国立情報学研究所で実施している、社会人エンジニア向けのソフトウェア工学に関する教育プログラムです。トップエスイーでは講義や制作課題を通して、最先端の研究成果や現場で得られた知見が蓄積されてきました。その「アウトカム」、つまり成果やそこに至る過程を紹介し、現場のエンジニアの方々に活用いただける記事を連載しています。2017年度より、講義を中心に受講し後半にまとめとして「ソフトウェア開発実践演習」を行う「トップエスイーコース」と、指導教員と1対1で受講生が抱える現場の問題を解決する「アドバンストップエスイーコース」の2コースとなりました。今回の成果は「ソフトウェア開発実践演習」におけるものです。この演習科目では講師が提示した課題に取り組むだけでなく、受講生が課題を設定して進めることも可能で、画面遷移理解支援ツールについての取り組みは筆者が自ら考えて実践した課題でした。
