メインコンテンツへスキップ

無料アルゴリズムビジュアライザー

並べ替え、経路探索、古典的なアルゴリズムの動きを見よう — バブル/クイック/マージソート、インタラクティブな迷路グリッド上の Dijkstra/A*/BFS、さらにバイナリサーチ、篩、N-Queens、ライフゲーム。ステップバイステップのアニメーション、同期した疑似コード、ライブメトリクス、並べて競わせるレースモード。モバイル対応で、ブラウザ内で 100% 動作。

完全にブラウザ内で実行 - あなたのデバイスからデータが外に出ることはありません。

使い方

すべてのアルゴリズムは、一度に1つの可視化「ステップ」— 配列のスナップショットと、どの要素が比較、交換、または書き込まれたか — を生成するジェネレーターとして書かれています。単一のプレーヤーがステップリスト全体を事前計算するため、再生、一時停止、1ステップ進む、1ステップ戻る、そして横並びのレースモードは、すべてそのリストへのインデックス参照にすぎません。どこにも何も送信されません — すべてブラウザ内で動作します。

  1. 1
    アルゴリズムとデータセットを選ぶ
    バブル、選択、挿入、マージ、クイック、ヒープ、シェル、カクテル、カウンティング、基数ソート(お楽しみ用にボゴソートも)から選べます。ランダム、ほぼソート済み、逆順、または少数のユニークな値を持つ配列を生成するか、カンマ区切りで独自の数値を入力できます。
  2. 2
    動作を見て、一緒に読む
    バーは何が起きているか(比較、交換、ピボット、ソート済み)で色分けされます。疑似コードパネルは実行中の正確な行をハイライトし、ライブカウンターが比較、交換、書き込み、配列アクセスをリアルタイムで追跡します。
  3. 3
    時間を制御する
    速度を調整したり、タイムラインをスクラブしたり、単一の操作を前後にステップさせて、アルゴリズムがどのように決定を下すかを正確に研究できます。各ステップは再実行ではなく保存されたスナップショットであるため、ステップバックは正確です。
  4. 4
    正面から競争させる
    レースモードは同じ入力に対して2つ以上のアルゴリズムを並べて同時に実行し、指標テーブルとともに、例えばなぜクイックソートがバブルソートより優れているかを確認できます。

ブラウザ内で完全に動作します — データが端末の外に出ることはありません。サーバー、アップロード、アカウントは一切ありません。これは教育用ツールです:アルゴリズムは可視化のわかりやすさを重視して選ばれた教科書的な実装です。

ガイド

実例

「並べ替え」タブを開きます。「任意の数値または単語」に 5, 3, 8, 1 と入力して「適用」を押します。「サイズ: 4」と表示され、ランダムな 40 本の棒が、ラベル付きの 4 本に置き換わります。「バブルソート」が選択され、「タイムライン」は 1/14 です。「再生」を押します。実行が終わると、タイムラインは 14/14 になり、棒は 1、3、5、8 の順に「並べ替え済み」の色で並び、カウンターは比較回数 6、交換回数 4、書き込み回数 8、アクセス回数 12 になります。続けて、同じデータで「選択ソート」をクリックします。18 ステップかかり、比較回数は同じ 6 ですが、交換回数は 2 だけです。選択ソートは 1 パスにつき最大 1 回しか交換しないからです。banana, apple, cherry と入力して「適用」を押すと、単語の並べ替えになります。「この実行を共有」は、このアルゴリズム、このデータ、いま見ているステップを再び開くリンクをコピーします。「画像を保存(PNG)」は現在のフレームを、たとえば bubble-sort-step-14.png のような名前で保存します。

使用する設定と制限事項

  • アルゴリズムを選び、次に初期配置を選びます。 「並べ替え」タブには、バブルソート、選択ソート、挿入ソート、マージソート、クイックソート、ヒープソート、シェルソート、カクテルシェーカーソート、カウントソート、基数ソート (LSD) があります。「ボゴソートを追加(楽しみ用)」で 11 個目が加わります。配置のボタンは「ランダム」「ほぼ並べ替え済み」「逆順」「一意な値が少ない」です。「サイズ」スライダーは 2 から 120 までで、初期値はパソコンでは 40、スマートフォンでは 15 です。「シャッフル」で新しいデータを作ります。アルゴリズムを切り替えてもデータは同じままなので、公平に実行結果を比較できます。
  • 再生コントロールを覚えます。 「再生」/「一時停止」「戻る」「進む」「再開」を使うか、「タイムライン」を任意のステップまでドラッグします。「速度」は 1 秒あたりのステップ数で、1 から 240 まで、初期値はパソコンでは 30、スマートフォンでは 20 です。実行全体を先に計算しているため、後ろへのステップも正確です。ショートカットは、スペース、左右の矢印、R、速度用の [ と ] です。ボタン、スライダー、テキストボックスにフォーカスがあるときは無視されます。最初の実行は一度だけ自動で始まり、別のタブに切り替えると再生は一時停止します。
  • 自分の数値や単語を入力します。 「任意の数値または単語」には、カンマまたはスペースで区切った 2 つ以上の項目が必要です。数値は整数に丸められます。数値でない項目が 1 つでもあると、すべての項目が単語として扱われ、アルファベット順に並べ替えられます。使われるのは先頭の 120 項目だけで、ラベルは項目が 30 個以下のときだけ棒に表示されます。カウントソートは最小値から最大値までの値ごとに 1 つずつ枠を作るため、1, 50000000 のようなリストでは 5,000 万個の枠が必要になります。このアルゴリズムでは、数値を狭い範囲に収めてください。
  • アニメーションだけでなく、カウンターも読みます。 パネルには、比較回数、交換回数、書き込み回数、アクセス回数、ステップ、計算時間が、いま見ているステップまでの累計で表示されます。カウントソートと基数ソートは比較を行わないので、その欄は非表示になります。「計算時間」は、このブラウザーがステップを計算するのにかかった時間であり、アルゴリズムの速度テストではありません。「データ量に応じた処理量の増え方」の「増え方を計測」は、ボゴソートを除くすべての並べ替えアルゴリズムを、10、25、50、100、250、500 件のランダムな配列で実行します。「結果をCSVでダウンロード」は sorting-growth.csv を保存します。
  • アルゴリズムを競わせて、見つけたことを共有します。 「レースモード」では、2〜4 個のアルゴリズムを選び、同じデータを同じステップ速度で実行できます。合計ステップ数が最も少ないものが最初に終わり、トロフィーのマークが付きます。「単一ビューに戻る」で元の表示に戻れます。ステップは秒ではないので、これは各方式の仕事量を示すもので、お使いのパソコンでの速さを示すものではありません。ボゴソートはレースに参加できません。レースモード以外では、「この実行を共有」が、同じステップで一時停止した状態で開くリンクをコピーします。
  • タブを切り替えて、経路探索や古典的アルゴリズムを試します。 「経路探索」には、幅優先探索、ダイクストラ法、A* 探索、貪欲な最適優先、双方向幅優先探索、深さ優先探索があり、16 行 × 30 列のグリッド(スマートフォンでは 18 × 13)で動きます。ドラッグして壁を描き、緑のスタートまたは赤のゴールをドラッグして動かします。「重み」モードでは、1 マスのコストが 5 になります。重みを使うのはダイクストラ法と A* だけです。「古典」には、バイナリサーチ、リニアサーチ、エラトステネスの篩(n は 20〜120)、N-Queens(N は 4〜10)、ライフゲーム、Fisher–Yates シャッフル(サイズ 8〜60)があります。

よくある問題とその解決方法

「数値または単語を、カンマ区切りで2つ以上入力してください。」と表示される。
入力ボックスの項目が 2 つ未満でした。数値が 1 つだけ、ボックスが空、またはカンマとスペースだけの場合も、このメッセージが出て、ボックスが赤く縁取られます。2 つ目の項目を追加して、「適用」を押すか Enter を押してください。メッセージにはカンマとありますが、スペースでも区切れます。5 3 x のようなテキストはエラーではなく、3 つの単語として読み取られます。
「ボゴソートは階乗時間のため、要素数は 7 に制限されています。それより大きいと、事実上いつまでも終わらない可能性があります。」と表示される。
「ボゴソートを追加(楽しみ用)」でボゴソートを追加して選択しました。このアルゴリズムは、リストがたまたま整列するまでランダムにシャッフルし続けるため、「サイズ」スライダーは 7 までになり、データがそれより大きい場合は 7 個に切り詰められ、任意のリストも先頭の 7 項目に絞られます。別のアルゴリズムを選ぶと、120 までのサイズに戻ります。
「パスなし - ゴールが壁で囲まれています。」と表示される。
これは「経路探索」タブで、壁がゴールまたはスタートを囲んでいるために、実行がゴールに到達せずに終わったときに表示されます。「ランダムな壁」でも偶然こうなることがあります。ゴールまたはスタートを空いているマスにドラッグするか、「壁をクリア」を押してください。これは重みも消します。「パスをクリア」は、実行を最初のステップに巻き戻すだけで、壁は残ります。
「この実行を共有」ボタンが「コピーに失敗しました」に変わる。
ブラウザーがクリップボードをブロックしました。埋め込みフレーム内や、権限がない場合に起こることがあります。通常、リンクはアドレスバーにも設定されるので、そこからコピーできます。このリンクの対象は「並べ替え」タブだけで、アルゴリズム、最大 120 個の項目、ステップ番号が含まれます。「経路探索」と「古典」の実行は、この方法では共有できません。
アニメーションが始まらない、または勝手に止まる。
最初の実行が自動で始まるのは一度だけで、デバイスが視差効果の軽減(モーションの低減)を求めている場合はまったく始まらないので、「再生」を押してください。タブが非表示になると再生も一時停止し、最後のステップで止まります。そこで「再生」を押すと、最初のステップからやり直します。ボタン、スライダー、テキストボックスにフォーカスがある間はキーボードショートカットが効かないので、まずページの何もない部分をクリックしてください。

比較

アルゴリズムがなぜそのように動くのかを知りたいときに使ってください。前後にステップを進められ、疑似コードの行を追いながら、同一のデータでの回数を比べられます。ベンチマークではありません。回数は、各アルゴリズムをこのツールがステップごとに再現した実装から得たもので、お使いのプログラミング言語のソートから得たものではなく、計算時間はブラウザーがステップを準備するのにかかった時間を測っているだけです。並べ替えアルゴリズムは 10 個(ボゴソートを含めて 11 個)、経路探索は 6 個、古典的なものは 6 個ありますが、自分のコードを貼り付けたり、実際の地図を読み込んだり、120 件を超える項目を並べ替えたりすることはできません。すべてブラウザー内で実行され、どこにも送信されません。

関連ツール

よくある質問