こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。
JavaScriptのコードを書いていると、「あー、このファイル名って『.png』で終わってるかな？」「ユーザーが入力したURLの最後がスラッシュ（/）で終わってたら取り除きたいな…」なんて場面に、本当によく遭遇しますよね。
そんなとき、昔のエンジニアたちは `indexOf()` という少し不器用なメソッドを使って、「最後の文字の位置を計算して……うわ、文字数から逆算しなきゃいけないの面倒くさっ！」と頭を抱えていました。
でも、安心してください。現代のJavaScriptには、そんな面倒な計算をぜんぶ肩代わりしてくれる、とってもスマートで優しい救世主がいます。それが今回紹介する `String.prototype.endsWith()` です！
今回は、この `endsWith()` の使い方を、身近な例えを交えながら一緒に優しく紐解いていきましょう。
—
1. `endsWith()` ってどんなもの？（身近なたとえ話）
突然ですが、スーパーのレジでお会計をするときを想像してみてください。
カゴの中の商品を見た店員さんが、「あ、これ賞味期限が今日のシールが貼ってあるな」とか、「あ、この袋は『有料』の札がついてるな」と、「商品の“一番最後（しっぽ）”の部分」を確認することってありますよね。
`endsWith()` も、これとまったく同じことをしてくれます。
プログラムの世界で「ある文字列が、指定した文字で『終わっている』かどうか」を、「はい（true）」か「いいえ（false）」でハッキリと答えてくれる真面目な判定マシーンなのです。
基本の書き方
使い方はとってもシンプルです。
// 「調べたい文字列」.endsWith(“探したい終わりの文字”)
const message = “Hello, World!”;
console.log(message.endsWith(“!”)); // true （「!」で終わっているから正解！）
これだけです。文字のしっぽをパッと掴んで、「うん、確かにこれで終わってるね！」と確認してくれる感覚ですね。
—
2. つまずきやすいポイントをそっとフォロー
JavaScriptを学び始めたばかりの頃って、「あれ、動かないな？」という小さな罠にハマりがちです。でも大丈夫、ここでよくあるポイントを先回りしてチェックしておきましょう。
罠その1：大文字と小文字は「別人」です
JavaScriptは、アルファベットの大文字（A）と小文字（a）をまったく別の文字として厳しく判断します。
const fileName = “report.PDF”;
// 大文字の “PDF” で終わるかを調べる
console.log(fileName.endsWith(“PDF”)); // true
// 小文字の “pdf” で調べてみる……あれ？
console.log(fileName.endsWith(“pdf”)); // false （「PDF」と「pdf」は違うもの扱い！）
「あれ、ちゃんと書いてるのにfalseになる！？」と焦ったら、大文字・小文字のすれ違いを疑ってみてくださいね。
罠その2：うっかり半導スペースが入っていませんか？
人間が目で見ていると気づきにくいのですが、文字列の最後に余計な半導スペース（空白）が混じっていることがあります。
const userInput = “banana “; // 最後に半角スペースが入っている！
console.log(userInput.endsWith(“banana”)); // false （最後のスペースが邪魔をしています）
もし実務でユーザーの入力を扱うときは、あらかじめ `.trim()` というメソッドを使って余計な空白を綺麗に消してから `endsWith()` にバトンタッチしてあげると、バグを防ぐ親切なコードになりますよ。
—
3. 実務で使える！お役立ち活用シーン
「仕組みはわかったけど、実際のWeb制作や開発でどう使うの？」という疑問に、現場で本当によく使うシーンをいくつかご紹介しますね。
活用シーン①：画像のファイル形式（拡張子）をチェックする
ユーザーがアップロードしようとしたファイルが、ちゃんと画像（pngやjpg）かどうかを確認したいとき、`endsWith()` が大活躍します。
// ユーザーがアップロードしたファイルのつもり
const uploadedFile = “avatar_photo.png”;
if (uploadedFile.endsWith(“.png”) || uploadedFile.endsWith(“.jpg”)) {
console.log(“OK！画像ファイルですね。アップロード処理を進めます。”);
} else {
console.log(“エラー：PNGまたはJPGの画像ファイルを選択してください。”);
}
これなら、わざわざ面倒な正規表現を持ち出さなくても、パッと見で直感的に読める綺麗なコードになります。
活用シーン②：URLの「最後のスラッシュ（/）」をキレイに整える
Webサイトを作っていると、URLの末尾にスラッシュがついている場合とついていない場合がありますよね。「もし最後がスラッシュで終わっていたら、それを取っちゃいたいな」というときにも応用できます。
let siteUrl = “https://example.com/blog/”;
// もし「/」で終わっていたら…
if (siteUrl.endsWith(“/”)) {
// 最後の1文字（スラッシュ）を手前まででスライスして削る！
siteUrl = siteUrl.slice(0, -1);
}
console.log(siteUrl); // “https://example.com/blog” （スッキリしました！）
このように、`endsWith()` で「終わっているか確認」して、別のメソッド（`slice()`など）とコンビを組ませることで、データの整形がグッと楽になります。
—
さいごに
`String.prototype.endsWith()`、いかがでしたでしょうか？
最初は難しそうに見えるJavaScriptのメソッドも、「文字列のしっぽを確認するお巡さん」みたいに、自分なりの可愛いイメージを持つと、ぐっと身近に感じられるようになります。
実務のコードは、複雑に書くことよりも、「後から見たときに、チームの誰もがパッと意味を理解できること」が何より大切です。その点、この `endsWith()` は名前の通り「これで終わっているか？」をそのまま表現してくれる、とても優しいコードを書いてくれます。
今日からあなたの引き出しに、ぜひこの便利なメソッドを一つ追加してあげてくださいね。
日々のコーディングが、少しでも楽しく、心地よいものになりますように！
コメント