【JavaScript】文字列を検索する方法を初心者向けにわかりやすく解説

はじめに

JavaScriptで文字列を検索する方法は、プログラミング初学者の皆さんにとって理解しやすい反面、いざ現場で使おうとすると意外と多くの疑問が出てきやすい部分かもしれません。

例えば「特定の単語が含まれるかを確かめたい」「複数回出現している部分を全部抽出したい」「大小文字を区別せずに検索したい」など、多様なケースで検索が必要になることがあります。

こうした文字列検索は、ログファイルからエラーを特定する場面や、ユーザーの入力内容をチェックする場面でも役に立ちます。

本記事では、文字列検索の基本的な関数から正規表現を用いた方法までを段階的に解説します。

合わせて、実務でどのように活用できるかをイメージしやすいように、具体的な例や注意点を示していきます。

初心者の方がつまずきやすいポイントも補足しますので、ぜひ参考にしてみてください。

この記事を読むとわかること

• JavaScriptで文字列を検索する代表的なメソッド
• 正規表現を活用した高度な検索方法
• 実務で想定される具体的な活用シーンと注意点
• パフォーマンス面や可読性を考慮した実装上のポイント
• 複数の検索パターンがある中での適切な選択方法

JavaScriptの文字列検索とは

JavaScriptの文字列検索とは、プログラムの中で特定の文字列やパターンを探し出すことです。

例えば「エラーログの中から 'Error' という単語を探す」といった処理を思い浮かべる方もいるでしょう。

実際、エラーの原因究明やユーザー入力チェックなど、多様な場面で文字列の検索が必須になります。

ここで気をつけたいのは、単純な文字一致だけを探すのか、あるいはより複雑なルールを適用して検索するのかという点です。

単純に文字が含まれているかどうかを確認するだけなら、後述する indexOf() や includes() などのメソッドがよく使われます。

一方、文字数や記号のパターンを考慮しながら検索を行う場合は正規表現が有効です。

あまり複雑ではない場合でも、将来的に検索内容が変わる可能性や、同じパターンを繰り返し使う可能性があるなら、あらかじめ正規表現で構築しておくと保守性が高まります。

しかし、正規表現には独特の書き方があり、初心者の皆さんには少しとっつきにくいと感じられるかもしれません。

本記事では、まずは文字列検索の基礎的なアプローチをいくつか紹介し、その後で正規表現を活用したより高度な手法を見ていきます。

一般的な検索方法

JavaScriptでよく使われる、比較的シンプルな文字列検索の方法を紹介します。

いずれも、目的に応じて使い分けが必要です。

indexOf() メソッド

indexOf() は、指定した文字列が最初に見つかった位置（インデックス）を返すメソッドです。

例えば、文字列中に単語が含まれているかどうかを確認する際に便利です。

コピー
const text = "Hello JavaScript World";
const searchWord = "JavaScript";
const position = text.indexOf(searchWord);

if (position !== -1) {
  console.log("見つかりました。インデックス:", position);
} else {
  console.log("見つかりませんでした。");
}

上記の例では、text という文字列内に searchWord が含まれていれば、その開始インデックスを表示します。

インデックスが -1 の場合は、文字列が見つからないことを意味します。

実務での使いどころ： ログファイルやテキストの中から特定のキーワードを探す場合、単純にそのキーワードが存在するかどうかを判断するには手軽でわかりやすい方法です。

ただし、大文字・小文字は区別されることに注意が必要です。

また、複数箇所に同じ文字列が出現する場合は最初の位置だけが返されるため、1回目の出現だけを把握したいケースで利用されることが多いです。

lastIndexOf() メソッド

lastIndexOf() は、名前の通り文字列が最後に見つかった位置（インデックス）を返すメソッドです。

用法は indexOf() と似ていますが、検索が後ろから行われるイメージです。

コピー
const text = "ABC-ABC-ABC";
const position = text.lastIndexOf("ABC");
console.log("最後に見つかった位置:", position);

このコードでは "ABC-ABC-ABC" の最後に現れる "ABC" の開始位置を返します。

複数箇所で同じ文字列が出現し、そのうち最新の出現位置を見つけたい場合に便利です。

実務での使いどころ： 複数回出力されるようなログ内容から、一番新しい情報を取得したい場合などに重宝します。

たとえば、サーバーの稼働状況を記録しているテキストの中で、直近にあったエラーを特定する場面などが挙げられます。

includes() メソッド

includes() は、文字列の中に指定した部分文字列が含まれているかどうかを真偽値（boolean）で返します。

このメソッドは indexOf() よりもシンプルに扱えるのが特徴です。

コピー
const fileName = "report_2023_important.txt";
if (fileName.includes("important")) {
  console.log("重要ファイルです。");
} else {
  console.log("重要ファイルではありません。");
}

指定した文字列が含まれていれば true、なければ false となるため、if 文などで分岐させやすいです。

実務での使いどころ： ファイル名やユーザー入力に特定の文字列が含まれているかどうかを手早く確認する用途が考えられます。

ただし、こちらも大小文字の区別はそのまま維持されるので、必要に応じて小文字や大文字に変換したうえでチェックをすることが多いです。

複数のキーワードを同時に探したい場合は、何度も includes() を書くより別のアプローチを検討するほうが良いでしょう。

正規表現を使った検索

正規表現を使うことで、より柔軟な文字列検索が可能になります。

例えば、英数字だけを探したい場合や、特定のパターンに合致する部分のみ抽出したい場合などに使われることが多いです。

ここでは、正規表現関連の主なメソッドを紹介します。

match() メソッド

match() は、文字列に対して指定した正規表現パターンを検索し、その結果を配列形式で返します。

最初に見つかった一致結果だけ欲しいのか、すべての一致結果が欲しいのかによって、正規表現にフラグを付与する必要があります。

コピー
const text = "Order ID: #12345, Confirmation Code: ABCD1234";
const pattern = /[A-Z0-9]+/g;
const results = text.match(pattern);

console.log(results); 
// ["Order", "ID", "12345", "Confirmation", "Code", "ABCD1234"]

例では、すべての英大文字と数字の組み合わせにマッチする箇所をすべて抜き出しています。

実務での使いどころ： 注文IDや商品コードなど、決まったフォーマットの英数字が散りばめられているログや文章から、関連する部分をまとめて抽出したいときに有用です。

フラグ設定の有無で出力結果が異なるため、あらかじめ要件を整理しておくとミスを防ぎやすくなります。

matchAll() メソッド

matchAll() は、すべてのマッチ結果を反復処理可能なオブジェクト（イテレーター）として返すメソッドです。

match() と似ていますが、より詳細な情報（マッチした文字列の開始位置など）を一括で取得できます。

コピー
const text = "User: John, ID: 123 | User: Alice, ID: 456";
const pattern = /User:\s(\w+),\sID:\s(\d+)/g;
const matches = text.matchAll(pattern);

for (const match of matches) {
  console.log("ユーザー名:", match[1], "ID:", match[2]);
}

この例では、User: XXX, ID: YYY というパターンにマッチする部分をすべて探し、ユーザー名とIDを効率よく取得しています。

実務での使いどころ： 大量のログやテキストデータから複数の項目を同時に抜き出したい場合に便利です。

matchAll() では各マッチに対するグループ情報がまとめて取り出せるため、前後関係も含めて扱いたいケースに合っています。

search() メソッド

search() は、指定した正規表現にマッチする文字列の開始インデックスを返すメソッドです。

1つのマッチ箇所を把握したいだけならシンプルでわかりやすいです。

コピー
const text = "Welcome to JavaScript!";
const index = text.search(/javascript/i); 
console.log(index);

この例では、正規表現のフラグ i を使って大小文字の区別を無効化し、"javaScript" の文字列が何文字目から始まるかを検索しています。

実務での使いどころ： 大小文字を区別せずに特定の文字列が登場する場所を探したい場合に役立ちます。

ただし、マッチがひとつしか見つからない場合でも、部分的な情報しか取れないので、複数箇所を取得したい時は match() や matchAll() の活用を検討するほうが良いでしょう。

正規表現検索の注意点

正規表現は自由度が高いため、大規模なテキスト処理などにも対応しやすい反面、パターンが複雑になると可読性が落ちやすいという欠点があります。

また、/.../g のようにフラグをつけるかどうかで結果が大きく変わります。

以下のような工夫をすると、わかりやすいコードになりやすいです。

1. パターンを変数に入れる

直接的に /[A-Z0-9]+/g のように書くより、const pattern = /[A-Z0-9]+/g; のように変数へ格納したほうが再利用しやすいです。

2. コメント機能や段階的な検証

大規模なパターンを作成する場合は、部分的に検証しながら書き進めるとバグを防ぎやすいです。

3. 複数行に分割する

JavaScriptでは、文字列リテラルをバッククォート（`）で記述し、複数行に分割して読みやすい形に整える人もいます。ただし、記述次第では想定外の改行が挟まるので注意が必要です。

実務での活用シーン

文字列検索が求められる実務シーンは多岐にわたります。

ここでは、特に初心者の皆さんがイメージしやすい例をいくつか挙げてみます。

ログ解析

Webアプリケーションやシステムが生成するログファイルには、エラーや警告の情報が蓄積されていることが多いです。

includes() などでエラーを示すキーワードを探し出すだけでも、問題個所の発見に役立ちます。

また、正規表現を使えば日時やIDの形式を抽出して「いつ、どのユーザーでエラーが起きたか」をピンポイントで特定できるでしょう。

膨大なログでも効率よく問題箇所を洗い出せるので、運用・保守の現場では重宝される手法です。

ユーザー入力のバリデーション

ユーザーが入力フォームに文字を入れたとき、その入力内容が想定した形式かどうかをチェックする場面はよくあります。

例えば「メールアドレスに @ が含まれているかを確認する」「パスワードに特定の文字列が含まれているかを確認する」など、多種多様なバリデーションが存在します。

こうした場面では、match() や test()（RegExp オブジェクトのメソッド）を組み合わせて、想定外の入力を弾くことができます。

大小文字や数字、記号のルールがある場合でも正規表現で柔軟に対処しやすいです。

テキスト処理やタグ解析

HTMLやマークダウンなど、テキスト形式のデータから特定のタグや構文を抽出したいケースがあります。

例えば <script> タグの中身を取り出したい、あるいはマークダウンのリンク部分を探し出したいなど、さまざまなニーズが考えられます。

matchAll() を使うことで、同じ形式の記述を一括で抜き出し、まとめて別の変換を加えるといった応用が可能です。

一方で、HTMLのように複雑なネスト構造があるものを正規表現だけで処理しようとすると、思わぬ抜けや不備が起きやすいです。

あまりに複雑なタグ解析が必要な場合は、専用のパーサーを利用するか、HTMLパース機能を備えたライブラリを検討するほうが安全です。

大文字・小文字の違いをどう扱うか

先ほどの例にもあったように、JavaScriptの文字列検索はデフォルトで大小文字を区別します。

しかし、実務では「英語の大小を区別せずに検索したい」場面がしばしばあります。

この場合、正規表現のフラグ i（ignore case） を使えば簡単に実装できます。

コピー
const text = "JavaScript, JAVAscript, javascript";
const pattern = /javascript/gi; 
const matches = text.match(pattern);
console.log(matches);
// ["JavaScript", "JAVAscript", "javascript"]

このように、大小文字の区別をしない検索は特にユーザーが入力するデータを扱う場合に便利です。

たとえば、ログインIDやユーザー名などでは、大文字で入力しても正しく処理されるようにするケースがあります。

一方で、パスワードや一部のコード入力などでは大小文字の差を正確に取り扱う必要があるので、要件をきちんと整理して使い分けることが大切です。

部分一致と完全一致の違い

文字列検索には「部分一致」と「完全一致」という考え方があります。

例えば indexOf() や includes() は基本的に部分一致の確認になります。

「'abc' という文字列を含むかどうか」という確認がしやすい反面、「文字列全体が 'abc' と等しいか」は別の方法（例えばシンプルに text === "abc" で比較）を使う必要があります。

正規表現でも、/^abc$/ のように書けば「文字列全体が 'abc' である場合にのみマッチさせる」ことが可能です。

この違いを理解していないと、想定外に部分的にマッチしてしまい、エラーを誘発する場合があります。

特にバリデーション処理などで完全一致を意図しているのに部分一致になっていると、バグの原因になりやすいです。

検索後の置換と抽出

文字列を検索するだけでなく、そのまま置換処理を続けて行うニーズも実務ではよく出てきます。

JavaScriptでは replace() や replaceAll() といったメソッドで、検索対象を別の文字列に差し替えることができます。

コピー
const text = "foo bar baz foo bar";
const result = text.replace(/foo/g, "FOO");
console.log(result);
// "FOO bar baz FOO bar"

ここでは正規表現の /foo/g にマッチする箇所すべてを "FOO" に置き換えています。

また、置換処理とともに、マッチした部分のグループ情報を使って新しい文字列を生成することも可能です。

例えば、日付フォーマットを変換したり、部品番号を取り出してメッセージを作ったりといった応用が考えられます。

これらの関数を組み合わせていくと、文字列処理の幅がさらに広がります。

文字列検索のパフォーマンスとベストプラクティス

文字列検索は、短いテキストを扱う範囲ではあまりパフォーマンス面を気にしなくても問題ありません。

ただし、膨大なテキストや高頻度の検索が要求される場面では、以下のような点を念頭に置くと良いでしょう。

1. 必要以上に複雑な正規表現を使わない

複雑なパターンほど処理に時間がかかり、可読性も低下します。

2. 正規表現リテラルを使うか、RegExpオブジェクトを再利用するか検討する

毎回正規表現を生成するより、一度コンパイルしたものを再利用するほうが高速に動作する場合があります。

3. 文字列の前処理を行う

大文字小文字を区別しない場合などは、あらかじめ文字列を toLowerCase() に揃えてから検索するほうが管理しやすいケースが多いです。

4. 部分的な検索を効率化する

テキスト全体ではなく、一部のセクションに対してだけ検索を実行するなど、必要最小限の範囲で検索をする工夫を凝らすと負荷が減ります。

実務でありがちなエラー例

文字列検索に関連して、ありがちなエラー例をいくつか挙げます。

1. 大小文字の扱いミス

本来は大文字小文字を区別しない検索をしたいのに、フラグ i をつけ忘れて誤った結果が出ることがあります。

2. 部分一致 vs 完全一致の混乱

indexOf() で部分一致を調べたつもりが、実は === 比較をしないといけなかったケースなどです。

3. 正規表現フラグの付け忘れ

match() を使う時に /g をつけ忘れて最初の一件しか取得できない、matchAll() を正規表現のフラグ g なしで使おうとしてエラーが出るなど、フラグの細かい設定ミスは初心者に多いです。

ケースごとに使い分けるためのまとめ表

文字列検索に役立つメソッドを、簡単なまとめ表で整理しておきましょう。

この表を参考に、目的に応じて最適なメソッドを選んでみてください。

エラーや不具合を減らすためのポイント

大文字と小文字の使い分け

本当に区別が必要か、事前に要件を確認することが重要です。

完全一致の必要性

ユーザーIDや特定のキー値を厳密に判定する場合は、単なる部分一致ではなく全体比較が必要となります。

複数箇所の取得か単一箇所の取得か

indexOf() や search() で事足りるのか、match() や matchAll() を使わないといけないのかを事前に検討すると、意図しない結果を防げます。

パターンの可読性

正規表現が複雑になりそうな場合は、早い段階からコメントや変数分割で可読性を確保しておくほうがトラブルシューティングしやすいです。

実務上のトラブルシューティング例

ログ解析の現場では、指定したパターンで検索しても思うようにヒットしない、あるいは逆に不要な部分までヒットしてしまう、といったトラブルがたびたび起きます。

例として、[A-Z]+ と書いたつもりが [A-z]+ と書いてしまい、予期せぬ文字（[ や \ など）までマッチ対象になってしまうケースがあります。

このような些細なタイポでも検索結果は大きく変わります。

また、ノイズデータが多い場合は、なるべく具体的なパターンに絞るか、事前にテキストを分割してから検索するなどの工夫をするとスムーズです。

運用現場では、データ形式が最初の想定から変わることも珍しくありません。

その場合、正規表現を修正するだけで対応できるのか、あるいはログファイルを出力しているプログラムの仕様を変更しないと根本解決にならないのかを慎重に見極める必要があります。

このように、文字列検索は設定だけで完結する単純な操作に見えて、実際の業務では周辺の実装と合わせて運用が必要になるケースが多いです。

まとめ

ここまで、JavaScriptで文字列を検索するさまざまな方法を見てきました。

最初はシンプルな indexOf() や includes() で部分一致を調べるところから始め、より複雑なパターンを扱うときには正規表現を使うアプローチが定番です。

実務ではログ解析やユーザー入力のバリデーションなど、多岐にわたるシーンで文字列検索が活躍します。

一方で、大文字・小文字の区別や部分一致と完全一致の違いなど、細かい仕様をうっかり見落としてしまうと、バグや想定外の挙動につながることがあります。

あらためて重要なポイントを整理すると、次のようになります。

メソッドを使い分ける

単純に含まれているかを確認したいなら includes()、特定の位置を知りたいなら indexOf() や search()、複数結果を取得したいなら match() や matchAll() が向いています。

正規表現の可読性に配慮する

複雑なパターンは保守が難しくなるため、必要に応じてコメントや変数化で整理すると良いでしょう。

大小文字の扱い

大文字小文字を区別するかどうかを明確に決め、場合によっては正規表現フラグ i や toLowerCase() などを使って対処します。

実務のデータ特性を把握する

文字コードやフォーマットのルールが変わりやすい場合は、定期的な見直しが必要になることを意識しましょう。

これらを踏まえておけば、コード量が増えてきても適切な文字列検索を実装しやすくなります。

皆さんもぜひ、実際の場面で試してみて、使い勝手やコツを体得していってください。