こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。
JavaScriptのコードを書いていると、画面に表示する文字列を書き換えたり、ユーザーから受け取ったデータを整えたりする作業に、どうしてもぶつかりますよね。「ここの文字を全部別のものに変えたいのに、なぜか最初の一つしか変わらない……！」なんて頭を抱えて、深夜のオフィスでコーヒーを片方に途方に暮れた経験、あなたにもありませんか？
大丈夫ですよ、安心してください。それはJavaScriptの歴史が生んだちょっとした「おせっかい仕様」のせいで、あなたが悪いわけではありません。
今日は、そんな文字列置換のモヤモヤをきれいさっぱり解消してくれる救世主、`replaceAll()` について、現場のリアルなノウハウを交えながら優しくお話ししていきますね。
—
1. なぜ「最初しか変わらない」の？（従来の `replace` のお話）
まずは、これまでみんなが使ってきた先輩メソッド `String.prototype.replace()` のお話から始めましょう。
例えば、お買い物のレシートをイメージしてください。「りんご」という文字を「みかん」に変えたいとします。
const text = “りんごは美味い。やっぱりりんごが好きだ。”;
// replaceを使って「りんご」を「みかん」に変えてみる
const newText = text.replace(“りんご”, “みかん”);
console.log(newText);
// 結果: “みかんは美味い。やっぱりりんごが好きだ。”
あれ？ 最初の「りんご」は「みかん」になったのに、2番目の「りんご」はそのままスルーされてしまいました。
そう、従来の `replace()` は、最初に見つけた1箇所だけを書き換えて、満足して終わってしまう という性格だったんです。「全部変えてよ！」とお願いしたくても、普通に文字列を渡すだけでは聞いてくれませんでした。
これを全部変えるためには、正規表現というちょっと難解な呪文（`/g` フラグ）を使わなければならず、初学者の心を何度もへし折ってきた歴史があります。「文字を全部変えたいだけなのに、なんでこんなに大げさなことを……」と、私も昔はよく頭を抱えたものです。
—
2. 救世主登場！すべての場所を一網打尽にする `replaceAll()`
そこで現代のJavaScriptに登場したのが、今回主役の `replaceAll()` です！
名前の通り、見つけた端から「すべて（All）を置換（Replace）」してくれます。先ほどのコードを `replaceAll()` に書き換えてみましょう。
const text = “りんごは美味い。やっぱりりんごが好きだ。”;
// replaceAllなら、すべての一致箇所を書き換えてくれます
const newText = text.replaceAll(“りんご”, “みかん”);
console.log(newText);
// 結果: “みかんは美味い。やっぱりみかんが好きだ。”
見てください、この素直な動き！ 2つあった「りんご」が、見事に両方とも「みかん」に変わりました。
むずかしい正規表現の呪文を覚える必要もありません。変えたい文字と、新しい文字をそのままコンマで区切って渡すだけ。これなら、今日からあなたのコードの即戦力になってくれますよね。
—
3. 実務でよくあるシチュエーション：こんな時に使おう！
では、実際のWeb制作やアプリ開発の現場で、`replaceAll()` がどんな風に役立つのか、もう少し身近な例を見てみましょう。
例：SNSのハッシュタグや、文章中の不要な空白を一掃する
ユーザーが入力フォームに、全角スペースをごちゃまぜにして文章を投稿してきたとします。見た目を整えるために、すべての全角スペースを半角スペースに、あるいは何も無い状態（削除）にしたいとき、`replaceAll()` は最高の相棒になります。
// ユーザーが入力した、全角スペースだらけのテキスト
const userComment = “こんにちは 今日はいい天気ですね また明日！”;
// すべての全角スペースを、空っぽ（””）に置き換えて消去する
const cleanComment = userComment.replaceAll(“ ”, “”);
console.log(cleanComment);
// 結果: “こんにちは今日はいい天気ですねまた明日！”
どうでしょう？ 画面のレイアウトを崩す原因になりがちな不要なスペースも、`replaceAll()` さえあれば一瞬で綺麗に掃除できます。
—
4. ここだけは気をつけて！実務でのワンポイントアドバイス
最後に、現場のエンジニアとして、知っておいてほしい大切な注意点をひとつだけお伝えします。
`replaceAll()` はとても便利ですが、比較的新しいJavaScriptの機能（ES2021で導入されました）です。そのため、もしあなたが担当しているWebサイトが、何年も前に作られた古いスマホのブラウザや、古い社内システムなどもサポートしなければならない環境の場合、動かないことがあります。
「あれ、動かないな？」と思ったときは、ブラウザの対応状況を思い出してあげてくださいね。（最近のモダンな環境であれば、基本的には何も気にせず使って大丈夫です！）
—
まとめ
文字列操作は、プログラミングの基礎でありながら、思い通りに動かないとイライラしてしまうポイントでもあります。
- 最初だけを変えたいとき ＝ `replace()`
- 全部を一気に変えたいとき ＝ `replaceAll()`
この2つの違いさえ頭の片隅に置いておけば、もう文字列の置換で迷うことはありません。
あなたのコードが、今日もスムーズに、そして美しく動きますように。分からないことがあれば、いつでもまた私に聞きに来てくださいね。一緒に一歩ずつ進んでいきましょう！
コメント