アルゴリズムとプログラミングをビジュアルで一挙に理解できる「VisuAlgo」

アルゴリズムを理解するのにビジュアル化することは非常に有効で、プログラムをビジュアル化することで理解が進むのもまた同じ。そこで、アルゴリズム・プログラミングの理解が進むようにと、アルゴリズムを記述したプログラムコードを一挙にビジュアル化することで、アルゴリズム＆プログラミングを同時に学習できる一挙両得なサービス「VisuAlgo」が公開されています。

VisuAlgo - visualising data structures and algorithms through animation
https://visualgo.net/en

上記のVisuAlgoサイトで試しにソートアルゴリズムの基本プログラム「バブルソート」をビジュアル化してみます。「Sorting」の「bubble」をクリック。

検索窓の下に「bubble」と表示されたのを確認したら「Sorting」の画像をクリック。

すると、数字が棒グラフになった画像が現れました。左下の「Create」をクリックすると……

「Random」「Sorted」「Nearly Sorted」のボタンが表示されます。先ほどの棒グラフはRandom(ランダム)に並べられたもので、「Sorted」「Nearly Sorted」をクリックすることで棒グラフを昇べき・降べきなど条件を指定して並び替えられます。

今回はランダムに並んだ数(棒グラフ)を並び替えるので、Randomを選んだまま、「Sort」→「GO」の順でクリック。

すると、画面右下にプログラムコードが表示され、棒グラフがバブルソート・アルゴリズムにしたがって並び替えられていきます。プログラムのfor文やif文など実行されている部分が黒く表示されるので、プログラムコードがアルゴリズムにおいてどんな機能を果たしているのかが一目瞭然というわけです。

VisuAlgoでバブルソート・プログラムをビジュアル化するとこんな感じ - YouTube


VisuAlgoには「Sorting」以外にも「Bitmask」「Linked List,Stack,Queue,Deque」「Binary Serch Tree,AVL Tree」「Binary Heap」「Graph Data Structures」……

「Union-Find Disjoint Sets」「Segment Tree」「Binary Indexed Tree」「Generic Recursion Tree/DAG」「Graph Traversal」「Minimum Spanning Tree」……

「Single-Source Shortest Paths」「Network Flow」「Graph Matching」「Suffix Tree」「Suffix Array」「(Computational)Geometry」の各種アルゴリズム・データ構造のプログラムをビジュアル化することができます。

VisuAlgoは2011年にシンガポール国立大学のスティーブン・ハリム教授が、学生にデータ構造やアルゴリズムを理解するのに役立ててもらおうと開発したツールをインターネットで公開したネットサービスで、アルゴリズム・データ構造・プログラミングを学ぶ人にもってこいの教材となっています。