導入: なぜreplacerが重要なのか
Web開発において、APIから受け取ったデータをそのままJSONとして保存したり、特定のフィールドを除外してサーバーへ送信したりする場面は頻繁にあります。そんな時、わざわざループ処理でオブジェクトを加工していませんか？JavaScriptのJSON.stringifyメソッドが持つ第2引数「replacer」を使いこなせば、JSON変換と同時にデータのフィルタリングや置換をスマートに行うことができます。コードの可読性を高め、無駄な処理を減らすための重要なテクニックです。
基礎知識: replacerとは何か
JSON.stringify(value, replacer, space) の第2引数に指定できる「replacer」は、関数または配列を渡すことで、JSON文字列化される過程の各値を制御できる仕組みです。
・配列の場合: 指定したキーのみが抽出されます。
・関数の場合: 全てのキーと値に対して関数が実行され、戻り値に基づいてJSONの内容が決定されます。
実装/解決策
replacerに関数を渡す場合、各キーと値に対して「キー」と「値」が引数として渡されます。特定のキーを除外したい場合は「undefined」を返し、値を加工したい場合は加工後の値をそのまま返します。この仕組みにより、再帰的な構造を持つオブジェクトでも、安全かつ一括で変換処理が可能です。
サンプルプログラム
以下のコードは、機密情報（パスワード）を除外し、特定の数値単位を変換する実用的な例です。
const userProfile = {
id: 101,
username: "frontend_dev",
password: "supersecretpassword", // 除外したい項目
balance: 5000 // 円単位からドル単位に変換したい
};
const jsonString = JSON.stringify(userProfile, (key, value) => {
// 1. パスワードというキーが見つかったら除外する
if (key === 'password') {
return undefined;
}
// 2. balanceキーの値（円）をドルに換算して返す（1ドル=100円と仮定）
if (key === 'balance') {
return value / 100;
}
// 3. その他はそのままの値を返す
return value;
}, 2); // インデントを2にして見やすく出力
console.log(jsonString);
/
出力結果:
{
"id": 101,
"username": "frontend_dev",
"balance": 50
}
/
応用・注意点
注意点1: undefinedの扱い
replacer関数内で「undefined」を返すと、そのプロパティはJSONから削除されます。意図せずundefinedを返さないよう注意してください。
注意点2: 循環参照の回避
JSON.stringifyは循環参照（オブジェクトが自分自身を指している状態）があるとエラーを投げますが、replacerを使用して循環しているプロパティを事前に除外することで、エラーを回避しつつ安全にシリアライズすることが可能です。
現場での活用法
大規模なデータ構造を持つコンポーネントの状態管理（State）をローカルストレージへ保存する際、不要な一時データを取り除くためにreplacerを活用すると、ストレージの節約とセキュリティ向上を同時に実現できます。ぜひ日々の開発に取り入れてみてください。