こんにちは！フロントエンドの現場で、日々コードと格闘しているチーフアーキテクトです。
JavaScriptを触り始めると、必ず一度はぶつかる壁があります。「文字列の中に特定の文字があるか調べたいけど、メソッドがたくさんあってどれを使えばいいの？」という悩みです。
特に、`indexOf()` と `search()`。この二つ、やっていることは似ているのに、実は中身の「性格」が全然違うんです。今日は、この二つの違いを、現場のリアルな感覚を交えて紐解いていきましょう。大丈夫、少しずつ整理すれば必ず使いこなせるようになりますよ。
—
1. `indexOf()` は「単語帳で単語を探す」イメージ
まずは `indexOf()` から見ていきましょう。これは、非常にシンプルで「正直者」なメソッドです。
「この文字、この文章の中の何番目にある？」と聞くと、その位置を数字（インデックス）で返してくれます。もし見つからなければ `-1` を返します。
どんな時に使う？
「特定のキーワードが完全に一致するかどうか」を知りたい時に最適です。余計なことは一切せず、ただ指定した文字列を突き止めるだけ。だから動作が軽快なんです。
const text = “今日のお昼はカレーライスです”;
// “カレー” という言葉が含まれているか確認
const index = text.indexOf(“カレー”);
if (index !== -1) {
console.log(`カレーは見つかりました！${index}番目からです。`);
} else {
console.log(“カレーはどこにもいないみたい…”);
}
—
2. `search()` は「探偵を雇って捜査する」イメージ
次に `search()` です。こいつは `indexOf()` と違って、「正規表現（ルール）」を受け取ることができます。
正規表現というのは、例えば「数字が含まれているか？」「メールアドレスの形式になっているか？」といった、複雑な条件のことです。`search()` は、単なる文字探しではなく、「どんな形式の文字列か？」という謎解きが得意な探偵のような存在です。
どんな時に使う？
「特定の文字」そのものではなく、「数字が含まれていたら」とか「大文字小文字を区別せずに探したい」といった、柔軟な条件で探したい時に力を発揮します。
const text = “私の背番号は24番です”;
// 数字がどこかに入っているか？を正規表現（/\d/）で検索
// 「数字(\d)を検索しろ！」という司令を出しています
const index = text.search(/\d/);
console.log(`数字は${index}番目に発見されました！`);
—
3. なぜこの二つを使い分ける必要があるの？
初心者の方が一番迷うのがここですよね。「じゃあ全部 `search()` でいいじゃないか！」と思ってしまうかもしれませんが、そこにはプロが重視する「二つの理由」があるんです。
理由1：パフォーマンス（重さ）の違い
`indexOf()` は単純な「一致確認」をするだけなので、コンピュータにとって負担が非常に少ないです。一方で `search()` は正規表現という高度な計算を行うため、ただの文字検索に使うには少しだけ「重い」処理になってしまいます。
例えるなら…
- indexOf: 家の鍵を、決まったフックにかける（速い！）
- search: 家の鍵を、家中の部屋から「鍵っぽいもの」を探索して探す（ちょっと時間がかかる）
理由2：コードの読みやすさ
コードは「誰が読んでも一瞬で意図が伝わる」ことが一番の正義です。
「あ、この人は単純な文字を探しているんだな」と伝えたい時は `indexOf()` や `includes()` を使うのが、チーム開発では親切な書き方になります。
—
最後に：迷った時はこう選ぼう！
もし、あなたが今コードを書いているなら、まずはこう考えてみてください。
1. 「ただの文字が含まれているか知りたいだけ」
→ `indexOf()` か、もっと直感的に「含まれているか（true/false）」を返してくれる `includes()` を使おう！
2. 「数字が混じっているか？とか、特定のパターンで探したい」
→ `search()` を使って、正規表現の力を借りよう！
最初はどれを使っても難しく感じるかもしれませんが、大丈夫です。何度も書き直して、エラーを出して、画面を真っ白にして……そうやって体で覚えていくのがJavaScriptの上達の近道です。
皆さんのコードが、今日も明日も軽やかに動きますように。何か詰まったら、いつでもまた聞きに来てくださいね！応援しています。
コメント