JavaScriptで文字列検索を実装する5つの方法

こんにちは、とまだです。

みなさん、ユーザーが入力したテキストに不適切な単語が含まれていないかチェックしたり、検索機能を実装したりする場面に遭遇したことはありませんか？

実は、こうした文字列検索の処理は、Webアプリケーション開発の中でも特に頻繁に使われる基本技術なんです。

今回は、JavaScriptで文字列検索を行う代表的な5つの方法について、それぞれの特徴と使い分けを解説します。

文字列検索が必要になる理由

そもそも、なぜ文字列検索が重要なのでしょうか。

身近な例で考えてみましょう。

たとえば、ユーザーがフォームに入力した内容を想像してください。

メールアドレスの入力欄に「@」が含まれているかチェックしたい。

コメント欄に不適切な言葉が含まれていないか確認したい。

検索ボックスに入力されたキーワードと一致する商品を探したい。

これらはすべて、文字列の中から特定の文字や単語を見つける処理です。

つまり、文字列検索は「ユーザーとシステムをつなぐ重要な架け橋」なんです。

適切な検索処理を実装することで、ユーザーにとって使いやすく、安全なWebサービスを作ることができます。

1. includes()メソッド - 最もシンプルな存在確認

最初に紹介するのは、includes()メソッドです。

このメソッドは「文字列の中に特定の文字が含まれているか」を調べる最もシンプルな方法です。

使い方も直感的で、初心者の方にも理解しやすいのが特徴です。

const text = 'JavaScriptプログラミング入門';
const keyword = 'JavaScript';

if (text.includes(keyword)) {
    console.log('キーワードが見つかりました');
}

このコードでは、「JavaScriptプログラミング入門」という文字列の中に「JavaScript」が含まれているかを調べています。

includes()の返り値はtrueまたはfalseの真偽値です。

そのため、if文の条件として直接使えるんです。

ただし、includes()には注意点があります。

大文字と小文字を区別するため、「javascript」と「JavaScript」は別の文字として扱われます。

この問題を解決するには、事前に文字列を統一する必要があります。

const text = 'JavaScript入門';
const keyword = 'javascript';

if (text.toLowerCase().includes(keyword.toLowerCase())) {
    console.log('見つかりました');
}

toLowerCase()を使って両方を小文字に変換してから比較することで、大文字小文字を気にせず検索できるようになります。

2. indexOf()メソッド - 位置情報も一緒に取得

次に紹介するindexOf()は、文字列が「どこにあるか」も教えてくれるメソッドです。

includes()が「あるかないか」だけを返すのに対し、indexOf()は「何文字目にあるか」という位置情報を返します。

const message = 'エラー: ファイルが見つかりません';
const errorKeyword = 'エラー';

const position = message.indexOf(errorKeyword);
if (position !== -1) {
    console.log(`${position}文字目に見つかりました`);
}

indexOf()の特徴的な点は、見つからなかった場合に-1を返すことです。

これは少し特殊な仕様ですが、歴史的な理由から多くのプログラミング言語で採用されている慣習です。

なぜ位置情報が必要になるのでしょうか。

たとえば、エラーメッセージの種類を判定する場合を考えてみましょう。

メッセージの最初に「エラー」という文字があれば重大なエラー、途中にあれば警告レベル、といった判定ができます。

また、indexOf()にはlastIndexOf()という兄弟メソッドもあります。

これは文字列を後ろから検索して、最後に出現する位置を返します。

ファイルパスから拡張子を取り出すときなどに便利です。

3. search()メソッド - 正規表現で柔軟な検索

ここまでは単純な文字列の検索でしたが、もっと複雑なパターンを検索したい場合はどうすればよいでしょうか。

そんなときに活躍するのがsearch()メソッドです。

search()は正規表現を使った検索が可能で、より柔軟な条件で文字列を探せます。

const email = 'user@example.com';
const pattern = /@/;

const position = email.search(pattern);
if (position !== -1) {
    console.log('メールアドレスの形式です');
}

この例では、@マークを探していますが、search()の真価は複雑なパターンマッチングで発揮されます。

たとえば、電話番号のような特定の形式を検索する場合です。

日本の携帯電話番号は「090-1234-5678」のような形式ですよね。

この形式に合致する文字列を探すには、正規表現を使います。

正規表現と聞くと難しく感じるかもしれませんが、基本的なパターンを覚えれば、強力な検索ツールになります。

4. match()メソッド - マッチした内容を取得

search()が位置を返すのに対し、match()は実際にマッチした文字列を返します。

これは「どこにあるか」よりも「何が見つかったか」を知りたい場合に便利です。

価格表示から金額を抽出する場合を考えてみましょう。

「価格は1,500円です」という文字列から「1,500円」を取り出したいとします。

match()を使えば、このような抽出処理が簡単に実現できます。

さらに、グローバルフラグ(g)を使うことで、文字列内のすべてのマッチを配列として取得できます。

これは、文章中から複数のキーワードを一度に抽出したい場合に特に有効です。

5. test()メソッド - 正規表現での存在確認

最後に紹介するtest()は、少し特殊なメソッドです。

これまでのメソッドは文字列のメソッドでしたが、test()は正規表現オブジェクトのメソッドです。

使い方が逆になるので注意が必要ですが、パターンマッチングの存在確認に特化しています。

test()の利点は、純粋に「マッチするかしないか」だけを調べることに特化している点です。

位置や内容は必要なく、単に条件を満たすかどうかだけを確認したい場合に最適です。

特にバリデーション処理でよく使われます。

メールアドレスの形式チェック、電話番号の形式チェックなど、入力値が正しい形式かどうかを判定する場面で活躍します。

実務での使い分けガイド

ここまで5つのメソッドを紹介しましたが、実際にはどう使い分ければよいのでしょうか。

それぞれのメソッドには得意な場面があります。

includes()は最もシンプルで、コードの可読性を重視する場合に最適です。

「この文字列に○○が含まれているか」という意図が一目で分かります。

チーム開発では、このような分かりやすさが重要になります。

indexOf()は位置情報が必要な場合や、古いブラウザへの対応が必要な場合に使います。

IE11などのレガシーブラウザでも動作するため、幅広い環境で使える安心感があります。

正規表現を使うメソッド（search、match、test）は、より複雑な条件での検索が必要な場合に使います。

ただし、正規表現は強力な分、処理速度が遅くなる可能性があります。

単純な文字列検索で済む場合は、includes()やindexOf()を使う方が効率的です。

エラーハンドリングのポイント

文字列検索を実装する際、忘れてはいけないのがエラーハンドリングです。

予期しない入力への対処を怠ると、アプリケーションがクラッシュする原因になります。

最も多いエラーは、null やundefinedに対して文字列メソッドを呼び出すケースです。

ユーザー入力やAPIレスポンスは、常に期待通りの値が来るとは限りません。

そのため、メソッドを呼び出す前に、値が文字列であることを確認する習慣をつけましょう。

また、空文字列の扱いも注意が必要です。

空文字列に対してincludes('')を実行すると、常にtrueが返ります。

これは仕様として正しい動作ですが、意図しない結果になることがあります。

事前に空文字列チェックを入れることで、このような問題を防げます。

パフォーマンスを意識した実装

最後に、パフォーマンスについても触れておきましょう。

少量のデータであれば気にする必要はありませんが、大量のデータを扱う場合は注意が必要です。

正規表現は便利ですが、複雑なパターンになるほど処理時間が増加します。

特に、バックトラッキングが発生するようなパターンは避けるべきです。

単純な文字列検索で済む場合は、includes()やindexOf()を使いましょう。

また、同じ正規表現を繰り返し使う場合は、事前に正規表現オブジェクトを作成しておくことで、パフォーマンスを改善できます。

毎回新しく正規表現を作成するよりも、再利用する方が効率的です。

まとめ

JavaScriptの文字列検索メソッドについて解説しました。

用途に応じて適切なメソッドを選ぶことで、効率的で保守しやすいコードが書けます。

まずは基本的なincludes()から始めて、必要に応じて他のメソッドも試してみてください。

文字列検索は一見地味な処理ですが、ユーザー体験を大きく左右する重要な技術です。

適切に実装することで、より使いやすいWebアプリケーションを作ることができるでしょう。