A
AIGENT ACE
見積試算

デモの使い方

100個のランダムデータのバブルソートの比較・交換の過程を棒グラフと音で可視化するデモです。

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

操作手順

  1. 「Start Bubble Sort (Sound On)」ボタンをクリック
  2. 赤くハイライトされる要素の比較・交換の様子を音とともに確認
  3. ソートが進み棒が低い順に並び変わっていく過程を観察

活用シーン

  • バブルソートの動作原理を視覚・聴覚で学習する教材
  • async/awaitとsetTimeoutによるソートアニメーション制御の実装例
  • アルゴリズム可視化コンテンツの参考実装