こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私です。
JavaScriptの世界へようこそ！毎日コードを書いていると、画面に表示する文字（文字列）をあっちへ動かしたり、こっちへ書き換えたりと、文字との格闘の連続です。その中でも「あ、この文章の中に、あの言葉が入っているか調べたいな」という瞬間、本当によくありますよね。
昔のJavaScriptだと、「なんか見つからなかったら `-1` っていう変な数字が返ってくるから、それを条件分岐に使って……」という、初心者泣かせの少し回りくどい書き方をしなければなりませんでした。
ですが、ご安心ください！今のJavaScriptには、私たちの強い味方である `String.prototype.includes()` という、超直感的で優しいメソッドが用意されています。
今回は、この `includes()` の基本から、ちょっと便利な裏技（開始位置の指定）まで、身近な例えを交えながら一緒に紐解いていきましょう。難しいことは考えず、リラックスして読んでいってくださいね！
—
1. `includes()` ってどんなもの？（身近な例えでお話します）
いきなり難しいプログラミング用語を並べるのはやめましょう。
あなたが近所のスーパーで、お目当ての商品を探しているところを想像してみてください。
目の前には、たくさんの商品が並んだカゴ（文字列）があります。あなたは「りんご」という文字（探したい言葉）が入っているかどうかを確認したいのです。
- カゴの中に「りんご」があれば `true`（はい、入っています！）
- カゴの中に「りんご」がなければ `false`（いいえ、見当たりません……）
`includes()` は、まさにこれをしてくれるメソッドです。検索結果を「はい・いいえ（真偽値）」でスパッと返してくれる、とても分かりやすい性格をしています。
基本の書き方を見てみよう
百聞は一見に如かず。実際にコードを見てみましょう。あなたのブラウザのコンソールや、エディタにそのまま貼り付けて動かせるサンプルです。
// 探す対象となる文章（文字列）を用意します
const message = “今日は良いお天気ですね。リンゴを食べよう！”;
// 「リンゴ」という言葉が含まれているか調べます
const hasApple = message.includes(“リンゴ”);
console.log(hasApple);
// 出力結果は？ -> true （入っています！）
どうでしょう？「`message`（メッセージ）の中に、`includes`（含まれていますか？） `リンゴ` が？」と、まるで英語を読んでいるかのようにスッと頭に入ってきませんか？
もし、ここが「みかん」だったとしたら、結果は `false` になります。
const hasOrange = message.includes(“みかん”);
console.log(hasOrange);
// 出力結果は？ -> false （入っていませんね）
—
2. ここでよくある「つまずきポイント」をそっとフォロー
プログラムを書き始めると、誰もが一度は「あれ？コードは間違ってないはずなのに、なぜか `false` になる……」という壁にぶつかります。大丈夫、それはあなたが悪いのではなく、JavaScriptが真面目すぎるせいなのです。
ここで、よくあるつまずきを2つほどご紹介しておきますね。
つまずき①：大文字と小文字、そして全角と半角の罠
JavaScriptは、文字の形（大文字・小文字、全角・半角）をめちゃくちゃ厳密に区別します。人間なら「どっちも同じでしょ」と見逃してくれることでも、機械は許してくれません。
const text = “I love JavaScript!”;
console.log(text.includes(“javascript”));
// 出力: false （’J’ と ‘j’ が違うので見つけてもらえません……！）
【対策】
もしユーザーが入力した文字を検索するような場面で、大文字・小文字を区別したくない場合は、あらかじめ両方を小文字に変換（`toLowerCase()` を使用）してから `includes()` でチェックするというテクニックが現場ではよく使われます。まずは「形が完全に一致してないと見つからないんだな」と覚えておけばバッチリです！
つまずき②：全角・半角のスペース
「文字の中に『お疲れ様』が入っているか」を調べたいとき、実は知らないうちに文の頭や後ろに半角スペース（ ` ` ）が入っていて一致しない、というのも初心者のころによくあるトラップです。エラーが出ないだけに厄介ですが、落ち着いて前後のスペースを疑ってみてくださいね。
—
3. ちょっとステップアップ：開始位置を指定してみよう
さて、基本が分かったところで、もう少しだけ便利な使い方をご紹介します。
`includes()` には、実は2つ目の引数（カッコの中の2番目の要素）として、「どこから探し始めるか（開始位置・インデックス）」 を指定することができます。
先ほどのスーパーの例えに戻りましょう。
「カゴの中の、後半の方だけに『りんご』が入っているか調べたい」というときに使えます。
const sentence = “バナナとリンゴとみかんとリンゴ”;
// 最初から「リンゴ」を探す場合
console.log(sentence.includes(“リンゴ”));
// 出力: true （最初に見つかった時点で true になります）
// 【重要】index 5 の場所（文字）よりも後ろから探す場合
// ※文字の数え方は 0番目、1番目、2番目… とスタートします
console.log(sentence.includes(“リンゴ”, 10));
// 出力: true （10文字目以降にもリンゴがいますね）
この「開始位置の指定」は、Web制作の実務だと、例えば「長ーい利用規約の文章の中で、特定のキーワードが後半部分にも重複して使われていないかチェックしたい」といったシーンで、こっそりと役立ってくれたりします。最初は「そんな機能もあるんだな〜」と心の片隅に置いておくくらいで全く問題ありません！
—
最後に：焦らず、一歩ずつ進んでいきましょう
ここまで `String.prototype.includes()` についてお話ししてきましたが、いかがでしたか？
文字の検索というのは、Webサイトの検索窓や、フォームの入力チェックなど、あらゆる場面で顔を出す基本中の基本の機能です。それをこんなにシンプルに、人間にとって分かりやすい言葉で書ける `includes()` は、本当に優秀なメソッドです。
最初は「大文字と小文字で引っかかった！」なんて失敗もたくさんするはず。でも、それこそがプログラミングを体に覚え込ませる一番の近道です。失敗した数だけ、あなたのコードは確実に強くなっていきます。
今日学んだ `includes()` を使って、ぜひご自身のエディタで色々な言葉を検索してみてくださいね。
あなたのJavaScriptの旅が、これからも楽しくワクワクするものでありますように。それでは、次の現場でお会いしましょう！
コメント