[論文レビュー] JSClassFinder: A Tool to Detect Class-like Structures in JavaScript

Leonardo Humberto Silva, Daniel Hovadick+4 more|arXiv (Cornell University)|Feb 18, 2016

Software Engineering Research参考文献 8被引用数 6

ひとこと要約

JSClassFinder は、抽象構文木（AST）の静的解析を用いて JavaScript コード内のクラスに類似した構造を検出するリエンジニアリングツールであり、UML 図、分布マップ、標準メトリクスを用いたオブジェクト指向モデルの作成を可能にする。ES6 への移行を支援するため、ネイティブのクラス構文を備えないレガシ JavaScript システムの可視化とメトリクス計算をサポートする。

ABSTRACT

With the increasing usage of JavaScript in web applications, there is a great demand to write JavaScript code that is reliable and maintainable. To achieve these goals, classes can be emulated in the current JavaScript standard version. In this paper, we propose a reengineering tool to identify such class-like structures and to create an object-oriented model based on JavaScript source code. The tool has a parser that loads the AST (Abstract Syntax Tree) of a JavaScript application to model its structure. It is also integrated with the Moose platform to provide powerful visualization, e.g., UML diagram and Distribution Maps, and well-known metric values for software analysis. We also provide some examples with real JavaScript applications to evaluate the tool.

研究の動機と目的

• ES5 においてネイティブのクラス構文を備えないが広く使われている JavaScript において、クラスに類似した構造を同定するツールの不足に応えること。
• クラス、メソッド、属性などのオブジェクト指向的エンティティをモデル化することで、JavaScript システムのソフトウェア解析を支援すること。
• Moose プラットフォームとの統合を通じて、オブジェクト指向モデルの構造的組織に関する視覚的およびメトリクスベースのイン사이트を提供すること。
• プロトタイプベースの継承パターンを形式的なクラスモデルに逆引きして、保守性の向上を図ること。
• 将来的な ECMAScript 6 への移行を支援するため、新しいクラス構文と整合するパターンを同定すること。

提案手法

• Esprima を用いて JavaScript ソースコードを AST にパースし、分析可能な JSON 形式の AST に変換すること。
• コンストラクタ関数がプロパティとメソッドを定義していることを特定し、プロトタイプベースの継承関係を推論することで、クラスに類似した構造を検出すること。
• 名前付けや構造的パターンに基づいて、属性とメソッドをクラスに類似したエンティティにグループ化することで、AST からオブジェクト指向モデルを構築すること。
• 得られたモデルを Moose プラットフォームと統合し、UML クラス図、分布マップ、ツリー表示の可視化を可能にすること。
• クラス数（NOC）、メソッド数（NOM）、属性数（NOA）、継承木の深さ（DIT）などの標準ソフトウェアメトリクスを計算すること。
• カスタマイズ可能な視覚的およびメトリクスフィルタを備えた Pharo ベースのインターフェースを通じて、ユーザーの操作をサポートすること。

実験結果

リサーチクエスチョン

• RQ1 ES5 においてネイティブのクラス構文を備えない JavaScript コードにおいて、クラスに類似した構造を自動で検出する方法は何か？
• RQ2 プロトタイプベースの継承パターンを、どれほど正確に形式的なクラスモデルに逆引きできるか？
• RQ3 実世界の JavaScript アプリケーションにおいて、このツールはオブジェクト指向構造を同定し可視化する上でどれほど効果的か？
• RQ4 どのようなメトリクスと可視化手法が、JavaScript システムの構造的組織の理解を向上させるか？
• RQ5 このツールは、レガシ JavaScript コードを ECMAScript 6 のネイティブクラス構文へ移行するのをどのように支援できるか？

主な発見

• JSClassFinder は、AST の解析とコンストラクタ関数およびプロトタイプチェーンからのクラス定義の推論により、JavaScript におけるクラスに類似した構造を効果的に同定している。
• ツールは、PDF.js や jQuery などの実世界の JavaScript アプリケーションの構造的組織を反映した正確な UML クラス図と分布マップを生成している。
• NOC、NOM、NOA、DIT などの標準ソフトウェアメトリクスを計算しており、コードの複雑さと設計に関する定量的インサイトを提供している。
• Moose プラットフォームとの統合により、高度な可視化と解析が可能になり、オブジェクト指向モデルのナビゲーションと探索を支援している。
• ClaszJS やシングルトンオブジェクトのようなサードパーティーライブラリによって作成されたクラスの検出に限界があることが判明し、今後の改善の余地が示唆された。
• このツールは公開されており、今後の ECMAScript 6 クラス構文への拡張が可能で、レガシコードの近代化を支援している。