【JavaScript】「trimEnd()」で文字列の「余計な後ろ髪」をスッキリ！初心者でもわかる解説 💇♀️✨
やっほー！フロントエンド界の錬金術師、伝説のアーキテクトだよ。今日もJavaScriptの世界を一緒に冒険していこう！
さて、今回は「文字列操作」という、Webサイトやアプリを作る上でちょいちょいお世話になる、でもちょっと地味だからこそ奥が深いテーマだよ。中でも、今回は「String.prototype.trimEnd()」っていう、ちょっと変わった名前のメソッドに焦点を当ててみようと思うんだ。
「trimEnd」って聞くと、なんか「ツルツルにしちゃう」みたいなイメージ？ そう、まさにそんな感じ！
そもそも「文字列の末尾の空白」って、なんで気になるの？ 🤔
例えば、ユーザーがフォームに入力した名前とか住所。意図せず、入力欄の最後に「うっかり」スペース（空白文字）を入れちゃうことって、結構あるんだよね。
「あれ？なんか変だな？」って、一見気づきにくいんだけど、この「余計な後ろ髪」みたいな空白が残っていると、
- 検索でうまくいかない：「山田太郎」で検索したいのに、「山田太郎 」だと見つからなかったり… 😥
- 表示が崩れる：レイアウトの隙間に、想定外の空白が入って、見た目がちょっと残念になっちゃったり… 😫
- データ処理でエラー：プログラムが「これは別の文字列だ！」って勘違いして、うまく処理できなかったり… 😱
…なんて、思わぬトラブルの原因になっちゃうことがあるんだ。
でも大丈夫！そんな時のために、JavaScriptには「trimEnd()」っていう、とっても便利な「お掃除屋さん」がいるんだよ。
「trimEnd()」って、一体何者？ 🧹✨
「trimEnd()」は、その名の通り、文字列の「末尾（右側）」にある空白文字だけを、ピカピカに除去してくれるメソッドなんだ。
「空白文字」って言っても、ただのスペースだけじゃなくて、タブとか改行とか、目に見えないけど「空白」として認識されるものも、ちゃんとキレイにしてくれるんだよ。
イメージで掴もう！お買い物バージョン 🛒
例えば、スーパーでお気に入りのチョコレートを買おうとしたとする。
「これが欲しかったやつ！」って手に取ったら、値札に「○○チョコレート 」って、商品名の後ろに「 」って余計なスペースがいっぱい！
これじゃあ、レジで「○○チョコレート」って正確に打つのも大変だし、品出しする人も「あれ？このチョコレート、なんか違う？」って戸惑っちゃうかもしれない。
そんな時、あなたは「trimEnd()」っていう魔法のハサミで、値札の「○○チョコレート」の後ろについてた「 」を「チョキチョキッ！」って切り取っちゃうイメージ。
そうすると、スッキリ「○○チョコレート」だけが残るよね！
「trimEnd()」は、これと同じことを、文字列の「後ろ」にこっそり紛れ込んだ「空白」に対してしてくれるんだ。
コードで見てみよう！まずは「そのまま」の場合 📜
まずは、trimEnd()を使わないで、そのままの文字列を見てみよう。
// 例1：末尾にスペースがいっぱいある文字列
let chocolateName = “○○チョコレート ”;
console.log(“元の文字列:”, ‘”‘ + chocolateName + ‘”‘); // 元の文字列: “○○チョコレート ”
console.log(“文字数:”, chocolateName.length); // 文字数: 13 (スペースもカウントされてる！)
// 例2：末尾に改行コードがある文字列
let greeting = “こんにちは！\n”;
console.log(“元の文字列:”, ‘”‘ + greeting + ‘”‘); // 元の文字列: “こんにちは！\n”
console.log(“文字数:”, greeting.length); // 文字数: 7 (改行もカウントされてる！)
どうかな？ `console.log` で見ると、確かに後ろにスペースや改行があるのがわかるよね。そして、`length` で文字数を確認すると、その空白もちゃんと数えられているのがわかるはず。
さあ、trimEnd()の出番だ！ 🌟
では、この「余計な後ろ髪」を「trimEnd()」でキレイにしてみよう！
// 例1：末尾にスペースがいっぱいある文字列
let chocolateName = “○○チョコレート ”;
let trimmedChocolateName = chocolateName.trimEnd(); // trimEnd()で末尾の空白を除去！
console.log(“trimEnd()後:”, ‘”‘ + trimmedChocolateName + ‘”‘); // trimEnd()後: “○○チョコレート”
console.log(“文字数:”, trimmedChocolateName.length); // 文字数: 8 (スッキリ！)
// 例2：末尾に改行コードがある文字列
let greeting = “こんにちは！\n”;
let trimmedGreeting = greeting.trimEnd(); // trimEnd()で末尾の改行を除去！
console.log(“trimEnd()後:”, ‘”‘ + trimmedGreeting + ‘”‘); // trimEnd()後: “こんにちは！”
console.log(“文字数:”, trimmedGreeting.length); // 文字数: 6 (スッキリ！)
どうかな？ `trimEnd()` を使った途端、文字列の末尾にあった空白や改行がキレイさっぱり無くなったのがわかるはず！ 文字数もちゃんと減っているのが、何よりの証拠だね。
「trim()」と「trimEnd()」の違いって？ 🧐
ここで、「あれ？ `trim()` っていうのもあったような…？」と思った、鋭い君！ その通り！ `trim()` も文字列の空白をキレイにしてくれるんだけど、こちらは文字列の「両端」（先頭と末尾）の空白をまとめて除去してくれるんだ。
例えるなら、
- `trimEnd()`：後ろだけをハサミでチョキチョキ ✂️
- `trim()`：前後をまとめてチョキチョキ ✂️✂️
って感じかな。
どっちを使うかは、状況次第！
- 「末尾の空白だけ」を気にしたい → `trimEnd()`
- 「先頭と末尾、両方の空白」を気にしたい → `trim()`
という使い分けになるよ。
「trimStart()」もいるよ！ 🚀
ちなみに、JavaScriptには「`trimStart()`」っていう仲間もいるんだ。こちらは、`trimEnd()` の反対で、文字列の「先頭（左側）」にある空白だけを除去してくれる。
これで、文字列の「先頭」「末尾」「両方」の空白に対応できるようになったんだね！
let spaceyString = “ あっちこっち ”;
console.log(“元の文字列:”, ‘”‘ + spaceyString + ‘”‘);
// 先頭だけキレイにする
let trimmedStart = spaceyString.trimStart();
console.log(“trimStart()後:”, ‘”‘ + trimmedStart + ‘”‘); // “あっちこっち ”
// 末尾だけキレイにする
let trimmedEnd = spaceyString.trimEnd();
console.log(“trimEnd()後:”, ‘”‘ + trimmedEnd + ‘”‘); // “ あっちこっち”
// 両方キレイにする
let trimmedBoth = spaceyString.trim();
console.log(“trim()後:”, ‘”‘ + trimmedBoth + ‘”‘); // “あっちこっち”
テンプレートリテラルと組み合わせると、もっと便利！ 💖
JavaScriptのモダンな書き方として、「テンプレートリテラル」っていうものがあるんだけど、これも文字列操作と相性がいいんだ。
テンプレートリテラルは、バッククォート（` “ `）で囲んで、 `${変数名}` のようにして変数などを埋め込める記法だよ。
let userName = “ 田中太郎 ”;
let userAge = 30;
// テンプレートリテラルでメッセージを作成
// そのまま埋め込むと、空白もそのまま入っちゃう
let messageRaw = `こんにちは、${userName}さん！年齢は${userAge}歳です。`;
console.log(“そのまま:”, messageRaw);
// そのまま: こんにちは、 田中太郎 さん！年齢は30歳です。
// trimEnd()を使って、末尾の空白だけを取り除いてから埋め込む
// ※ 注意：この例では、 userName の末尾の空白しか取り除かれません。
// 先頭の空白は残ります。もし両方取り除きたい場合は trim() を使います。
let messageTrimmedEnd = `こんにちは、${userName.trimEnd()}さん！年齢は${userAge}歳です。`;
console.log(“trimEnd()後:”, messageTrimmedEnd);
// trimEnd()後: こんにちは、 田中太郎さん！年齢は30歳です。
// trim()を使って、先頭と末尾の空白を取り除いてから埋め込む
let messageTrimmedBoth = `こんにちは、${userName.trim()}さん！年齢は${userAge}歳です。`;
console.log(“trim()後:”, messageTrimmedBoth);
// trim()後: こんにちは、田中太郎さん！年齢は30歳です。
ほら、`trimEnd()` や `trim()` を使うことで、埋め込む前に文字列をキレイにできるんだ。
まとめ：trimEnd()は、あなたの「お掃除の相棒」 🤝
さあ、今回はJavaScriptの `trimEnd()` メソッドについて、じっくり解説してきたよ。
- `trimEnd()`：文字列の末尾（右側）にある空白文字だけをキレイにする。
- `trimStart()`：文字列の先頭（左側）にある空白文字だけをキレイにする。
- `trim()`：文字列の両端（先頭と末尾）の空白文字をまとめてキレイにする。
この3つを使い分けることで、ユーザーが入力したデータや、外部から受け取ったデータに含まれる「うっかり空白」に、もう悩まされることはなくなるはず！
Web制作や開発をしていると、どうしても「あれ？なんか思ってたのと違う…」って、つまずくこともあると思う。でも、そんな時に「あっ、これ `trimEnd()` で解決できるかも！」って思い出してもらえたら、僕も嬉しいな。
だって、プログラミングって、こうやって一つずつ「なるほど！」を見つけていく、宝探しみたいなものだからね！
これからも、JavaScriptの面白い世界を一緒に探求していこうね！また会えるのを楽しみにしてるよ！ 👋
コメント