先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで文字の一部を別の文字に置き換えることってできますか？」

先生

「もちろんできますよ！JavaScriptでは、replaceメソッドを使えば文字列の一部分を簡単に置き換えることができます。」

生徒

「どんなときに使うんですか？」

先生

「たとえば、文章の中の特定の単語を別の言葉に変えたいときや、フォーマットを修正したいときにとても便利なんです。実際の例で見ていきましょう！」

1. replaceメソッドとは？

replaceメソッドは、JavaScriptで文字列の一部を別の文字列に置き換えるための機能です。基本的な形は次の通りです。


文字列.replace(置き換えたい文字, 新しい文字);

このメソッドを使うと、特定の文字や単語を新しい内容に変えることができます。例えば、「こんにちは」を「Hello」に変えることも簡単です。

2. 基本的なreplaceの使い方

まずは基本的な使い方から見てみましょう。


let text = "こんにちは、太郎さん。";
let newText = text.replace("太郎", "花子");
console.log(newText);


こんにちは、花子さん。

このように、"太郎"という部分が"花子"に置き換えられました。replaceメソッドは、最初に見つかった一致部分だけを置き換えるのが特徴です。

replaceメソッドは、基本的には最初に見つかった1つだけを置き換えます。ですが、すべての一致部分を置き換えたい場合には、正規表現（せいきひょうげん）を使います。

正規表現とは、「特定の文字のパターン」を表す書き方のことです。たとえば、文字列全体から同じ単語をすべて探したいときに使います。


let text = "赤いりんごと赤い花があります。";
let newText = text.replace(/赤い/g, "青い");
console.log(newText);


青いりんごと青い花があります。

ここでのポイントは、/赤い/gのように「スラッシュ」で囲んだ部分が正規表現です。最後についているgは「グローバル（全体）」を意味し、全ての「赤い」を対象にしています。

文字の大文字・小文字を区別せずに置換したい場合は、iというオプションを使います。たとえば「Apple」も「apple」も同じように扱いたいときです。


let text = "I like Apple and apple pie.";
let newText = text.replace(/apple/gi, "orange");
console.log(newText);


I like orange and orange pie.

このように、/giと書くことで、「g」はすべての一致を、「i」は大文字小文字を区別しない設定になります。

replaceメソッドの第二引数（新しい文字）には、関数を指定することもできます。これにより、置き換える内容を動的に変えることができます。


let text = "2025年は特別な年です。";
let newText = text.replace(/2025/, function(match) {
  return Number(match) + 1 + "年";
});
console.log(newText);


2026年は特別な年です。

この例では、マッチした文字列「2025」を数値に変換して、1年後の「2026年」に置き換えています。こうした動的な処理は、日付や数値を扱うときにとても役立ちます。

文字列の中には、プログラミングで特別な意味を持つ記号があります。たとえば「.」「?」「+」などです。これらを正規表現でそのまま使うと、意図しない動きをすることがあります。

もし記号をそのまま置き換えたい場合は、「バックスラッシュ（\\）」をつけて\\.のように書きましょう。


let text = "version 1.0.0";
let newText = text.replace(/\\./g, "-");
console.log(newText);


version 1-0-0

このようにすることで、「.（ドット）」という記号を安全に置き換えることができます。

文章中に複数の単語を一度に置き換えたい場合もあります。そのようなときは、正規表現のパターンを組み合わせて使う方法が便利です。


let text = "犬と猫が好きです。";
let newText = text.replace(/犬|猫/g, function(match) {
  return match === "犬" ? "うさぎ" : "とり";
});
console.log(newText);


うさぎととりが好きです。

このように、|（パイプ）は「または」を意味します。複数の単語を一度に判定して、違う単語に置き換えることができます。

replaceメソッドは、単なる文字の置換だけでなく、文章の整形やデータの加工などにも活用できます。たとえば、ユーザーが入力した文字列から不要な空白を取り除いたり、HTMLタグを除去したりする処理にも応用可能です。

Web開発では、フォーム入力のチェックやデータのクリーニングなど、あらゆる場面で役立ちます。JavaScriptを学ぶ上で欠かせない重要なメソッドの1つです。