こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトの私ですが、今日は肩の力を抜いて、JavaScriptの文字あそび、いや「文字列操作」の世界へあなたをご案内しますね。
プログラミングを始めたばかりの頃って、画面に並ぶ英語や記号を見るだけで、なんだかツンとすました機械に拒絶されているような、そんな寂しい気持ちになりませんか？「エラー」なんて文字が出ようものなら、そっとブラウザを閉じたくなる気持ち、よく分かります。
でも、大丈夫ですよ。今日は一緒に、JavaScriptの便利な道具箱の中から`search()`（サーチ）というメソッドを取り出して、優しく紐解いていきましょう。あなたのペースで、ゆっくりコーヒーでも飲みながら読んでいってくださいね。
—
そもそも `search()` ってなにをするもの？
私たちが普段、本を読むときに「あれ、あの言葉はどこに書いてあったっけ？」とページをペラペラめくって探しますよね。あるいは、スマートフォンの連絡先アプリで「たなか」と打ち込んで、お目当ての友達の名前をピタッと探し出すあの感覚です。
あれをプログラムの世界でやってくれるのが、この `search()` メソッドなんです。
一言でいうと、「文章（文字列）の中から、自分が探したい目印（正規表現）が最初に見つかった場所はどこ？」と探して、その場所の「住所（インデックス番号）」を教えてくれる優れものです。
身近な例えでお話をしましょう
例えば、あなたが街の洋服屋さんで、長い「レシート（文字列）」を握りしめているとします。
「あ、このレシートの中のどこかに『Tシャツ』っていう文字が最初に登場するのは何文字目だっけ？」と調べたいとき、レシートの頭から指で1文字ずつ数えていくのは大変ですよね。
そんなとき、`search()` は、一瞬で「あ、それは左から数えて15番目のところにあるよ！」と、指をズバッと差して教えてくれる敏腕スタッフのような存在なんです。
—
実際にコードを書いて、動きを見てみよう
百聞は一見にしかず。まずは、実際に動くコードを書いてみましょう。
以下のコードをそのままコピーして、ブラウザの検証ツール（コンソール画面）などに貼り付けてみてくださいね。
// お買い物のメッセージを用意します
const message = “ようこそ！本日の特売品は「赤いTシャツ」です。”;
// メッセージの中から「Tシャツ」という文字が最初に登場する場所を探します
// （ここでは普通の文字をそのまま探しています）
const foundIndex = message.search(“Tシャツ”);
// 結果をコンソールに表示してみましょう
console.log(foundIndex); // 画面には「18」と表示されます（※数え方は後で解説しますね！）
どうですか？「18」という数字が出てきましたか？
「おっ、ちゃーんと見つけてくれた！」と、なんだかちょっと可愛く思えてきませんか？
ちょっと待って！プログラミングの数え方のルール
ここで、JavaScriptならではの「ちょっとしたクセ」についてお話ししておきますね。ここ、初学者の人が一番つまずきやすいポイントなんですが、知っていればもう怖くありません！
人間はふだん、数を数えるときに 「1、2、3、4……」 と1から数えますよね。
でも、JavaScriptをはじめとするプログラミングの世界では、「0、1、2、3……」 と 「0」から数える のがルールなんです。
- 人間の数え方：1文字目、2文字目、3文字目……
- プログラミングの数え方：0番目、1番目、2番目、3番目……
先ほどの `message` の例でいうと、一番最初の「よ」という文字が「0番目」になります。そこから数えて18番目に「T」の文字がいるよ、と `search()` は教えてくれているわけですね。この「0から始まるんだな」という感覚、頭の片隅にそっと置いておいてあげてください。
—
見つからなかったときはどうなるの？（ここが重要！）
さて、ここからが少し大切なお話です。
もし、探したい文字がレシート（文字列）の中にどこにもなかった場合、`search()` はどうすると思いますか？
「見つかりませんでした！」と優しく日本語で教えてくれたら親切なんですが、そこはクールなプログラミング言語。無言でこう返してきます。
「 `-1` （マイナスイチ）」
const message = “本日の特売品はパーカーです。”;
// 「Tシャツ」を探してみるけれど……どこにもいない！
const foundIndex = message.search(“Tシャツ”);
console.log(foundIndex); // 画面には「-1」が表示されます
この「`-1`」という数字を見かけたら、「あ、お目当てのものは見つからなかったんだな」 という合図だと受け取ってくださいね。現場のプログラマたちも、この「`-1` が返ってきたらエラー処理をしよう」というお約束を毎日のように使っています。
—
`search()` の本当のパワー：正規表現を使ってみよう
ここまで読んで、「あれ？ 普通の文字を探すだけなら、他のメソッド（`indexOf()` など）でもよくない？」と思ったあなた。鋭いですね！その通り、普通の文字を探すだけなら他の方法でもできます。
では、なぜわざわざ `search()` という名前がついているのか？
それは、「正規表現（せいきひょうげん）」 という、ちょっと強力な検索ルールを使えるからです。
正規表現というのは、例えば「具体的な文字」ではなく、
- 「数字が3つ並んでいる場所を探したい」
- 「アルファベットの小文字から始まるところを探したい」
といった、「あいまいな条件」や「パターン」を指定して探し出すための魔法の呪文のようなものです。
const text = “私のラッキーナンバーは 777 です！”;
// 「数字が連続している場所」を探す正規表現のパターンです
// \d+ は「数字の塊」を意味します
const numberIndex = text.search(/\d+/);
console.log(numberIndex); // 「11」と表示されます（「7」が始まる位置）
「うわっ、なんだか急に難しそうな記号（`/\d+/`）が出てきたぞ……」と思いましたか？
大丈夫です、安心してください。今の段階では、「`search()` は、こういうちょっと複雑なパターンの検索も得意なんだな」と知っているだけで100点満点です。
—
まとめ：今日のおさらいと、あなたへ贈る言葉
今日は、JavaScriptの文字列検索メソッド `search()` についてお話ししました。
1. 文章の中から目印が最初に登場する「住所（インデックス）」を教えてくれるもの。
2. 数え方は「0番目」からスタートする。
3. 見つからなかったときは、悲しみの「 `-1` 」が返ってくる。
4. 正規表現という、ちょっとした応用技も使える頼もしいやつ。
Web制作やプログラミングの学習を進めていると、「思うように動かないな」「覚えることが多くてパンクしそうだな」と、立ち止まりたくなる夜もあると思います。
でも、焦る必要は全くありません。今日知った「`-1` が返ってくるんだな」という小さな引き出しを一つ持っているだけで、あなたは昨日よりも確実に一歩前へ進んでいます。
エラーが出ても、それはあなたが新しい挑戦をしている証拠です。失敗を恐れず、自分のペースで楽しくコードを書いていってくださいね。あなたのプログラミングの旅を、私はいつも応援しています！
コメント