ようこそ、フロントエンドの世界へ！現場の最前線で数え切れないほどのバグと戦い、コードという名のジャングルを切り開いてきたチーフアーキテクトです。
今日は、JavaScriptで文字を入れ替えるときに、誰もが一度は「えっ、そこしか変わらないの！？」とずっこけるポイント――「文字の置換」についてお話ししましょう。
特に、昔からの定番だった「正規表現」という呪文のような方法と、2021年に颯爽と現れた期待の新人「`replaceAll`」の違いを、現場のリアルな感覚を交えて解説します。難しい顔をせず、コーヒーでも飲みながらリラックスして読んでくださいね。
—
1. 現場あるある：最初の一個しか変わらない事件
まずは、私たちがよく直面する「困ったシーン」を想像してみましょう。
例えば、あなたがお菓子のメニューを作っていて、「リンゴ」をすべて「完熟リンゴ」に書き換えたいと思ったとします。
JavaScriptには文字を置き換える `replace()` という便利な道具があります。さっそく使ってみましょう。
// お菓子のリスト
let menu = “リンゴのパイ、リンゴのタルト、リンゴのジュース”;
// 「リンゴ」を「完熟リンゴ」に変えたい！
let newMenu = menu.replace(“リンゴ”, “完熟リンゴ”);
console.log(newMenu);
// 結果: “完熟リンゴのパイ、リンゴのタルト、リンゴのジュース”
「…えっ、一個目だけ！？」
そうなんです。標準の `replace()` は、最初に見つけた一個だけを書き換えて、満足して帰ってしまう「ちょっとおっちょこちょいな職人さん」なんです。残りのリンゴは放置されたまま。これでは困りますよね。
—
2. 昔ながらの解決策：正規表現という「魔法のメガネ」
`replaceAll` が登場する前、私たちはこの職人さんに「全部やってね！」と伝えるために、正規表現（Regular Expression）という魔法のメガネをかけさせていました。
具体的には、文字を `/ /` で囲んで、お尻に `g`（Globalの略）という印をつけます。
let menu = “リンゴのパイ、リンゴのタルト、リンゴのジュース”;
// /リンゴ/g と書くことで「見つかるもの全部！」という命令になります
let newMenu = menu.replace(/リンゴ/g, “完熟リンゴ”);
console.log(newMenu);
// 結果: “完熟リンゴのパイ、完熟リンゴのタルト、完熟リンゴのジュース”
これで解決！…なのですが、初学者の方にとって、この `/ /g` という書き方は「なんだか暗号みたいで怖い」と感じるものです。実際、現場でも「スラッシュを忘れた」「書き方を間違えてバグを出した」という声は少なくありませんでした。
—
3. 救世主現る：直感的に書ける `replaceAll()`
そんな「正規表現はちょっと難しいよ…」というみんなの心の声に応えて、2021年に導入されたのが `replaceAll()` です。
これは名前の通り、「全部（All）置き換える（Replace）」という機能です。魔法のメガネを使わなくても、普通の言葉（文字列）を渡すだけで、最後までしっかり仕事をしてくれます。
お買い物に例えるなら
- `replace()` ：お店に行って「リンゴを一個だけください」と言う。
- `replaceAll()` ：お店に行って「棚にあるリンゴを全部買い占めます！」と言う。
コードで見ると、そのシンプルさがよくわかります。
let menu = “リンゴのパイ、リンゴのタルト、リンゴのジュース”;
// replaceAll を使えば、そのままの言葉で全部変わる！
let newMenu = menu.replaceAll(“リンゴ”, “完熟リンゴ”);
console.log(newMenu);
// 結果: “完熟リンゴのパイ、完熟リンゴのタルト、完熟リンゴのジュース”
// スッキリして読みやすいですね！
—
4. 注意！`replaceAll` にも「小さなルール」がある
「じゃあ、全部 `replaceAll` でいいじゃん！」と思いますよね。基本はその通りなのですが、プロの現場でハマりやすいポイントが一つだけあります。
もし `replaceAll` の中で正規表現（あの `/ /` の書き方）を使いたい場合は、必ず `g`（全部という意味）を付けないといけない、というルールがあるんです。
let text = “Hello Hello”;
// ❌ これはエラーになります！
// replaceAll なのに「全部」という印（g）がない正規表現を渡すと、
// JavaScriptが「どっちにしたいの！？」と混乱して怒っちゃいます。
// text.replaceAll(/Hello/, “Hi”);
// ✅ 正規表現を使うなら、必ず g をつけましょう
text.replaceAll(/Hello/g, “Hi”);
もし「正規表現とかよくわからない…」という段階なら、まずは `replaceAll(“普通の文字”, “新しい文字”)` という形だけ覚えておけば大丈夫。それだけで、あなたの書くコードはぐっと安全で読みやすくなります。
—
5. 結局、どっちを使えばいいの？
最後に、アーキテクトとしての私からのアドバイスです。
1. 基本は `replaceAll()` を選ぼう！
今の時代の標準です。コードを読んだ人が「あ、全部変えたいんだな」と一瞬で理解できるのが最大のメリットです。
2. 昔のコードを直すときは `replace(/ /g)` に出会うかも？
古いプロジェクトや、少し前の解説サイトではこちらが主流です。「あ、これは `replaceAll` がなかった頃の頑張りだな」と温かい目で見守ってあげてください。
3. 特定のルール（大文字小文字を無視するなど）があるときは正規表現！
「リンゴ」も「りんご」も両方一気に変えたい、といった複雑な注文のときは、正規表現の出番です。
動作確認用サンプルコード
エディタに貼り付けて、動きを確かめてみてくださいね。
/
- 文字列置換の比較デモ
/
const message = “JavaScriptは楽しい。JavaScriptは奥深い。JavaScriptは最高だ！”;
// 1. 昔ながらの replace (最初の1つだけ)
const simpleReplace = message.replace(“JavaScript”, “JS”);
console.log(“— replaceの結果 —“);
console.log(simpleReplace);
// 「JSは楽しい。JavaScriptは奥深い…」（1つしか変わらない！）
// 2. 魔法のメガネ (正規表現 /g)
const regexReplace = message.replace(/JavaScript/g, “JS”);
console.log(“\n— replace(/g)の結果 —“);
console.log(regexReplace);
// 「JSは楽しい。JSは奥深い。JSは最高だ！」（全部変わるけど少し複雑）
// 3. 期待の新人 replaceAll
const allReplace = message.replaceAll(“JavaScript”, “JS”);
console.log(“\n— replaceAllの結果 —“);
console.log(allReplace);
// 「JSは楽しい。JSは奥深い。JSは最高だ！」（全部変わって読みやすい！）
—
おわりに
プログラミングの世界は、どんどん便利に、そして人間に優しく進化しています。`replaceAll` はその象徴のような機能です。
最初は「どっちを使うんだっけ？」と迷うかもしれませんが、大丈夫。間違えてもプログラムが教えてくれます。大切なのは、「なぜ新しい方法が生まれたのか」という背景を知り、少しずつ道具をアップデートしていくことです。
一歩ずつ進んでいきましょう。あなたの書くコードが、もっと素敵になることを応援しています！
コメント