こんにちは！フロントエンド・アーキテクチャの現場を長年歩んできた者です。
日々の開発現場では、ピカピカの新技術と同じくらい、こういう「JavaScriptの基礎的な組み込みメソッド」の挙動を正しく理解しているかどうかが、バグの少ない堅牢なコードを書くための分かれ道になります。
今回は、文字列操作の隠れた実力者である `String.prototype.lastIndexOf()` について、初心者のあなたが「なるほど！」と膝を打てるよう、現場の空気感を交えながら優しく紐解いていきますね。
「なんだか難しそう……」なんて身構える必要は全くありません。大丈夫ですよ、一つずつ一緒に見ていきましょう！
—
1. 文字列の「後ろから探す」ってどういうこと？
私たちが普段、JavaScriptで文字列を検索するときに真っ先に思い浮かぶのは `indexOf()` というメソッドじゃないかと思います。これは文字通り、文字列の「頭（左側）」から「お尻（右側）」に向かって、お目当ての文字を探すハンターのような存在です。
例えば、`”banana”` という単語の中から `”a”` を探すと、一番最初に見つかるインデックス（何番目か）の `1` を返してくれます。
じゃあ、「お尻（後ろ）から一番最初に見つかる場所を知りたい！」ときはどうすればいいでしょう？
「前から探して、見つかるたびに上書き保存する？」……うーん、それだとちょっとスマートじゃないですよね。
そこで登場するのが、今回の主役である `lastIndexOf()` です！
こいつは、文字通り文字列の「末尾（後ろ）」から「前方（前）」に向かって、逆走しながらお目当ての文字を探し出す、ちょっとユニークな探偵さんなんです。
身近な例えでイメージしてみよう
スーパーのレジの列を思い浮かべてみてください。
あなたが「最後に並んだ人（一番後ろの人）」から順に、「すみません、ポイントカードお持ちですか？」と声をかけながら、入り口（前）の方へ逆向きに進んでいく姿をイメージしてください。
`lastIndexOf()` はまさにこの動きです。
後ろから探していくので、同じ文字が文字列の中に何個かあったとしても、「一番お尻に近い場所（右側にあるもの）」を真っ先に見つけて、「ここにありましたよ！」と教えてくれるんです。
—
2. なぜ `lastIndexOf` が実務で重宝されるのか？
「前から探す `indexOf` があれば十分じゃないの？」
そう思うかもしれません。でも、Web制作や実際のアプリ開発をしていると、「後ろから探したい！」というシチュエーションに意外と直面するんです。
一番よくあるのが、「ファイルパス」や「URL」から拡張子やファイル名を取り出すときです。
例えば、こんな画像ファイルのパスがあったとします。
`images/banners/2023/summer_sale.jpg`
この文字列から、「最後のドット（.）の位置」を知りたいとします。なぜなら、そのドットより後ろがファイルの拡張子（`jpg`）だからです。
前から `indexOf(‘.’)` を使ってしまうと、`images` の中にあるスラッシュ……ではなく、もしフォルダ名にドットが含まれていたらそこでヒットしてしまいますし、何より最初のほうにあるドットが引っかかってしまいますよね。
こんなとき、後ろからドットを探してくれる `lastIndexOf(‘.’)` を使えば、ファイル名の直前にある一番最後のドットをズバッと一発で捉えることができるんです。これは実務でも本当によく使うテクニックですよ。
—
3. 実際のコードで動きを見てみよう！
百聞は一見にしかず。実際に手を動かして、その動きを確認してみましょう。
以下のコードをコピーして、ブラウザのコンソール（F12キーを押して出てくる画面の「Console」タブ）などにペーストして試してみてください。
// サンプルとなるファイルパスの文字列
const filePath = “downloads/documents/report_final.pdf”;
// 1. 普通に lastIndexOf を使って、最後のスラッシュ（/）を探す
const lastSlashIndex = filePath.lastIndexOf(‘/’);
console.log(lastSlashIndex);
// 出力結果: 19
// 解説: 左から数えて19番目に、最後のスラッシュが存在します。
// これを使えば、「フォルダのパス」と「ファイル名」をキレイにスパッと切り分けることができます！
// 2. 拡張子の「. (ドット)」を後ろから探す
const lastDotIndex = filePath.lastIndexOf(‘.’);
console.log(lastDotIndex);
// 出力結果: 31
// 解説: 拡張子の直前にあるドットの位置を正確にゲットできました。
つまずきやすいポイント：インデックスは「左から0番目」から始まる！
ここで、初心者の人が「あれっ？」と混乱しやすい重要なポイントをお伝えします。
`lastIndexOf` は「後ろから探す」のですが、見つかった場所を教えてくれるときの「数字の数え方（インデックス）」は、相変わらず「一番左（先頭）を 0」とした通常のものです。
- 探す方向： 右から左へ（逆走）
- 教える位置の基準： 左端を 0 とする通常のカウント
「後ろから探したんだから、後ろからの何番目か教えてよ！」と思ってしまいがちですが、JavaScriptは「左端から数えて〇文字目だよ」と教えてくれるので、ここだけは勘違いしないように注意してくださいね。これさえ分かっていれば、もうバッチリです！
—
4. もう一歩踏み込みたいあなたへ：第2引数（検索開始位置）の魔法
`lastIndexOf()` には、実はもう一つの顔があります。それは、「ここで終わり（ここまで戻る）」という検索開始位置を指定できる（第2引数を渡せる）という機能です。
const message = “apple banana apple orange apple”;
キノコ狩りのように、特定の範囲だけを後ろから探したいときに使います。
// 引数に「検索を開始したい位置（インデックス）」を指定できます。
// 例として、左から15番目の位置から、さらに左（前）に向かって探させます。
const result = message.lastIndexOf(“apple”, 15);
console.log(result);
// 解説: 15番目の文字の位置よりも前にある「apple」を探しに行きます。
「今回は文字列全体の最後からじゃなくて、もう少し手前のエリアだけに絞って後ろから探したいんだよな」という、ちょっとマニアックな要望にもこたえてくれる頼もしい奴なんです。最初は使い所がピンとこないかもしれませんが、「そんなこともできるんだな」と頭の片隅に入れておいてもらえれば十分です！
—
おわりに
お疲れ様でした！
`String.prototype.lastIndexOf()` のイメージ、掴めましたでしょうか？
- 文字列の「後ろから前へ」向かって検索する。
- 同じ文字が複数あるときは、「一番お尻に近い（右側にある）もの」を見つけてくれる。
- 見つかった位置の数字は、「左端を 0 とした通常のカウント」で返ってくる。
この3つさえ押さえておけば、文字列操作で困ったときに強力な武器になってくれます。
最初は「こんなメソッドいつ使うんだろう？」と思うかもしれませんが、実務でデータ整形やパスの解析をする時に「あ、ここで `lastIndexOf` が使えるじゃん！」と閃く瞬間が必ずやってきます。
その日まで、今日の知識をそっと心の中にしまっておいてくださいね。
あなたのJavaScriptの学習が、実り多い楽しいものになるよう、現場から応援しています！
コメント