プログラミングでバブルソートの可視化【JavaScript】

本記事ではバブルソートの可視化についてのプログラムを紹介しています。

JavaScriptを使っています。

バブルソートとはソートアルゴリズムの一つで、隣り合う要素の大小を比較しながら整列させるものです。

YouTuberに動画もアップしてあるのでそちらもご覧ください↓

【早送り】プログラミングでバブルソートの可視化 / JavaScript

バブルソートの可視化についてのプログラム

まずこちらが完成品。

Start ボタンを押すとソートが始まり、並び替えが終わったら経過時間が表示されます。

今回の例ではエレメント数が８００、つまり８００個の棒を昇順に並び変えています。

本記事のコードはYouTubeのThe Coding Train というチャンネルの “Coding Challenge #114: Bubble Sort Visualization” という動画で紹介されているものに、シャッフル・スタートボタンと時間経過をはかるものを追加しただけのものです。

Coding Challenge #114: Bubble Sort Visualization

以下のような html ファイルを作成します。

CSS ファイルはこんな感じ。

JavaScript ファイルは下記のように書いています。

Shuffle ボタンが押されたら、shuffle() 関数を呼び出し、 lapseTime_sec や timeVlaue の値をリセットし、ランダムな長さの棒をエレメントの数分表示しています。

ctx.clearRect() で画面のリセットをしています。

ctx.moveTo() で線の起点を決め、 ctx.lineTo() で線の終わりの点を決めています。

Start ボタンが押されたらソートが始まります。

ソートを行っている間は、Shuffle, Start のボタンは disable を ture にすることでクリックが出来ないようにしています。

そして、performance.now() で始まりの時間を記録しています。

ソートが終わったら、performance.now() で終わりの時間を記録し、endTime – startTime で経過時間を求めています。

そして、isSorted を ture にしています。

以上、バブルソートの可視化についてのプログラムでした。

(選択ソート気味っぽいかも)