EN
JP
KRJavaScriptの探索アルゴリズムとは？配列・文字列・オブジェクトの検索方法を解説
JavaScriptでアプリケーションを作るとき、データの中から必要な値を探す処理は非常によく登場します。たとえば、商品一覧から特定の商品を探す、ユーザー一覧から該当するユーザーを見つける、文字列の中に特定のキーワードが含まれているか確認する、オブジェクトの中に指定したプロパティが存在するか調べるといった処理です。このような「目的のデータを見つける処理」を広い意味で探索と呼びます。JavaScriptにはincludes()、indexOf()、find()、findIndex()、some()、hasOwnProperty()など便利な標準メソッドがありますが、それらの裏側にある考え方を理解しておくと、より適切な書き方を選べるようになります。
探索アルゴリズムの代表例には、線形探索と二分探索があります。線形探索は、データを先頭から順番に確認して目的の値を探す方法です。単純で分かりやすく、配列が並んでいなくても使えるため、JavaScriptの実務でも考え方としてよく使われます。一方、二分探索は、データがあらかじめ並び替えられている場合に、探索範囲を半分ずつ狭めて高速に探す方法です。データ量が多いほど効率の差が大きくなるため、探索処理を学ぶうえで非常に重要です。本記事では、JavaScriptにおける探索アルゴリズムの基本、配列・文字列・オブジェクトの検索方法、線形探索と二分探索の違い、実務での使い分けまで分かりやすく解説します。
1. JavaScriptの探索アルゴリズムとは？
JavaScriptの探索アルゴリズムとは、配列、文字列、オブジェクトなどのデータ構造から、目的の値や条件に合う要素を見つけるための考え方や手順のことです。たとえば、配列の中に特定の数値があるかどうかを確認する場合、先頭から順番に見ていく方法もあれば、データが整列済みであれば範囲を半分に分けながら探す方法もあります。どちらも「探す」という目的は同じですが、データ量やデータの状態によって効率が大きく変わります。
JavaScriptには探索に使える標準メソッドが多く用意されています。配列であればincludes()、indexOf()、find()、findIndex()、some()などがあり、文字列であればincludes()、indexOf()、startsWith()、endsWith()などがあります。オブジェクトでは、in演算子、Object.keys()、Object.values()、Object.entries()などを使って検索できます。これらをただ暗記するのではなく、「どのような条件で何を探しているのか」「戻り値として何が必要なのか」「データ量が増えたときに重くならないか」を考えることが大切です。
1.1 探索はデータ処理の基本
探索は、ソートや集計と並んで、プログラミングにおける基本的なデータ処理です。ユーザーが入力したキーワードに一致する項目を探す、一覧の中から特定のIDを持つデータを取得する、フォーム入力が許可リストに含まれているか確認するなど、探索処理はアプリケーションのさまざまな場所で使われます。小さなデータでは単純な書き方でも問題になりにくいですが、データ量が増えると探索方法の違いがパフォーマンスに影響します。
JavaScriptでは標準メソッドを使えば簡単に検索できますが、その内部では基本的に要素を順番に確認する処理が行われることも多いです。つまり、便利なメソッドを使っていても、データ量が多ければ処理回数は増えます。探索アルゴリズムを理解しておくと、いつ標準メソッドで十分なのか、いつMapやSetのようなデータ構造を使うべきなのか、いつ二分探索のような方法を検討すべきなのかを判断しやすくなります。
1.2 探索対象によって方法が変わる
探索対象が配列なのか、文字列なのか、オブジェクトなのかによって、使う方法は変わります。配列では、値そのものを探す場合もあれば、条件に合うオブジェクトを探す場合もあります。文字列では、特定の文字や単語が含まれているか、先頭や末尾が特定のパターンかどうかを確認することが多いです。オブジェクトでは、特定のキーが存在するか、値が一致するか、キーと値の組み合わせを探すかによって書き方が変わります。
このように、探索は単に「見つける」だけではなく、「どのデータ構造から」「どの条件で」「どの形式の結果が必要か」を整理することが重要です。たとえば、配列の中に値が存在するかだけ知りたいならincludes()で十分ですが、該当するオブジェクトを取り出したいならfind()を使います。位置が必要ならindexOf()やfindIndex()が向いています。探索アルゴリズムを学ぶと、これらのメソッドをより意図的に使い分けられるようになります。
2. いつ探索アルゴリズムが必要になるのか
探索アルゴリズムは、データの中から目的の情報を取り出したいときに必要になります。具体的には、ユーザーIDからユーザー情報を探す、商品IDから商品詳細を取得する、入力された文字列に禁止ワードが含まれていないか確認する、設定オブジェクトに特定のキーがあるか調べるなどの場面です。小規模な処理であれば標準メソッドだけで十分ですが、データ量が大きくなる場合や検索が何度も繰り返される場合は、探索方法を工夫する必要があります。
特に実務では、探索処理がパフォーマンスのボトルネックになることがあります。たとえば、数万件の配列から毎回find()でユーザーを探している場合、検索回数が増えるほど処理が重くなります。このような場合は、配列をそのまま検索するのではなく、IDをキーにしたMapへ変換しておくことで高速に取得できる場合があります。探索アルゴリズムを学ぶ目的は、すべてを自作することではなく、データ構造と検索方法を適切に選ぶ判断力を身につけることです。
2.1 条件に合うデータを探す場面
JavaScriptでは、条件に合うデータを探す場面が非常に多くあります。たとえば、ユーザー一覧からroleがadminのユーザーを探す、商品一覧からpriceが一定以下の商品を見つける、記事一覧から指定したslugに一致する記事を取り出すといった処理です。このような場合は、配列のfind()やfilter()がよく使われます。find()は最初に条件を満たした要素を返し、filter()は条件を満たすすべての要素を返します。
どちらを使うかは、必要な結果によって決まります。1件だけ取得したいのにfilter()を使うと、最後まで配列を走査するため無駄が増えることがあります。逆に、複数件必要なのにfind()を使うと、最初の1件しか取得できません。探索処理では、目的の結果が「存在確認」なのか、「最初の1件」なのか、「すべての一致」なのかをはっきりさせることが重要です。
2.2 検索回数が多い場面
データ量が少なく、検索回数も少ない場合は、単純な線形探索で十分です。しかし、同じデータに対して何度も検索する場合は、毎回先頭から探す方法では効率が悪くなることがあります。たとえば、ユーザーIDをもとに何度もユーザー情報を取得する処理では、配列を毎回find()で探すより、最初にMapへ変換しておいた方が高速になる場合があります。
このように、探索回数が多い場面では、検索前の準備も含めて考える必要があります。配列をMapやSetに変換するには初期コストがかかりますが、その後の検索が高速になります。つまり、1回だけ探すなら配列のままで十分でも、何千回も検索するならデータ構造を変える価値があります。探索アルゴリズムでは、1回あたりの処理だけでなく、全体として何回検索するのかを考えることが大切です。
3. 配列の中を検索する方法
JavaScriptで配列を検索する方法は非常に多くあります。値が含まれているかを調べるならincludes()、値の位置を知りたいならindexOf()、条件に合う要素を取り出したいならfind()、条件に合う位置を知りたいならfindIndex()、条件を満たす要素があるかだけ知りたいならsome()が使えます。これらのメソッドは似ていますが、戻り値や用途が異なるため、目的に応じて使い分ける必要があります。
配列検索の基本は、先頭から順番に要素を確認する線形探索です。includes()やfind()も、多くの場合は条件に一致する要素が見つかるまで順番に確認します。そのため、配列の先頭に目的の要素があればすぐ見つかりますが、末尾にある場合や存在しない場合は多くの要素を確認する必要があります。小規模な配列では問題になりにくいですが、大量データでは検索方法やデータ構造を見直すことが重要になります。
3.1 値の存在確認
配列の中に特定の値が含まれているかを確認したい場合は、includes()が分かりやすい方法です。戻り値はtrueまたはfalseなので、存在確認だけが目的の場合に向いています。たとえば、許可されたロール一覧に現在のユーザーのロールが含まれているかを確認するような場面で使えます。
const roles = ["admin", "editor", "viewer"];console.log(roles.includes("admin")); // trueconsole.log(roles.includes("guest")); // false
一方で、位置も必要な場合はindexOf()を使います。indexOf()は見つかった位置を返し、存在しない場合は-1を返します。ただし、オブジェクト配列のように条件で探したい場合には向いていません。その場合はfind()やfindIndex()を使う方が自然です。
3.2 条件に合う要素の取得
オブジェクト配列から条件に合う要素を取り出したい場合は、find()が便利です。たとえば、ユーザー一覧からidが一致するユーザーを探す場合、find(user => user.id === targetId)のように書けます。find()は最初に条件を満たした要素を返し、見つからない場合はundefinedを返します。
const users = [ { id: 1, name: "Sato" }, { id: 2, name: "Tanaka" }];const user = users.find(item => item.id === 2);console.log(user); // { id: 2, name: "Tanaka" }
条件に合う要素が複数ある場合は、find()ではなくfilter()を使います。find()は最初の1件で処理を終了できるため、1件だけ必要な場合には効率的です。検索処理を書くときは、1件だけ必要なのか、複数件必要なのかを最初に決めておくと、適切なメソッドを選びやすくなります。
4. 文字列の中を検索する方法
文字列の検索では、特定の文字や単語が含まれているかを確認する処理がよく使われます。JavaScriptでは、includes()、indexOf()、startsWith()、endsWith()、match()、search()などが代表的です。単純に含まれているかどうかを確認したい場合はincludes()が分かりやすく、位置を知りたい場合はindexOf()が使えます。正規表現を使った複雑な検索をしたい場合はmatch()やsearch()を検討します。
文字列検索は、フォーム入力、検索ボックス、バリデーション、フィルタリング、ログ解析などでよく使われます。たとえば、記事タイトルにキーワードが含まれているか、メールアドレスに@が含まれているか、URLがhttpsで始まるかなどの確認です。ただし、大文字と小文字、全角と半角、日本語の表記ゆれなどを考慮する必要がある場合もあります。実務では、検索前に小文字化や正規化を行うことで、より安定した検索結果を作ることがあります。
4.1 includesとindexOfの使い分け
文字列に特定のキーワードが含まれているかだけを知りたい場合は、includes()を使うのが自然です。戻り値がtrueまたはfalseなので、条件分岐にも使いやすいです。一方、キーワードが文字列のどの位置にあるかを知りたい場合はindexOf()を使います。indexOf()は見つかった位置を返し、見つからない場合は-1を返します。
const title = "JavaScriptの探索アルゴリズム";console.log(title.includes("探索")); // trueconsole.log(title.indexOf("探索")); // 12
includes()は可読性が高く、存在確認に向いています。indexOf()は位置情報が必要な場合に便利ですが、存在確認だけならincludes()の方が意図が伝わりやすいです。コードを書くときは、後から読む人が「何を確認しているのか」を理解しやすいメソッドを選ぶことが重要です。
4.2 大文字小文字を無視した検索
英字を含む文字列では、大文字と小文字の違いが検索結果に影響します。たとえば、"JavaScript"に対して"javascript"をincludes()で検索すると、そのままでは一致しません。このような場合は、検索対象とキーワードの両方をtoLowerCase()で小文字化してから比較します。
const text = "Learning JavaScript Algorithms";const keyword = "javascript";console.log(text.toLowerCase().includes(keyword.toLowerCase())); // true
ただし、検索のたびにtoLowerCase()を繰り返すと、大量データではコストになることがあります。記事一覧や商品一覧を何度も検索する場合は、あらかじめ検索用の小文字化済み文字列を作っておくと効率的です。文字列検索では、単純な一致だけでなく、検索条件の正規化も重要なポイントになります。
5. オブジェクトの中を検索する方法
JavaScriptのオブジェクトを検索する場合、何を探したいかによって方法が変わります。特定のキーが存在するかを確認したい場合は、in演算子やObject.hasOwn()を使います。値を検索したい場合はObject.values()を使い、キーと値の組み合わせを調べたい場合はObject.entries()が便利です。オブジェクトは配列と違って順番に並んだデータというより、キーと値の対応を持つデータ構造として扱われます。
オブジェクト検索では、キー検索と値検索を分けて考えることが重要です。キーが分かっている場合は、object[key]のように直接アクセスするのが最も簡単で高速です。一方、値からキーを探したい場合や、条件に合うプロパティを探したい場合は、Object.entries()で配列化してから検索することがあります。ただし、毎回Object.entries()を作るとコストがかかるため、大量データではMapの利用も検討できます。
5.1 キーの存在確認
オブジェクトに特定のキーがあるか確認する場合、in演算子を使えます。ただし、in演算子はプロトタイプチェーン上のプロパティも確認するため、自分自身のプロパティだけを確認したい場合はObject.hasOwn()を使う方が明確です。
const user = { id: 1, name: "Sato", role: "admin"};console.log("role" in user); // trueconsole.log(Object.hasOwn(user, "role")); // true
実務では、APIレスポンスの中に特定のフィールドがあるか確認したい場合や、設定オブジェクトに指定したキーが存在するかを調べたい場合に使います。キーが存在しない可能性があるデータを扱うときは、事前に存在確認を行うことでエラーを防ぎやすくなります。
5.2 値や条件で探す
オブジェクトの値を検索したい場合は、Object.values()やObject.entries()を使えます。たとえば、値の中に"admin"が含まれているかを確認するならObject.values(user).includes("admin")のように書けます。キーと値の両方を使って条件検索したい場合はObject.entries()が便利です。
const settings = { theme: "dark", language: "ja", layout: "grid"};const result = Object.entries(settings).find(([key, value]) => { return key === "language" && value === "ja";});console.log(result); // ["language", "ja"]
ただし、オブジェクトを毎回配列に変換する処理は、データ量が多い場合には負荷になることがあります。頻繁に検索するデータであれば、最初からMapを使う設計も検討できます。オブジェクト検索では、単発の確認なのか、何度も検索するのかによって適切な方法が変わります。
6. 線形探索とは？
線形探索は、データを先頭から順番に確認して、目的の値や条件に合う要素を探すアルゴリズムです。英語ではLinear Searchと呼ばれますが、日本語では線形探索または逐次探索と呼ばれます。配列が並び替えられている必要がなく、どのような順番のデータにも使えるため、最も基本的で分かりやすい探索方法です。JavaScriptのfind()、findIndex()、includes()なども、考え方としては線形探索に近い処理を行います。
線形探索のメリットは、実装が簡単で、データに特別な前提が不要なことです。一方で、データ量が増えると確認する要素数も増えるため、時間計算量はO(n)になります。目的の要素が先頭にあればすぐ見つかりますが、末尾にある場合や存在しない場合はすべての要素を確認する必要があります。そのため、小規模なデータや一度だけの検索では十分ですが、大量データを何度も検索する場合には別の方法を検討する必要があります。
6.1 線形探索の基本コード
線形探索は、for文を使って簡単に実装できます。配列の先頭から順番に値を確認し、目的の値と一致したらその位置を返します。見つからなかった場合は-1を返すようにすると、indexOf()に近い動きになります。
function linearSearch(array, target) { for (let i = 0; i < array.length; i++) { if (array[i] === target) { return i; } } return -1;}console.log(linearSearch([10, 20, 30], 20)); // 1
この実装は非常に分かりやすく、探索アルゴリズムの入門として適しています。実務では標準メソッドを使うことが多いですが、線形探索の仕組みを理解しておくと、find()やincludes()がどのような考え方で動いているのかをイメージしやすくなります。
6.2 線形探索が向いている場面
線形探索は、データ量が少ない場合や、配列が並び替えられていない場合に向いています。また、検索条件が複雑で、単純な大小比較では探せない場合にも使いやすいです。たとえば、複数の条件を満たすオブジェクトを探す場合、二分探索よりもfind()による線形探索の方が自然なことがあります。
ただし、データ量が非常に多く、同じ配列を何度も検索する場合は、線形探索だけでは効率が悪くなることがあります。このような場合は、MapやSetを使って検索しやすい形に変換したり、データを整列して二分探索を使ったりする方法を検討します。線形探索は基本ですが、万能ではありません。
7. 二分探索とは？
二分探索は、整列済みのデータに対して、探索範囲を半分ずつ狭めながら目的の値を探すアルゴリズムです。英語ではBinary Searchと呼ばれ、日本語では二分探索と呼ばれます。たとえば、昇順に並んだ数値配列で中央の値を確認し、目的の値が中央より小さければ左側、大きければ右側だけを次の探索対象にします。この処理を繰り返すことで、非常に少ない回数で目的の値にたどり着けます。
二分探索の時間計算量はO(log n)です。データ量が増えても、探索回数の増え方が非常に緩やかになります。たとえば、100万件のデータでも、理論上は20回程度の比較で目的の値を探せる場合があります。ただし、二分探索を使うには、データがあらかじめ整列されている必要があります。並び替えられていない配列に二分探索を使うと、正しい結果を得られません。
7.1 二分探索の基本コード
二分探索では、left、right、midという3つの位置を使います。leftは探索範囲の左端、rightは右端、midは中央です。中央の値とtargetを比較し、targetが小さければ右端をmid - 1に、大きければ左端をmid + 1に更新します。
function binarySearch(array, target) { let left = 0; let right = array.length - 1; while (left <= right) { const mid = Math.floor((left + right) / 2); if (array[mid] === target) { return mid; } if (array[mid] < target) { left = mid + 1; } else { right = mid - 1; } } return -1;}console.log(binarySearch([1, 3, 5, 8, 10], 8)); // 3
このコードでは、探索範囲が空になるまで処理を続けます。見つかった場合はその位置を返し、見つからなければ-1を返します。leftとrightの更新を間違えると無限ループや検索漏れが起きるため、二分探索では境界の扱いが重要です。
7.2 二分探索が向いている場面
二分探索は、データが整列済みで、検索回数が多い場合に向いています。たとえば、昇順に並んだID一覧から特定のIDを探す場合や、数値範囲の中から条件を満たす境界を探す場合に有効です。線形探索ではデータ数に比例して確認回数が増えますが、二分探索では半分ずつ範囲を削れるため、大量データで効果を発揮します。
一方で、データが整列されていない場合は、まずソートが必要です。ソートにもコストがかかるため、1回だけ検索するためにわざわざソートして二分探索を使うのは効率的でない場合があります。二分探索は、整列済みデータを何度も検索する場合や、最初から整列状態を保てるデータ構造で特に有効です。
8. 探索方法の比較
探索方法を選ぶときは、データ量、データの状態、検索回数、必要な戻り値を考える必要があります。小さな配列で1回だけ検索するなら、includes()やfind()による線形探索で十分です。データが整列済みで、何度も検索するなら二分探索が有効です。キーから値を高速に取得したい場合は、配列ではなくMapやオブジェクトを使う方が適していることもあります。
JavaScriptの実務では、アルゴリズムを自作するより、まず標準メソッドを正しく使うことが重要です。ただし、標準メソッドがどのような探索に向いているのかを理解していないと、不要に重い処理を書いてしまうことがあります。探索方法の比較では、単に「どれが速いか」ではなく、「前提条件に合っているか」「コードが読みやすいか」「データ量が増えても問題ないか」を総合的に判断することが大切です。
8.1 線形探索と二分探索の違い
線形探索は、データを先頭から順番に確認します。データが整列されていなくても使えるため、柔軟性が高いです。一方、二分探索は整列済みデータにしか使えませんが、探索範囲を半分ずつ削るため、大量データでは非常に高速です。つまり、線形探索は前提条件が少なく、二分探索は前提条件がある代わりに高速です。
実務では、データが小さい場合や条件が複雑な場合は線形探索が自然です。データが大きく、整列済みで、検索回数が多い場合は二分探索を検討できます。ただし、JavaScriptの一般的な配列操作では、まずfind()やincludes()のような標準メソッドを使い、必要に応じてデータ構造を見直す流れが現実的です。
8.2 MapやSetとの使い分け
存在確認だけを高速に行いたい場合は、Setが便利です。たとえば、許可されたID一覧に特定のIDが含まれているかを何度も確認する場合、配列のincludes()を毎回使うより、Set.has()を使う方が効率的になることがあります。キーから値を取得したい場合はMapが適しています。
const allowedIds = new Set([1, 2, 3, 5, 8]);console.log(allowedIds.has(5)); // trueconsole.log(allowedIds.has(10)); // false
ただし、SetやMapを作るには初期コストがあります。そのため、1回だけ検索する場合は配列のままで十分なこともあります。何度も検索する処理では、最初に検索しやすい形へ変換することで、全体の処理を軽くできる場合があります。
9. JavaScript実務で探索を最適化する考え方
実務で探索処理を最適化するときは、まず本当に探索がボトルネックになっているかを確認することが大切です。データ量が少ない場合、探索アルゴリズムを工夫しても体感差はほとんどないことがあります。一方で、大量データを何度も検索している場合や、UIの再描画ごとに重い検索が走っている場合は、探索方法の見直しが効果的です。console.time()やブラウザのPerformanceツールを使い、どこに時間がかかっているかを確認しましょう。
探索を速くする方法は、アルゴリズムを変えるだけではありません。検索用のキーを事前に作る、MapやSetへ変換する、データを整列して二分探索しやすくする、検索結果をキャッシュする、サーバー側で検索するなど、さまざまな選択肢があります。JavaScriptの探索処理では、コード単体ではなく、データの流れ全体を見ることが重要です。
9.1 検索用データを事前に作る
同じ配列を何度も検索する場合は、検索しやすい形に変換しておくと効率的です。たとえば、ユーザーIDからユーザー情報を頻繁に取得するなら、配列をMapに変換しておくと、毎回find()する必要がなくなります。
const users = [ { id: 1, name: "Sato" }, { id: 2, name: "Tanaka" }];const userMap = new Map(users.map(user => [user.id, user]));console.log(userMap.get(2)); // { id: 2, name: "Tanaka" }
このような前処理にはコストがありますが、検索回数が多い場合は十分に効果があります。実務では、1回の検索だけを見るのではなく、画面全体や処理全体で何回検索が行われるかを考えることが重要です。
9.2 UIでは不要な再検索を避ける
ReactやVueなどのUI開発では、再レンダリングのたびに検索処理が走ることがあります。データ量が多い場合、毎回filter()やfind()を実行すると、画面の操作感が悪くなる可能性があります。このような場合は、依存データが変わったときだけ検索結果を再計算する仕組みを使うと効果的です。
また、検索結果をすべて描画するのではなく、ページングや仮想スクロールを使うことも重要です。探索処理が速くても、その結果を大量にDOMへ描画すればUIは重くなります。探索の最適化では、検索そのものだけでなく、検索後の表示処理まで含めて考える必要があります。
おわりに
JavaScriptの探索アルゴリズムは、配列、文字列、オブジェクトなどのデータから目的の値を見つけるための基本的な考え方です。線形探索は単純で分かりやすく、整列されていないデータにも使えるため、多くの場面で自然に利用できます。一方、二分探索は整列済みデータに対して高速に検索でき、データ量が多い場合に大きな効果を発揮します。
実務では、すべての探索アルゴリズムを自作する必要はありません。多くの場合、includes()、find()、findIndex()、some()、Object.keys()、Map、Setなどの標準機能を適切に使うことが重要です。ただし、それぞれの方法がどのような探索を行っているのか、どのようなデータ量で重くなるのかを理解しておくと、より良い設計ができます。
探索処理を考えるときは、「何を探すのか」「どのデータ構造から探すのか」「検索回数は多いのか」「データは整列済みなのか」を整理しましょう。そのうえで、線形探索、二分探索、Map、Set、標準メソッドを使い分けることで、読みやすく、効率的で、保守しやすいJavaScriptコードを書けるようになります。
原因なのかを確認します。原因が検索にある場合は、MapやSet、二分探索、サーバー側検索などを検討します。
パフォーマンス改善では、アルゴリズムを変えるだけでなく、データの持ち方を変えることが重要です。何度も検索するなら、最初に検索しやすい形へ変換することで、全体の処理を軽くできます。
おわりに
線形探索と二分探索は、どちらも重要な探索アルゴリズムです。線形探索は、先頭から順番に確認するシンプルな方法で、未整列データにも使えます。実装が簡単で、JavaScriptのfind()、includes()、filter()などの標準メソッドとも関係が深いため、実務でもよく使われます。一方、二分探索は、整列済みデータに対して探索範囲を半分ずつ狭める方法で、大量データに対して非常に高速です。
両者の違いは、使用条件と計算量にあります。線形探索はO(n)で、条件が少なく柔軟です。二分探索はO(log n)で高速ですが、整列済みデータが必要です。小さな配列や複雑な条件検索では線形探索が向いており、整列済みの大量データを何度も検索する場合は二分探索が向いています。
JavaScriptの実務では、まず標準メソッドを使って読みやすく書くことが基本です。そのうえで、データ量や検索回数が増えて問題になった場合に、二分探索、Map、Set、サーバー側検索などを検討しましょう。線形探索と二分探索の違いを理解しておくことで、データ検索をより効率的に設計できるようになります。
