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

コードブロックとデータの流れ

概要

2008/12/05 - 2008/12/15

関数の中のコードを見ていて、変数に入っているデータの流れを追っていました。すると、データには流れに偏りがありました。そこで、この偏りを見えるように表示するために、コードをブロックに分けて、ブロック内で閉じるデータの流れと、ブロック間を渡るデータの流れを色分けして表示する、といったアイディアに至りました。

これによって、そのデータがどこから来て、どこへ行くのか、どれぐらいブロック間を渡るかといった、データの性質が分かります。ブロック間のデータの流れが分かりやすくなり、ブロック間の関係も把握しやすくなります。

背景

データの流れに偏りがある

データの流れを可視化するアイディアを考えているとき、関数の中のコードを見ていて、変数に入っているデータの流れを追っていました。すると、データには、コードの上から下へ広く流れるデータと、あるコードの部分でしか使われないデータがあり、流れに偏りがありました。

コード上では、これらの異なる性質のデータを持つ変数が同じように見えます。しかし、その性質が見えるように表示すれば分かりやすくなるのでは、といった考えに至りました。そこで、コードをブロックに分けて、ブロック内で閉じるデータの流れと、ブロック間を渡るデータの流れを色分けして表示する、といったアイディアに至りました。

データの流れを可視化するアイディアを考え中(該当ページをリンク)→関数の中のコードを見ていて→変数に入っているデータの流れを追っていると、流れに偏りがある=コードの上から下へ広く流れるデータとあるコードの部分でしか使われないデータがあり、コード上ではこれらが同じように見えるが、その性質が見えるように表示すれば分かりやすくなるのでは。そこで、コードをブロックに分けて、ブロック内とブロック間のデータの流れを色分けして表示するアイディア。

どんなもの?

ブロック内とブロック間のデータの流れを色分け

データには、コードの上から下へ広く流れるデータと、あるコードの部分でしか使われないデータがあります。これらの異なる性質が見えるように、コードをブロックに分けて、ブロック内で閉じるデータの流れと、ブロック間を渡るデータの流れを色分けして表示する、といったアイディアです。このように表示することで、コードを把握しやすくします。

コードをブロックに分けて、データの流れを色分けして表示する [全体]

コードをブロックに分ける

関数の中のコードを見ると、コードは意味の上でいくつかに分れていることが多く、その分かれ目に空白の改行がよく置かれます。例えば、次のコードでは、はじめに引数をチェックする部分、改行、次に何かをソートする前準備の部分、改行、ソートの部分、改行、結果を作成する部分、といった感じです。

意味の上でいくつかに分れているコード

これらひとつひとつの部分をコードブロックと呼んで、改行で分けられた部分は、何らかの意味の分かれ目で、コードブロックに分けられると考えます。上の例では、4つのブロックに分かれています。

色分けして表示

上の例を使って、データの流れを色分けして表示すると、次の図のようなイメージです。コードブロックに分けて、その中で使われている変数を抜き出し、ブロック間を渡る変数を矢印で結びます。矢印の色を、赤から、紫、青へのグラデーションの中から選び、より長い距離を渡る変数は赤く、短い距離は青く表示します。より多くのブロックを渡る変数は赤く、少ない変数は青く表示します。

データの流れを色分けして表示 [全体]

これによって、そのデータがどこから来て、どこへ行くのか、どれぐらいブロック間を渡るかといった、データの性質が分かります。ブロック間のデータの流れが分かりやすくなり、ブロック間の関係も把握しやすくなります。

■コードをブロックに分ける方法=関数の中のコードを見ると、コードは意味の上でいくつかに分れていることが多く、分かれ目に空白の改行がある。
■色分け表示の実際例=上の例を実際に矢印&色分け表示

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