こんにちは！JavaScriptの世界へようこそ。
フロントエンドの現場でコードを書いていると、「このファイルは画像かな？」「URLがこのドメインで始まっているかチェックしたいな」といった場面に、毎日と言っていいほど遭遇します。
そんな時、昔のプログラマーは「この文字列の0番目から5文字分を切り出して…」なんて苦労をしていたのですが、今はもっとスマートに、直感的に書けるメソッドが用意されています。それが今回紹介する `startsWith` と `endsWith` です。
肩の力を抜いて、一緒に見ていきましょう！
—
1. 「始まり」と「終わり」を見極めるための道具
想像してみてください。あなたは今、図書館の司書さんです。大量の本のリストが手元にあり、「タイトルが『夏目漱石』で始まる本だけピックアップして！」とか、「ファイル名が『.jpg』で終わる画像だけ探して！」と頼まれたらどうしますか？
JavaScriptの `startsWith` と `endsWith` は、まさにその「仕分け作業」を一瞬で終わらせてくれる優秀なアシスタントです。
基本の書き方
使い方はとてもシンプルです。
const text = “JavaScriptの冒険.js”;
// startsWith: 「〜で始まる？」と聞く
console.log(text.startsWith(“Java”)); // true (正解！)
// endsWith: 「〜で終わる？」と聞く
console.log(text.endsWith(“.js”)); // true (これも正解！)
これだけです。`true`（はい）か `false`（いいえ）で答えてくれるので、`if` 文と組み合わせれば「もし〇〇で始まっていたら、△△する」といった処理が簡単に作れます。
—
2. 実はすごい「第二引数」という秘密兵器
ここからが少しだけプロっぽい話ですが、難しく考えないでくださいね。「特定の場所からチェックを開始する」という機能です。
例えば、WebサイトのURLをチェックする時。「先頭からじゃなくて、特定の場所から確認したいな」というワガママな要望に応えてくれるのが「第二引数（位置指定）」です。
お買い物のレシートで例えると…
レシートの「商品名」だけをチェックしたいとき、日付や店名などの「ヘッダー部分」は無視して、商品が並んでいる途中からチェックしたいですよね？
const path = “/users/profile/settings.html”;
// 7文字目（インデックス番号）からチェックを開始する
// “/users/” の次、つまり “profile” という文字から始まっているか確認
console.log(path.startsWith(“profile”, 7)); // true
この「第二引数」に数字を入れることで、「ここより前は無視していいから、この位置から見てね！」とJavaScriptに指示を出せるんです。これを知っているだけで、文字列処理の効率がグッと上がります。
—
3. つまずきやすいポイント：インデックスは「0」から始まる！
初心者の皆さんが最初につまずくポイントがこれです。「JavaScriptのカウントは1からではなく、0から始まる」ということ。
人間は「1番目、2番目」と数えますが、コンピューターは「0番目、1番目」と数えます。
- 1文字目は `0` 番目
- 2文字目は `1` 番目
もし `startsWith` で「2文字目からチェックしたい」と思ったら、第二引数には `1` を入れる必要があるんです。ここだけ、最初は「おっと、ズレたかな？」と焦るかもしれませんが、大丈夫。何回かやっていれば指が自然と覚えます。
—
4. 現場でよく使う「実用シーン」
最後に、実際にどんな場所でこのメソッドたちが活躍しているか紹介します。
const fileName = “report_2023.pdf”;
// ファイルがPDFかどうかを判定する
if (fileName.endsWith(“.pdf”)) {
console.log(“PDFファイルですね。ダウンロードを開始します。”);
} else {
console.log(“対応していないファイル形式です。”);
}
// 外部サイトへのリンクかどうか判定する（httpで始まるか）
const url = “https://google.com”;
if (url.startsWith(“http”)) {
console.log(“外部へのリンクです。別タブで開きます。”);
}
このように、ユーザーの入力チェックや、APIから返ってきたデータのフィルタリングなど、現場では「情報の入り口と出口」を管理するために、この子たちが毎日フル回転しています。
—
最後に：完璧じゃなくて大丈夫
プログラミングを始めたばかりの頃は、「なぜこんなに似たようなメソッドがいっぱいあるの？」と混乱することもあるでしょう。でも安心してください。僕も最初は、`slice` や `replace` との違いで頭を抱えていました。
まずは、「文字列の端っこをチェックしたいときは、`startsWith` と `endsWith` を使えばいいんだな」という引き出しを一つ持つだけで十分です。
コードを書くたびに少しずつ仲良くなっていけば、いつの間にか「ああ、ここは `startsWith` の出番だね」と、直感的に手が動くようになりますよ。
応援しています。また何かあれば、いつでも聞きに来てくださいね！
コメント