JavaScriptでJSON.stringifyを使って関数をシリアライズする方法

JavaScriptでJSON.stringifyを使って関数をシリアライズする方法

JavaScriptでオブジェクトをJSON化する際、JSON.stringify を使うと、関数を含むオブジェクトをシリアライズしようとしたときに関数が自動的に削除される という仕様になっています。

JSON.stringify の仕様と関数の省略

JSON.stringify はデフォルトでは関数をJSONに含めません。

1
2
3
4
5
6
7
const obj = {
  name: "test",
  func: () => console.log("Hello")
};

console.log(JSON.stringify(obj));
// ✅ {"name":"test"}(関数が削除される)

この仕様のため、関数を含むオブジェクトをJSON形式で保存・転送する場合は、関数を別の方法で処理する必要があります。

関数をシリアライズする方法

1. toString() を使って関数を文字列化する

関数をJSONに含めたい場合、関数を toString() で文字列に変換して格納する方法があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const obj = {
  name: "test",
  func: function() { return "Hello"; }
};

const json = JSON.stringify(obj, (key, value) => 
  typeof value === "function" ? value.toString() : value
);

console.log(json);
// ✅ {"name":"test","func":"function() { return \"Hello\"; }"}

この方法なら関数の定義を文字列として保存できます。ただし、JSON.parse で復元すると関数として動作しないため、追加の処理が必要になります。

2. toJSON メソッドを活用する

オブジェクトの toJSON メソッドを定義すると、カスタムのシリアライズ処理を適用できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const obj = {
  name: "test",
  func: function() { return "Hello"; },
  toJSON() {
    return { name: this.name, func: this.func.toString() };
  }
};

console.log(JSON.stringify(obj));
// ✅ {"name":"test","func":"function() { return \"Hello\"; }"}

この方法を使うと、特定のフォーマットで関数をJSONに含めることが可能です。

3. new Function() を使って復元可能にする

関数をJSONに保存し、復元時に実行できるようにするためには、new Function() を利用します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
const obj = {
  name: "test",
  func: function() { return "Hello"; }
};

const json = JSON.stringify(obj, (key, value) => 
  typeof value === "function" ? value.toString() : value
);

const parsedObj = JSON.parse(json);
parsedObj.func = new Function(`return (${parsedObj.func})`)();

console.log(parsedObj.func());
// ✅ "Hello"

この方法を使うと、関数をJSONに保存しつつ、パース後に元の関数として実行できるようになります。

まとめ

  • JSON.stringify はデフォルトで関数を省略する。
  • toString() を使えば関数を文字列として保存できる。
  • toJSON メソッドを活用するとカスタムシリアライズが可能。
  • new Function() を使うとJSONから関数を復元できる。

これらのテクニックを活用することで、関数を含むオブジェクトをJSONで扱いやすくなります。

カテゴリ

comments powered by Disqus