ホームページの内容がどのようなものになったか、第2章・3章を使って説明していきます。第2章・3章の部分では、ソート、探索などのアルゴリズムの説明をしています。ここでは序論のところで書いた、図や文章の他に、視覚的にアルゴリズムの動的変化を確認することができるプログラムを載せてアルゴリズムの理解を助けようとしています。
この2つの章では次のような流れで各アルゴリズムを説明しています。
考え方
↓
視覚的に処理過程を確認できるプログラム
↓
Delphiによる簡単なプログラムの作成
実際にバブルソートを説明したページを使い、上記の流れを説明していきます。
・ 考え方
ここでアルゴリズムの基本的な考え方(実現の仕方)を図や文章で説明をしています。
バブルソートの場合、ここで伝えたいこと(理解して欲しいこと)は
・隣り合うデータ間で比較・交換をしていくこと
・昇順の場合、一巡するたびに一番大きいデータが配列の最後に来ること
主にこの2つです
まず、基本的な考え方として処理の手順を箇条書きにしたもの載せています。
この考えに従い、最初に少ないデータ数で基本的な考えに従って比較と交換を最後までやっていきます。少ないデータ数で最後までソートすることにより、隣り合うデータ間で比較・交換していること、基本的な考えに従っていけばソートができることを理解させようとしています。
一回、比較・交換するごとに次のような図を入れて、実際にデータがどのように動くか目で確認させています。
次に、一巡するたびに、一番大きいデータが配列の最後に来ることを説明します。少ないデータ数では一巡するたびに、一番大きいデータが配列の最後にきているかどうかわかりにくいため、データ数を増やしてバブルソートを行います。このときは、一巡ごとの結果だけ表している図を載せ、比較・交換の処理は省略しています。一巡するごとに大きいデータが最後にきていることわかりやすくするため赤い枠線で囲っています。
バブルソートの場合、基本的な考え方、具体的な例でデータの動きの確認、という順番で説明を行っていますが、他のアルゴリズムの説明では、具体的な例でデータの動きの確認、その後基本的な考え方、といった順で説明をしている場合があります。アルゴリズムによって説明の仕方が違ってくるのは当然であり、そのほうが分かりやすいと判断した場合にはそうしています。
・ 処理過程を確認することができるプログラム
考え方の部分では、図と文章によってバブルソートの考え方、特に
・隣り合うデータ間で比較・交換をしていくこと
・昇順の場合、一巡するたびに一番大きいデータが配列の最後に来ること
この二つのことを説明していきました。
次に、この部分で視覚的にバブルソート動作(比較・交換)の過程を確認することができるプログラムを置いています。基本的な考え方を述べ、その過程を図で表しながら説明した後に、実際に動的な処理の過程を見せることによって理解を深めようとする狙いがあります。
ホームページ上でプログラムを実行するには「プログラムを実行する」の部分をクリックします。
すると、ダウンロードの選択画面が現れるので「上記の場所から実行する」を選択します。
次にセキュリティ警告が出るので「はい」選択します。
これでプログラムが実行されます。
次にプログラムの実行結果を見ていきます。まず、プログラムを実行すると次のような画面が出てきます。
データ数を決めた後、「データ作成」ボタンを押します。今回はデータ数を変えずに20のまま「データ作成」ボタンを押しました。
すると、次のようなデータ数の数だけ、高さがランダムに決められた棒グラフ(以下データ)が描かれます。このデータをバブルソートを使って昇順(低い順)にソートしていきます。
データをソートするためのボタンは「バブルソート」と「1回ごとの比較・交換」の2つをがあります。
「バブルソート」ボタンは1回押すとデータをバブルソートを使って最後までソートを行います。バブルソートの動的な処理過程を視覚的に確認することができます。「処理速度」によって比較・交換していく速度を決めることができます。しかし、途中で処理を止めることができないため二つの点
・隣り合うデータ間で比較・交換をしていくこと
・昇順の場合、一巡するたびに一番大きいデータが配列の最後に来ること
を確認させることを考えた場合、十分ではありません。
そこで、「1回ごとの比較・確認」ボタンでは、1回隣り合うデータを比較・交換するたびに処理を止めています。「1回ごとの比較・確認」ボタンを押していくと次のようになります。
「1回ごとの比較・交換」ボタンは自分のタイミングで比較・交換をしていくことができるため、「バブルソート」ボタンに較べて、上記の2つの点に関しての確認が容易になっています。途中で「バブルソート」ボタンを押した場合でも、途中からバブルソートを最後まで行います
「バブルソート」ボタンでも「1回ごとの比較・交換」ボタンでも最後までデータがソートされたときは次のようになります。
・ Delphiによる簡単なプログラムの作成
考え方、視覚的に確認することのできるプログラムとバブルソートについて説明してきました。次は実際にバブルソートの考え方を利用してDelphiで作成した、次のような簡単なプログラムの作成手順を載せています。


プログラムの作成手順を追うことで、今まで説明してきたバブルソートのアルゴリズムをDelphiでプログラムにするにはどうすればいいのかを説明していきます。バブルソートの場合、バブルソートのアルゴリズムのプログラム部分を次のような段階に分けて作成していきました。まず最初に1番目と2番目のデータの比較・交換だけをするプログラム、次にデータを一巡だけバブルソートでソートするプログラム、そして最後にデータをバブルソートで最後までソートするプログラムという段階です。段階的に作っていくことによって、アルゴリズムがどのようにプログラム化されているのか、理解するのを容易にしようとしています。また、プログラムに関する説明を下図のようになるべく詳しく行っています。
ここでは、学習という点を考え、Delphiを持っている人にはこのプログラムを実際に作ってもらうことも目的にしています。
ここでのDelphiの文法に関する説明は[9]とのリンクを考えていたので、[9]で扱っているものに関してはしてしていません。
視覚的に処理過程を確認できるプログラムについていくつか説明しておきます。視覚的に処理過程を確認できるプログラムは、処理が進むたびにフォームのキャンバスに図を描いていきます。そのためデータ数を多くしたり、処理速度を速くすると画面がちらつきます。そこでフォームのキャンバスに直接描くかわりに、ビットマップオブジェクトを作成し、そのキャンバスに図を描きます。描き上がった図をフォームのキャンバスにコピーすることによってちらつきを減らしています。
また、画像を描いた後にSleepを入れることによって処理を遅らせ、データの交換が行われている様子を見せています。