JavaScript の replaceAll 完全攻略！文字列の一括置換を行う方法とは？

こんにちは、とまだです。

JavaScriptで文字列を置き換えたいとき、「あれ？1個しか置換されない…」って困ったことありませんか？

実は私も最初、replaceメソッドを使って「なんで全部置き換わらないんだろう」と30分も悩んだ経験があります。プログラミング講師をしていた時も、受講生の多くが同じところでつまずいていました。

今回は、そんな悩みを一発で解決するreplaceAllメソッドについて、料理のレシピを編集するような身近な例えを使いながら、誰でも理解できるように解説していきます。

replaceAllとは？料理レシピで理解する文字列置換

JavaScriptのreplaceAllは、文字列の中にある特定の言葉をすべて別の言葉に置き換えるメソッドです。

料理のレシピを想像してみてください。

「砂糖」を「はちみつ」に変更したいとき、レシピの中にある「砂糖」という文字をすべて「はちみつ」に書き換える必要がありますよね。

これがまさにreplaceAllの役割なんです。

const recipe = "砂糖を大さじ1、砂糖を小さじ2追加します";
const newRecipe = recipe.replaceAll("砂糖", "はちみつ");
console.log(newRecipe);
// "はちみつを大さじ1、はちみつを小さじ2追加します"

たった1行で、すべての「砂糖」が「はちみつ」に置き換わりました。

なぜreplaceじゃダメなの？

「でも、replaceメソッドもあるよね？」

そう思った方、鋭いです！

実はreplaceメソッドには大きな落とし穴があります。最初に見つかった1つだけしか置き換えてくれないんです。

const recipe = "砂糖を大さじ1、砂糖を小さじ2追加します";
const newRecipe = recipe.replace("砂糖", "はちみつ");
console.log(newRecipe);
// "はちみつを大さじ1、砂糖を小さじ2追加します"

2つ目の「砂糖」はそのまま残ってしまいました。

これじゃあ、レシピが中途半端になってしまいますよね。

replaceとreplaceAllの決定的な違い

replaceとreplaceAllの違いを、もう少し詳しく見ていきましょう。

replaceの特徴

replaceは最初の1つだけを置き換えます。

郵便配達員が「最初の家だけに手紙を配って帰ってきちゃう」ようなものです。

全部の家に配達してほしいのに、これでは困りますよね。

replaceAllの特徴

一方、replaceAllはすべてを置き換えます。

ちゃんと「すべての家に手紙を配達してくれる」郵便配達員のようなものです。

この違いを理解していないと、バグの原因になってしまいます。

私も最初は「なんで1個しか置換されないんだ！」と頭を抱えたものです。

基本的な使い方：3つのパターンで完全理解

replaceAllの使い方は、大きく分けて3つのパターンがあります。

パターン1：単純な文字列の置換

一番シンプルな使い方です。

const text = "りんごが好き。りんごは赤い。";
const result = text.replaceAll("りんご", "みかん");
// "みかんが好き。みかんは赤い。"

パターン2：特殊文字を含む置換

ドット（.）やアスタリスク（*）などの特殊文字も、そのまま置換できます。

const email = "user.name@example.com";
const result = email.replaceAll(".", "_");
// "user_name@example_com"

replaceで正規表現を使う場合は、特殊文字をエスケープする必要がありましたが、replaceAllなら文字列として扱えるので簡単です。

パターン3：大文字小文字を区別する置換

replaceAllは大文字と小文字を区別します。

const text = "Apple apple APPLE";
const result = text.replaceAll("apple", "orange");
// "Apple orange APPLE"

小文字の「apple」だけが置換されました。

正規表現を使った高度な置換テクニック

replaceAllは正規表現も使えます。

ただし、必ずgフラグ（グローバルフラグ）を付ける必要があります。

大文字小文字を無視して置換

先ほどの例で、大文字小文字を無視したい場合はこうします。

const text = "Apple apple APPLE";
const result = text.replaceAll(/apple/gi, "orange");
// "orange orange orange"

iフラグで大文字小文字を無視、gフラグですべてを対象にしています。

複数の単語を一度に置換

正規表現を使えば、複数の単語を一度に置換することもできます。

const text = "犬と猫と鳥がいます";
const result = text.replaceAll(/犬|猫|鳥/g, "動物");
// "動物と動物と動物がいます"

パイプ記号（|）で「または」を表現しています。

よくあるつまずきポイントと解決法

つまずき1：「正規表現でgフラグを忘れた」

正規表現を使うときにgフラグを忘れると、エラーになります。

// これはエラー！
const result = text.replaceAll(/apple/i, "orange");
// TypeError: String.prototype.replaceAll called with a non-global RegExp

解決法：必ずgフラグを付けましょう。

// これならOK
const result = text.replaceAll(/apple/gi, "orange");

つまずき2：「元の文字列が変わらない」

replaceAllは新しい文字列を返すメソッドです。

元の文字列は変更されません。

const original = "Hello World";
original.replaceAll("Hello", "Hi");
console.log(original); // "Hello World" （変わってない！）

解決法：結果を変数に代入しましょう。

const original = "Hello World";
const modified = original.replaceAll("Hello", "Hi");
console.log(modified); // "Hi World"

つまずき3：「特殊文字が思うように置換できない」

正規表現で特殊な意味を持つ文字（. * + ? など）を置換したいとき、そのまま正規表現に書くとうまくいきません。

解決法：文字列として渡すか、エスケープしましょう。

// 文字列として渡す（推奨）
const result = text.replaceAll(".", "_");

// 正規表現でエスケープ
const result = text.replaceAll(/\./g, "_");

実践！現場で使える5つの活用例

1. URLのパラメータ置換

URLのパラメータを動的に変更したいときに便利です。

const url = "https://example.com?user=guest&role=guest";
const personalizedUrl = url.replaceAll("guest", "admin");
// "https://example.com?user=admin&role=admin"

2. テンプレート文字列の置換

メールやメッセージのテンプレートで活躍します。

const template = "{{name}}様、{{product}}のご購入ありがとうございます。";
const message = template
  .replaceAll("{{name}}", "田中")
  .replaceAll("{{product}}", "JavaScript入門書");
// "田中様、JavaScript入門書のご購入ありがとうございます。"

3. CSVデータのクリーニング

データ処理でよく使うパターンです。

const csv = "名前,年齢,住所\n田中,25,東京\n";
const cleaned = csv.replaceAll("\n", "<br>");
// HTMLで改行を表示できる形式に変換

4. 禁止ワードのマスキング

ユーザー入力のサニタイズに使えます。

const comment = "この商品は最悪です。本当に最悪。";
const filtered = comment.replaceAll("最悪", "***");
// "この商品は***です。本当に***。"

5. ファイルパスの正規化

OSによって異なるパス区切り文字を統一できます。

const windowsPath = "C:\\Users\\Documents\\file.txt";
const unixPath = windowsPath.replaceAll("\\", "/");
// "C:/Users/Documents/file.txt"

ブラウザ対応とポリフィル対策

replaceAllは比較的新しいメソッドです（ES2021で追加）。

現在のブラウザサポート状況は以下の通りです。

• Chrome: バージョン85以降
• Firefox: バージョン77以降
• Safari: バージョン13.1以降
• Edge: バージョン85以降

古いブラウザをサポートする必要がある場合は、以下の代替方法があります。

代替方法1：splitとjoinを使う

const result = text.split("検索文字").join("置換文字");

この方法なら、どんなブラウザでも動作します。

代替方法2：replaceに正規表現を使う

const result = text.replace(/検索文字/g, "置換文字");

gフラグを付けることで、すべて置換できます。

代替方法3：ポリフィルを使う

MDNが提供している公式のポリフィルを使うこともできます。

これを使えば、古いブラウザでもreplaceAllが使えるようになります。

まとめ：replaceAllで文字列操作をマスターしよう

replaceAllは、文字列のすべての出現箇所を一度に置き換える便利なメソッドです。

重要なポイントをおさらいしましょう。

1. replaceは最初の1つだけ、replaceAllはすべてを置換
2. 大文字小文字は区別される
3. 正規表現を使うときは必ずgフラグを付ける
4. 元の文字列は変更されない（新しい文字列が返る）
5. 古いブラウザでは代替方法を検討

文字列の置換は、Webアプリケーション開発で頻繁に使う基本技術です。

replaceAllをマスターすれば、より効率的なコードが書けるようになります。

もし、JavaScriptの基礎からしっかり学びたい方は、私が運営しているLearning Nextもチェックしてみてください。

文字列操作を含む基礎から応用まで、1,300問以上の練習問題で確実に身につけられます。

特にJavaScript学習完全ガイドでは、文字列操作を含む基礎概念を体系的に解説していますので、ぜひ参考にしてください。