🎯 はじめに
みなさんこんにちは！
アルゴリズムの勉強をしていると、「線形探索」や「二分探索」といった配列探索アルゴリズムに出会いますよね。しかし、教科書を読んだだけでは実際の動作がイメージしにくいという課題がありました。
そこで今回は、配列探索アルゴリズムの動作をリアルタイムで可視化できるシミュレーターアプリを、React 18とTypeScriptで開発しました。
本記事では、配列探索アルゴリズムの基礎知識から、本アプリの使い方、実装で工夫した点、そして可視化による学習効果についてご紹介します！
🎮 デモプレイ
💻 ソースコード
🔍 配列探索アルゴリズムとは
配列探索とは、配列の中から特定の値（目標値）を見つけ出す処理のことです。データ検索の基本となる重要なアルゴリズムで、データベース検索やファイルシステムなど、さまざまな場面で使われています。
📌 本アプリで扱う2つのアルゴリズム
🚶 線形探索（Linear Search）
線形探索は、配列の先頭から順番に1つずつ要素を確認していく、最もシンプルな探索アルゴリズムです。
特徴：
- データがソートされている必要がない
- 実装が簡単で理解しやすい
- 配列のサイズが大きくなると効率が悪くなる
計算量：
- 最悪時間計算量：O(n) - 目標値が最後にある、または存在しない場合
- 平均時間計算量：O(n) - 平均的に配列の半分程度を探索
- 最良時間計算量：O(1) - 目標値が先頭にある場合
🎯 二分探索（Binary Search）
二分探索は、ソート済み配列を対象に、中央の値と目標値を比較しながら探索範囲を半分ずつ絞り込んでいくアルゴリズムです。
特徴：
- 配列が事前にソートされている必要がある
- 大規模なデータでも高速に探索できる
- 探索範囲を半分ずつ減らすため、効率的
計算量：
- 最悪時間計算量：O(log n) - 探索範囲を半分ずつ絞り込む
- 平均時間計算量：O(log n) - 対数的な探索効率
- 最良時間計算量：O(1) - 中央値がちょうど目標値の場合
⚖️ アルゴリズムの比較
| 項目 | 線形探索 | 二分探索 |
|---|---|---|
| 前提条件 | なし | ソート済み配列 |
| 時間計算量（最悪） | O(n) | O(log n) |
| 実装難易度 | 簡単 | 中程度 |
| データサイズ小 | 十分高速 | オーバーヘッドあり |
| データサイズ大 | 遅くなる | 圧倒的に高速 |
例えば、100要素の配列の場合、線形探索は最悪100回の比較が必要ですが、二分探索は最大7回で済みます。1000要素なら、線形探索1000回に対して二分探索は最大10回です。この差は、データサイズが大きくなるほど顕著になります。
💻 本アプリの使い方
本アプリには「シングルモード」と「比較モード」の2つの動作モードがあります。
🎮 シングルモード
1つのアルゴリズムの動作を詳しく観察できるモードです。
使い方：
- アルゴリズムを選択 - ドロップダウンから「線形探索」または「二分探索」を選択
- データパターンを選択 - ランダム（線形探索のみ）、ソート済み、ソート済み（連続）、ソート済み（重複あり）から選択
- データサイズを設定 - 5から200の範囲で配列のサイズを指定
- 「データ生成」をクリック - 配列と目標値が自動生成される
- 「実行」をクリック - アルゴリズムのアニメーション実行が開始
- 速度調整 - スライダーでアニメーション速度を100msから2000msの間で調整可能
- 一時停止／再開 - 実行中に一時停止して、再度「再開」で続きから実行
- リセット - 初期状態に戻して新しい探索を開始
画面の見方：
- 縦棒グラフ - 各要素の値を視覚的に表示
-
色分け - 探索の進行状況を色で表現
- 青：現在探索中の要素
- 緑：目標値が見つかった
- 灰色：探索済みの要素
- 橙色：スキップされた範囲（二分探索）
- 黄色：現在の探索範囲（二分探索）
- 統計情報 - ステップ数、比較回数、アクセス回数、実行時間をリアルタイム表示
- 操作ログ - 各ステップで何が起きているかをテキストで表示
🔄 比較モード
2つのアルゴリズムを同じデータで同時実行して、性能を直接比較できるモードです。
使い方：
- 画面上部の**「比較モード」ボタン**をクリック
- 左右のパネルでそれぞれアルゴリズムを選択（例：左に線形探索、右に二分探索）
- 共通設定でデータパターンとサイズを指定
- 「データ生成」をクリック - 両方のパネルに同一データが生成される
- 「両方実行」をクリック - 2つのアルゴリズムが同時に動作開始
- 視覚的に探索速度と効率の差を比較
比較モードでは、例えば100要素の配列で線形探索が全要素を順番に見ていく様子と、二分探索が探索範囲を素早く絞り込んでいく様子を同時に観察でき、計算量の違いを実感できます。
🛠️ 実装の工夫点
♻️ データ生成の柔軟性
様々な学習シナリオに対応できるよう、複数のデータパターンを用意しました。
ランダムパターンは1から100の範囲でランダムな値を生成し、一般的な未ソートデータのケースをシミュレートします。このパターンは線形探索でのみ利用可能で、二分探索を選択した場合は表示されません。
ソート済みパターンは、重複なし・連続なしのランダムな値を生成してソートします。これにより、実際のデータに近い不規則な値の分布で二分探索の動作を観察できます。
ソート済み（連続）パターンは1から順番に連続した値（1, 2, 3, ...）を生成し、最も理想的なソート済みデータで二分探索の効率を確認できます。
ソート済み（重複あり）パターンは、配列サイズの4分の1程度のユニークな値を繰り返し生成してソートし、重複値がある場合のアルゴリズムの動作を確認できます。
アルゴリズムに応じたパターン制御として、線形探索を選択した場合はすべてのパターンが利用可能ですが、二分探索を選択した場合はソート済みパターンのみが表示されます。これにより、二分探索の前提条件（ソート済み配列）を自然に理解できるよう設計されています。
比較モードでの最適化では、左右のシミュレータで完全に同一のデータを使用するため、ランダムパターンは除外され、常にソート済みパターンのみが選択可能です。これにより、二分探索が正しく動作する条件下で、線形探索と二分探索の性能差を公平に比較できます。
目標値は、各データパターンに応じて適切に設定されます。多くの場合、生成された配列の中からランダムに選ばれるため、様々な位置の値を探索するケースを学習できます。
📚 可視化による学習効果
本アプリで探索アルゴリズムを可視化することで、以下のような学習効果が得られます。
👀 アルゴリズムの動作原理の理解
教科書のテキストやコードだけでは理解しにくかった、探索アルゴリズムの具体的な動き方を目で見て理解できます。
線形探索では、配列の先頭から順番に1つずつ確認していく様子を、青色のハイライトが左から右へ移動する様子で観察できます。この単純明快な動作を視覚的に確認することで、「なぜ最悪ケースで全要素を見る必要があるのか」が体感的に理解できます。
二分探索では、探索範囲が黄色でハイライトされ、中央の要素を調べるたびに範囲が半分になっていく様子を観察できます。橙色で表示されるスキップ範囲が広がっていくのを見ることで、「なぜ効率的なのか」が直感的にわかります。
📊 計算量の実感
理論的な計算量の違いを、実際の動作を通じて体感できます。
比較モードで同じ100要素のデータに対して両方のアルゴリズムを同時実行すると、線形探索がすべての要素を順番に見ていく間に、二分探索はわずか数ステップで目標値を見つけ出します。この圧倒的な速度差を目の当たりにすることで、「O(n)とO(log n)の差」の意味が実感できます。
統計情報をリアルタイムで表示することで、比較回数の違いも数値として確認できます。例えば100要素の配列で線形探索が50回比較している間に、二分探索は7回程度で完了することが具体的な数字で示されます。
🎓 前提条件の重要性の理解
二分探索がソート済み配列でしか正しく動作しないことを、実際の動作を通じて理解できます。
本アプリでは、二分探索を選択すると自動的にソートが行われますが、元のデータがランダムだった場合、ソート後のデータを見ることで「なぜソートが必要なのか」を考えるきっかけになります。
また、ソート済みデータに対して線形探索を実行することで、「ソート済みでも線形探索は全要素を見る必要がある」という非効率性を視覚的に確認できます。
🔍 エッジケースの観察
最良ケースと最悪ケースの違いを、データ生成と実行を繰り返すことで観察できます。
線形探索で目標値が先頭にある場合は1ステップで完了しますが、最後にある場合は全要素を見る必要があります。この違いを何度も試すことで、「なぜ平均計算量と最悪計算量が重要なのか」が理解できます。
二分探索でも、目標値がちょうど中央にある幸運なケースと、何度も範囲を絞り込む必要があるケースの違いを観察でき、アルゴリズムの振る舞いの幅を体感できます。
🎯 アルゴリズム選択の判断基準
どのような状況でどちらのアルゴリズムを選ぶべきかを、実際のシミュレーションを通じて学べます。
データサイズが小さい場合（例えば10要素程度）では、線形探索と二分探索の速度差がほとんどないことを確認できます。この場合、実装が簡単な線形探索を選ぶという判断が妥当だとわかります。
一方、データサイズを100や200に増やすと、二分探索の優位性が圧倒的になります。「データがソート済み」という前提条件を満たせるなら、二分探索を選ぶべきだという判断基準が体験的に理解できます。
🎉 おわりに
配列探索アルゴリズムの可視化シミュレーターを通じて、アルゴリズムの動作原理と計算量の違いを視覚的に理解できるアプリケーションを作成しました。
本アプリでは、線形探索と二分探索という基本的なアルゴリズムを題材に、ジェネレータによるステップ実行、カスタムフックによる状態管理、TypeScriptによる型安全性など、モダンなReact開発の手法を詰め込みました。
アルゴリズムの学習において、「見て理解する」ことの重要性は非常に高いと感じています。本アプリが、アルゴリズムを学ぶ方々の理解の助けになれば幸いです。
今後は、他の探索アルゴリズム（ハッシュ探索、補間探索など）や、ソートアルゴリズムの可視化にも挑戦していきたいと思います！
最後まで読んでいただき、ありがとうございました！