JavaScriptでソートアルゴリズムを可視化してみました

私は今までJavaScriptのプログラムを書いたことがありませんでした。ずっと興味はあったのですが、なかなか最初の一歩が踏み出せず棚上げしていました。

そんなある日、ブックオフで以下の本を見つけました。

表紙に「小中学生でもわかる」と書かれている通り、Webで使われる技術についてかみ砕いて書かれており、とてもわかりやすいです。

JavaScriptはCやJavaに似たような書き方なので取っつきやすく感じ、さっそく書いてみたくなりました。

この記事では私が初めて作ったJavaScriptのプログラムについてご紹介します。

初めて作ったJavaScriptプログラムはデータのソートを行うものです。

ソートとは、不規則に並んでいるデータを順番に並べ替える処理のことで、コンピューターアルゴリズムの授業には必ず出てきます。

例えば、「３，１，５，２，４」と並んでいるデータがあったら、「１，２，３，４，５」(昇順) や、「５，４，３，２，１」(降順)に並び替えます。

主なソートアルゴリズム（選択ソート、バブルソート、ヒープソート、クイックソート）の違いが視覚的に分かれば面白いかなと思い作成してみました。

各ソートの概要はWikipedia等をご覧ください。 Wikipediaのページは以下になります。

それぞれ超有名なアルゴリズムなのでネットに数多くの解説があります。

下にあるボタンを押すとボタンに書かれたアルゴリズムでソートを実行します。

~~なお、ソート実行中に他のアルゴリズムを実行することはできません。誤動作します。。中途半端ですみません。~~(2019/09/29修正しました)

色々至らない点だらけのプログラムですが、初めてということでご容赦を。m(__)m

ボタン押下でJavaScriptの関数を呼び出すために、button要素でonclickに関数を指定しています。

しかし、なぜか編集画面から消えるという事象が発生しました。

どうしようかと思いましたが、Webを検索したら解決策を公開してくださっている方がいました。ありがたいことです。

以下にご紹介します。Markdown記法で書けばよいということでしたので、本記事はMarkdown記法で書きました。ちなみに初めてMarkdown記法を使いました。(^_^;)

コンピューター好きのブログ