こんにちは！JavaScriptの学習、毎日お疲れ様です。
画面に文字を表示させたり、ユーザーが入力した内容をチェックしたり……。Webを作っていると、文字列をあつかう機会って本当に多いですよね。
「文字の一部を別の文字に変えたい！」
そんなときに頼りになるのが、今回お話しする `String.prototype.replace()` というメソッドです。
名前を聞くだけで「なんだか難しそう……」と身構えてしまうかもしれませんが、大丈夫ですよ。今日は、身近な「お買い物のスタンプラリー」や「服のボタン付け替え」に例えながら、一緒に優しく紐解いていきましょう。
—
`replace()` って、一体どんな道具？
JavaScriptの世界で、`replace` は「文字列の中から特定の文字を見つけて、別の文字にパパッと入れ替えてくれるお助けスタンプ」のようなものです。
例えば、手紙の下書きをしていて「やっぱり『こんにちは』じゃなくて『こんばんは』に直したいな」と思ったとき、消しゴムで消して書き直しますよね。あれをプログラムの力で一瞬でやってくれるのが `replace()` です。
今回はその中でも、一番シンプルで使いやすい「第一引数に普通の文字列を渡した場合」に絞って、その優しさと、ちょっとした「お茶目なクセ」をマスターしていきましょう。
—
基本の使い方：最初の1個だけを優しくお色直し
まずは、一番基本の形を見てみます。
`replace()` には、「何を探す？（検索ワード）」と「何に変える？（新しいワード）」の2つを教えてあげます。
// お買い物のメッセージがあるとします
const message = “りんごを買いました。りんごは美味しかったです。”;
// 「りんご」を「みかん」に変えてみましょう
const newMessage = message.replace(“りんご”, “みかん”);
console.log(newMessage);
// 出力結果： みかんを買いました。りんごは美味しかったです。
あれっ？にお気づきでしょうか？
「りんご」という言葉は2回出てきたのに、最初の1個目しか「みかん」に変わっていませんよね。
そう、これが `replace()` の第一の性格です。
「最初に目についた1個目をキレイに変えたら、そこで満足して仕事をやめちゃう」という特徴があります。
「えっ、全部変えてよ！」って思いますよね。でも大丈夫。実務では「まずは1個目だけ変えたい」というシチュエーションも意外と多いので、この「最初に見つけたやつだけ」という性質を覚えておくと、後々すごく役に立ちますよ。
—
実務でよくあるシチュエーション：ユーザーの入力ミスを優しく包み込む
では、もう少し実践的な例を見てみましょう。
例えば、Webサイトの入力フォームで、ユーザーが間違えて全角のスペースを入れてしまったとします。これを半角スペースに直してあげたいとき、`replace()` は大活躍します。
// ユーザーが入力したお名前（名前に全角スペースが入っている！）
const userInputName = “山田 太郎”;
// 全角スペースを半角スペースに置き換える
const cleanName = userInputName.replace(“ ”, ” “);
console.log(cleanName);
// 出力結果： 山田 太郎 （綺麗に半角スペースになりました！）
こうしておくと、データベースに登録するときや、画面にきれいに出力したいときにエラーを防ぐことができます。裏方でこっそりユーザーをサポートする、優しい気配りコードですね。
—
ここでつまずきやすい！初心者がハマりがちなポイント
`replace()` を使い始めるとき、誰もが一度は「あれ？」と首をかしげるポイントがあります。一緒に確認しておきましょう。
1. もとの文字列そのものが変わるわけではない（非破壊的メソッド）
ここ、すごく大事なポイントです！
`replace()` を使っても、もとの文字列（変数）の中身自体は、実は一切書き換わっていません。
const originalText = “私はバナナが好きです。”;
// replaceを使っているけれど……
originalText.replace(“バナナ”, “いちご”);
// もとの変数の中身を見てみると……？
console.log(originalText);
// 出力結果： 私はバナナが好きです。（あれ、変わってない！？）
「えっ、嘘でしょう？」って思いますよね。
JavaScriptの文字列は、いわば「ガラス細工」のようなものです。一度作ったら、その中身を直接グニャッと変えることはできません。
その代わり、`replace()` は「新しく生まれ変わった別の文字列」を外に向かって新製品としてピカッと差し出してくれます。
ですから、変えた後の結果を使いたいときは、必ず新しい変数に入れ直してあげてくださいね。
const originalText = “私はバナナが好きです。”;
// 新しい変数に受け取ってあげるのが正解！
const newText = originalText.replace(“バナナ”, “いちご”);
console.log(newText);
// 出力結果： 私はいちごが好きです。（やったね！）
2. 見つからないときは、そのまま何もしないでそっとしておく
もし、探している文字が文字列の中に存在しなかった場合、エラーになって止まってしまうことはありません。
「探したけれど見つかりませんでした。なので、そのままお返ししますね」と、もとの文字列をそのままそっと返してくれます。これなら安心して使えますね。
—
まとめ：`replace()` と仲良くなるために
今回は `String.prototype.replace()` の第一引数に文字列を渡す基本のキを解説しました。
- 文字列の一部を別の文字に置き換えてくれる便利なお手伝いさん。
- デフォルトでは「最初に見つかった1個目」だけを変える。
- もとの文字列はそのまま大切に残し、新しい文字列を「はい、どうぞ」と渡してくれる。
JavaScriptの文字列操作は、最初は呪文のように見えるかもしれませんが、一つひとつ「こういう意図で動いているんだな」と分かってくると、だんだん愛着が湧いてきます。
焦らなくて大丈夫です。まずはご自身のエディタで、今日紹介したコードをコピーして、色々な言葉を置き換えて遊んでみてくださいね。あなたのコーディングの旅を、心から応援しています！
コメント