※本記事ではソフトに関するアイディアを紹介しています。これらは特に記載がない限り、まだ実現されていないものです。これらのアイディアをぜひ実現していただける方をお待ちしております。

実行の流れを可視化する

概要

2008/11/10 - 2008/11/20

他の人のコードをちょっと読んでみたり、自分が書いたコードを数年後に見たりすると、膨大なコードの中で迷子になることがあります。もし、コードがその後、どのような関数を呼んでいくのか、大まかに分かれば、頭にイメージが残り、コードを把握しやすくなると思います。

そこで、コードの中のこの行は、どこから呼ばれてくるのか、その後どのように関数を呼んでいくのかを、リストアップして表示し、コードの理解を支援する、といったアイディアに至りました。その行まわりの実行の流れを可視化します。

背景

膨大なコードの中で迷子になる

他の人のコードをちょっと読んでみたり、自分が書いたコードを数年後に見たりすると、コードのこの行はどこから呼ばれてくるのか、その後どのように関数を呼んでいくのか分からず、膨大なコードの中で迷子になることがあります。もし、コードがその後、どのような関数を呼んでいくのか、大まかに分かれば、頭にイメージが残り、コードを把握しやすくなると思います。

このような、関数の呼び出し順序や構造を調べるには、コード上で手動で関数をたどっていくか、デバッガがあれば実行してブレークポイントで止めて追っていくなど、方法はあります。しかし、手動でたどるのは大きな手間です。また、デバッガで追えるのは、コードが完全に実行できる場合に限ります。ビルドできないコードや、一部しかないコードは、デバッガで追跡できません。

そこで、関数の呼び出し順序だけコードから抽出して、リストアップして表示することで、コードの理解を支援する、といったアイディアに至りました。実行の流れを可視化するものです。

リストアップされた関数の名前を眺めるだけで、いろいろな感覚が得られます。コードを1つ1つしっかり見ていくのではなく、なんとなく概観を、いろいろな角度から眺めることで、コードを理解する労力を減らすものです。

他の人のコードをよく知らないまま見る(自分が書いたコードを数年後に見る)→関数の呼び出し順序or構造がよく分からない→とある1行はどこから呼ばれるのか、その後どのように関数を呼んでいくのかを調べるには→コード上で手動で追っていくorデバッガがあれば1行ずつ実行→手間→関数の呼び出し順序だけコードから抽出して表示する=実行の流れを可視化するツール

どんなもの?

実行の流れをリストアップ

ソースコードを見るときに、コードの中のこの行は、どこから呼ばれてくるのか、その後どのように関数を呼んでいくのかを、コードを自動的に解析することで抽出し、リストアップして表示する、といったアイディアです。その行まわりの実行の流れを可視化できます。

具体的な動作は、開発環境上(IDE)で、実行の流れを見たいコードの行を指定し、流れを表示すると、階層ツリービューのように関数が列挙されます。その行の前までどのような関数が呼ばれてきたかをさかのぼったり、その行の後にどのような関数が呼ばれていくかを追跡できます。

階層ビューのように関数を表示 [全体]

関数はコードが書かれてある順、すなわち、実行される順で表示します。関数の名前をクリックすると、その関数の中へ入って、中で呼ばれている関数をさらに列挙します。

実行パターンが複数あるとき

if文などで実行の流れが分岐して、その行までの実行パターンが複数になるときは、そのパターンをリストアップして選べるようにします。その行の後の実行の流れが分岐するときは、if文なども表示して、それぞれの分岐を追跡できるようにします。

その行までの実行パターンが複数になるとき [全体]

その行の後の実行の流れが分岐するとき

for文などで繰り返し複数回呼ばれるときは、for文も表示して、繰り返しが分かるようにします。デリゲートをInvokeして関数を呼び出す場合は、どのデリゲートが入っているかを調べるのが難しく、デリゲートのInvokeがあることだけを表示します。

クイックビューで表示

表示方法は他にもあります。関数を階層ツリービューのように表示する代わりに、クイックビューで表示します。これは、コードエディタの中で、コードの上をマウスで指すだけで、その行を通過する実行パターンをツールチップの感覚で見られるように表示します。

関数の名前の上をマウスで指すと、その関数の中へ入って、中で呼ばれている関数を、別のツールチップで表示します。関数の中へ入るたびに、別のツールチップで表示します。Visual Studio .NET 2005からの、デバッグ時に変数の値を見るクイックウォッチのようなイメージです。

クイックビュー(ツールチップの感覚)で表示 [全体]

クラス図上で表示

クラス図の上に矢印を引いて、実行の流れを表示します。クラスは四角の領域で表示し、その中にそのクラスが持つ関数をリストアップします。これらの関数から、呼ばれる順に矢印を引いて、実行の流れを可視化します。どこにあるどの関数が呼ばれるかが、視覚的に分かりやすくなります。

クラス図上で表示 [??]

必要な部分だけ表示

実行の流れをリストアップすると、階層ツリービューのように関数が列挙されます。列挙された関数のまわりのコードをそれぞれ見たいとき、必要なコードだけそれぞれ表示して、その間のコードは省略して表示します。

これによって、長いソースコードであっても、実行の流れをリストアップして、列挙された関数を見ながら、そのとき必要な部分のコードだけを見ることが出来ます。画面でスクロールを繰り返し、長いコードを行ったり来たりする必要はありません。

必要なコードだけそれぞれ表示して、その間のコードは省略 [全体]

関数の呼び出し順序だけコードから抽出してリストアップして表示する | 具体的な動作→IDE上→任意のコード行を指定→表示すると、階層ビューのように関数が表示される、[+]を押すとその関数の中へ入り中で呼ばれる関数を表示していく、上位はどうする? | どれぐらい深く追うかは指定次第、if文の分岐などで実行パスが複数になるときは両方表示して[+]で両方追跡可能、上位はどうする?、for文の繰り返しなどで複数回呼ばれるときはそれを表示、デリゲートのポリモーフィズムなどで分からないときはそれを表示 | クイック表示 | クラス図上に流れを矢印で描画。

世の中の似た機能

Visual Studio 2010のIDEに追加されたCall Hierarchyウィンドウがあります。これは関数を選択すると、その関数の中で呼んでいる関数の一覧を表示したり、その関数の呼び出し元を一覧表示するものです。一覧で表示された関数をさらに調べていくことができ、関数の呼び出しの流れを追跡できます。

※ご意見、ご感想、改善点、その他の情報などがありましたら、メールにてお知らせ願います。