以下のリンクをクリックすると、各セクションにジャンプできます。

• JSON.stringifyの解説
• JSON.parseの解説
• 実践例
• まとめ

JSON.stringifyの解説

JSON.stringify()は、JavaScriptオブジェクトをJSON形式の文字列に変換する関数です。これにより、データを保存したり、APIに送信したりする際に利用しやすい形式に変換できます。

基本構文

JSON.stringify(object[, replacer[, space]])

• object: JSON形式に変換したいJavaScriptオブジェクト。
• replacer: オプションの関数または配列で、どのプロパティを変換するかを制御します。
• space: JSON文字列のフォーマット（インデント）を指定します。

基本例

const obj = { name: "Alice", age: 25, hobbies: ["reading", "traveling"] };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // {"name":"Alice","age":25,"hobbies":["reading","traveling"]}
    

replacerを使った例

replacerを指定すると、変換するプロパティを制御できます。

const obj = { name: "Alice", age: 25, password: "123456" };
// 指定したプロパティだけを含める
const jsonString = JSON.stringify(obj, ["name", "age"]);
console.log(jsonString); // {"name":"Alice","age":25}
    

または関数を使ってフィルタリングできます。

const obj = { name: "Alice", age: 25, password: "123456" };
const jsonString = JSON.stringify(obj, (key, value) => {
    return key === "password" ? undefined : value;
});
console.log(jsonString); // {"name":"Alice","age":25}
    

spaceを使ったフォーマットの指定

spaceを指定すると、インデントをつけて可読性を向上させることができます。

const obj = { name: "Alice", age: 25, hobbies: ["reading", "traveling"] };
const jsonString = JSON.stringify(obj, null, 2);
console.log(jsonString);
/*
{
  "name": "Alice",
  "age": 25,
  "hobbies": [
    "reading",
    "traveling"
  ]
}
*/
    

JSON.parseの解説

JSON.parse()は、JSON形式の文字列をJavaScriptオブジェクトに変換する関数です。APIから受け取ったデータを操作する際などに使用されます。

基本構文

JSON.parse(text[, reviver])

• text: JavaScriptオブジェクトに変換したいJSON形式の文字列。
• reviver: オプションの関数で、復元時に値を変換する処理を定義できます。

基本例

const jsonString = '{"name":"Alice","age":25,"hobbies":["reading","traveling"]}';
const obj = JSON.parse(jsonString);
console.log(obj); // { name: "Alice", age: 25, hobbies: ["reading", "traveling"] }
    

reviverを使った例

reviverを指定して、特定のプロパティを加工できます。

const jsonString = '{"name":"Alice","age":25,"password":"123456"}';
const obj = JSON.parse(jsonString, (key, value) => {
    if (key === "password") {
        return undefined; // パスワードを除外
    }
    return value;
});
console.log(obj); // { name: "Alice", age: 25 }
    

実践例

以下は、JSON.stringify()とJSON.parse()を組み合わせた例です。

const user = { name: "Bob", age: 30, isAdmin: false };
const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name":"Bob","age":30,"isAdmin":false}

const parsedUser = JSON.parse(jsonString);
console.log(parsedUser); // { name: "Bob", age: 30, isAdmin: false }
    

APIを模倣した例も示します。

// APIからのレスポンス（文字列）
const apiResponse = '{"status":"success","data":{"id":1,"name":"Charlie"}}';

// JSON.parseでオブジェクトに変換
const responseObj = JSON.parse(apiResponse);
console.log(responseObj.data.name); // "Charlie"

// オブジェクトを再度文字列に変換
const updatedResponse = JSON.stringify(responseObj, null, 2);
console.log(updatedResponse);
/*
{
  "status": "success",
  "data": {
    "id": 1,
    "name": "Charlie"
  }
}
*/
    

まとめ

JSON.stringify()とJSON.parse()は、JavaScriptでデータのエンコードとデコードを行うための強力なツールです。replacerやreviverを活用することで、柔軟にデータを操作できます。これらを適切に使用して、データ処理を効率化しましょう。