こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私ですが、今日はJavaScriptの文字列操作、その中でも初心者の壁になりやすい「`indexOf()`（インデックス・オブ）を使った文字の検索」について、現場の空気感を交えながら優しくお話ししたいと思います。
プログラミングを学び始めると、画面に文字を表示するだけでなく、「この文章の中に、お目当ての言葉が入っているかな？」と調べたくなる場面がたくさん出てきます。そんな時に頼りになるのが `indexOf()` なんですが……これがまた、ちょっとした「ツンデレ」な仕様を持っていて、最初はみんなここで一度つまずくんです。
でも、大丈夫ですよ！今日のこの記事を読み終える頃には、「なーんだ、そういうことか！」とスッキリ腑に落ちているはずです。一緒にゆっくり紐解いていきましょう。
—
そもそも `indexOf()` ってどんなもの？
`indexOf` を直訳すると、「何番目にあるか（インデックス）を調べる」という意味になります。
身近な例えで考えてみましょう。
あなたの机の引き出しの中に、色々な文房具がごちゃっと入っているとします。そこに「消しゴム」が入っているかどうかを探したいとき、あなたはどうしますか？
引き出しをガラッと開けて、左から順に「あ、これハサミ、これペン、あ、あった！左から3番目に消しゴムだ！」と探しますよね。
JavaScriptの `indexOf()` も、まさにこれと全く同じことをやっているんです。
コンピュータの世界では、数えるときは「1番目、2番目……」ではなく、「0番目、1番目、2番目……」と「0」から数え始めるというお約束（ゼロベース・インデックス）があります。そこだけちょっと心に留めておいてくださいね。
—
基本の使い方を見てみよう
百聞は一見にしかず、実際のコードを見てみましょう。
例えば、「私はJavaScriptの勉強をしています」という文章の中から、「JavaScript」という言葉がどこにあるかを探したいとします。
// 探したい元の文章を用意します
const text = “私はJavaScriptの勉強をしています”;
// “JavaScript” が何番目にあるかを探して！とお願いする
const result = text.indexOf(“JavaScript”);
console.log(result); // コンソールには何が表示されるでしょうか？
さて、これを実行すると、画面には 「2」 という数字が表示されます。
「えっ、『私』が0番目、『は』が1番目だから……あれ、合ってる？」と指折り数えた方、大正解です！
- 0番目：私
- 1番目：は
- 2番目：J
- 3番目：a
- …（以下略）
このように、探したい言葉が「何番目の文字から始まっているか」を、左端をスタート地点（0）として教えてくれるのが `indexOf()` の基本の仕事です。
—
初学者が全員ハマる！「見つからないときは -1 が返る」というトラップ
さて、ここからが少し重要なお話です。現場のコードレビューをしていても、この仕様を知らなくてバグを生んでしまう初心者の姿をよく見かけます。
もし、引き出しの中に探しているものが入っていなかったら、あなたはどうしますか？「あれ、ないや」って思いますよね。
JavaScriptも同じです。例えば、さっきの文章の中に「Python」という言葉が入っているか探してみましょう。
const text = “私はJavaScriptの勉強をしています”;
// 文章の中に “Python” は……入っていませんよね
const result = text.indexOf(“Python”);
console.log(result); // さあ、何が表示されるでしょう？
答えは、`-1`（マイナス1） です。
ここが、プログラミング初心者の最初の関門！
「えっ、エラーで止まるわけじゃないの？」
「『0』なら見つかったってことになりそうだけど、なんでマイナスなの？」
そう思いますよね。でも考えてみてください。
文字の位置（インデックス）は、0番目、1番目、2番目……と、絶対に「0以上のプラスの数字」になります。つまり、「絶対にありえない位置（マイナスの値）」をあえて返すことで、「うーん、探したけどどこにも見当たらなかったよ！」というサインを私たちに送ってくれているんです。
この `-1` という数字に出会ったときは、「あ、お目当てのものは見つからなかったんだな」と優しく受け止めてあげてください。
—
実践！見つかったかどうかで処理を分岐させてみよう
この「見つかったら位置の数字（0以上）」と「見つからなかったら `-1`」という性質を利用して、実際のWebサイトやアプリでは「もし〇〇が含まれていたら、こういう画面にする」という分岐を作ることができます。
例えば、ユーザーが入力したコメントの中に、禁止ワード（ここでは「秘密」という言葉としましょう）が入っていないかをチェックする簡単なコードを書いてみますね。
const userComment = “今日はとても楽しい一日でした！”;
// コメントの中に「秘密」という文字があるか探す
const searchResult = userComment.indexOf(“秘密”);
// 見つかったかどうかを判定する
if (searchResult !== -1) {
// searchResult が -1 ではない（＝見つかった）場合
console.log(“警告：その言葉を含めることはできません！”);
} else {
// searchResult が -1 である（＝見つからなかった）場合
console.log(“コメントを投稿しました！”);
}
このコードでは、`userComment.indexOf(“秘密”)` の結果が `-1` ではない（つまり、言葉が見つかってしまった）場合に警告を出すようにしています。
実務の現場でも、こうした条件分岐は文字のバリデーション（入力チェック）の基本として毎日のように使われています。
—
最後に：完璧に覚えられなくても大丈夫ですよ
ここまで `indexOf()` の使い方とお約束（`-1` の存在）についてお話してきましたがいかがでしたでしょうか？
「文字のスタート位置を教えてくれるんだっけ？」
「見つからないときは `-1` だったっけ？」
最初は誰だって忘れます。私も新人の頃は、メモを見ながらコードを書いたり、「あれ、なんで動かないんだろ？」とコンソール画面を何時間もにらめっこしたりしていました。つまずくのは、あなたがしっかりとコードに向き合っている証拠です。
もし忘れてしまっても、またこのページを開きに戻ってきてくださいね。
あなたのペースで、一歩一歩JavaScriptと仲良くなっていきましょう！応援しています。
コメント