ソートアルゴリズムビジュアライザー

ソートアルゴリズムビジュアライザーは、さまざまなソートアルゴリズムが アニメーション棒グラフ上でステップごとに実行される様子を観察できる、 無料のインタラクティブなブラウザベースツールです。比較、スワップ、 分割がリアルタイムで行われるのを見ることで、抽象的なアルゴリズムの 概念が具体的かつ直感的に理解できます。

このツールは8つの重要なソートアルゴリズムをサポートしています： バブルソート、選択ソート、挿入ソート、マージソート、クイックソート、 ヒープソート、基数ソート、シェルソート。各アルゴリズムには最良、平均、 最悪の時間計算量と空間計算量の詳細情報が表示されます。また、各 アルゴリズムが安定（等しい要素の相対順序を保持する）かどうか、 インプレース（O(1)の追加メモリのみ必要）かどうかも確認できます。

比較モードでは、同じ入力データに対して2つのアルゴリズムを並べて実行 でき、クイックソートがバブルソートよりも一般的に優れている理由や、 マージソートが入力順序に関係なく一貫したO(n log n)のパフォーマンスを 維持する様子を簡単に確認できます。ランダム、ほぼソート済み、逆順、 少数のユニーク値の4つのデータプリセットから選択して、異なる入力分布が 各アルゴリズムのパフォーマンスにどう影響するかを観察できます。 アルゴリズムの計算量についてより深く学ぶには、 Big Oリファレンスツールをご覧ください。

ビジュアライザーは比較中のバーを黄色、スワップ中のバーを赤、 ピボット要素を紫、最終的なソート位置に到達した要素を緑で ハイライトします。リアルタイムカウンターが比較とスワップの総数を 追跡し、各アルゴリズムの効率を定量的に把握できます。ヒープソートで 使用されるツリーベースのデータ構造を学習中の方は、 二分木ビジュアライザーで 補完的な可視化をご利用いただけます。

すべての処理はrequestAnimationFrameを使用してブラウザ内で完全に行われ、 スムーズなアニメーションを実現します。データがサーバーに送信されることは ありません。配列、ツリー、ヒープとソートの関係をより広く見るには、 データ構造ビジュアライザーを ご覧ください。

1. ドロップダウンメニューからソートアルゴリズムを選択します（例：バブルソート、クイックソート）。
2. データプリセット（ランダム、ほぼソート済み、逆順、少数のユニーク値）を選択して初期配列を設定します。
3. サイズスライダー（10–100要素）で棒グラフの要素数を調整します。
4. Startをクリックしてアニメーションを開始します。黄色のバーは比較、赤のバーはスワップ、緑のバーは最終位置を示します。
5. Pauseでアニメーションを一時停止し、Resumeで再開するか、Stepで1操作ずつ進めます。
6. Speedスライダーでアニメーション速度をいつでも調整できます。
7. Compareモードを有効にすると、同じデータに対して2つ目のアルゴリズムを並べて実行し、比較回数とスワップ回数の違いを観察できます。