アルゴリズムをビジュアル表示できコードでも確認できるサイト「Algorithm Visualizer」

アルゴリズムをプログラムで表示した場合、アルゴリズムの概念自体が複雑な上に抽象的なコードのせいもあって、実行されるアルゴリズムのプログラムをイメージするのは難しいものです。そんな抽象的なアルゴリズムのプログラム学習には、コードだけでなく、実際にプログラムを走らせるときのログを表示しつつ、アルゴリズムをビジュアル化してくれる「Algorithm Visualizer」が非常に役に立ちます。

Algorithm Visualizer
https://algorithm-visualizer.org/

Algorithm Visualizerは、バブルソートやバイナリーサーチ(二分探索)などのアルゴリズムを、プログラムとして表示させつつ、実際に実行した場合の動きを可視化したりログ化したりすることで、アルゴリズムの理解を深められるサービスです。

ページ左にアルゴリズム名がずらりと並んでおり、選択したアルゴリズムのプログラムを実行できます。

ページの中央上部では、実行したアルゴリズムの動きをビジュアル化できます。

ページ右の上部には実行するアルゴリズムの初期設定(条件設定)のプログラムが表示されており……

その下には、Javascriptでアルゴリズムを実現する具体的なプログラムが記述されています。

さっそくアルゴリズムを可視化してみます。「Bubble Sort」(バブルソート)を選択して、「Run」をクリック。

すると、ページ中央の上のアニメーションが動き出してアルゴリズムを実行する様子がビジュアル化されます。

また、アニメーション下には、Javascriptプログラム内で記述された通り、アルゴリズムの進展具合がログとして、表示されました

なお、条件設定の数値はキーボード入力で変更可能です。

また、アルゴリズムに関する具体的なプログラムを変更することもできます。

記事作成時点でAlgorithm Visualizerに用意されているアルゴリズムはこんな感じ。

・DFS(深さ優先探索)

・BFS(幅優先探索)

・Dijkstra(ダイクストラ法)

・Bellman-Ford(ベルマン-フォード法)

・Warshall–Floyd(ワーシャル-フロイド法)

・Insertion Sort(挿入ソート)

・Selection Sort(選択ソート)

・Bubble Sort(バブルソート)

・Quicksort(クイックソート)

・Mergesort(マージソート)

・Heap Sort(ヒープソート)

AlgorithmVisualizerを作成したのはparkjs814氏で、プログラムはGitHubで公開中。

GitHub - parkjs814/AlgorithmVisualizer: Algorithm Visualizer
https://github.com/parkjs814/AlgorithmVisualizer

parkjs814氏は、このほかのアルゴリズムのプログラムを作成した人に対して、上記GitHubページに公開中のWikiに従ってデータを追加するよう呼びかけています。