JavaScriptでJSON形式のデータ（オブジェクトや配列）を扱う際によく使われる
ビルトイン関数（メソッド）やテクニックを以下にまとめます。
JSONはJavaScriptのネイティブ構造であるオブジェクトや配列で構成されているため、ArrayとObjectに用意されている関数が中心です。
🔁 配列（Array）に対する便利な処理関数
1. map()
- 目的：各要素を変換して新しい配列を作る。
js//ビルドイン関数とオブジェクトデータ群に名前を付与const users = [{ name: "Taro" }, { name: "Hanako" }];
const names = users.map(user => user.name); // ["Taro", "Hanako"]
2. filter()
- 目的：条件に合う要素だけを抽出。
jsconst numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(n => n % 2 === 0); // [2, 4]
3. reduce()
- 目的：配列を1つの値に集約（合計、オブジェクト構築など）。
jsconst prices = [100, 200, 300];
const total = prices.reduce((sum, price) => sum + price, 0); // 600
4. find()
- 目的：条件に一致する最初の要素を取得。
jsconst users = [{ id: 1 }, { id: 2 }];
const user = users.find(u => u.id === 2); // { id: 2 }
5. some() / every()
- some()：一部が条件を満たすか
- every()：すべてが条件を満たすか
jsnumbers.some(n => n > 3); // true
numbers.every(n => n > 0); // true
6. flat() / flatMap()
- 目的：配列を平坦化（ネスト解除）、またはマップ＋フラット処理を一度に。
jsconst nested = [1, [2, 3], [4]];
nested.flat(); // [1, 2, 3, 4]
📦 オブジェクト（Object）に対する便利な関数
1. Object.keys() / Object.values() / Object.entries()
- キーや値を配列として取得。
jsconst obj = { a: 1, b: 2 };
Object.keys(obj); // ["a", "b"]
Object.values(obj); // [1, 2]
Object.entries(obj); // [["a", 1], ["b", 2]]
2. Object.fromEntries()
- entries配列からオブジェクトを生成。
jsconst entries = [["a", 1], ["b", 2]];
Object.fromEntries(entries); // { a: 1, b: 2 }
3. JSON.stringify() / JSON.parse()
- JSON文字列への変換、または復元。
jsconst jsonStr = JSON.stringify({ a: 1 }); // '{"a":1}'
const obj = JSON.parse(jsonStr); // { a: 1 }
🛠️ 組み合わせ例（実用的なユースケース）
ユーザー配列をidでマッピングされたオブジェクトに変換
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];
const userMap = users.reduce((map, user) => {
map[user.id] = user;
return map;
}, {});
// { 1: { id: 1, name: "Taro" }, 2: { id: 2, name: "Hanako" } }
オブジェクトの値を変換（Object.entries + map + fromEntries）
jsconst prices = { apple: 100, orange: 80 };
const withTax = Object.fromEntries(
Object.entries(prices).map(([key, val]) => [key, val * 1.1])
);
// { apple: 110, orange: 88 }
分割代入とスプレット構文
const users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }]; のような配列を使った、
分割代入（Destructuring）
スプレッド構文（Spread syntax）
の実用例をいくつか紹介します。
✅ 分割代入の例
1. 最初のユーザーを変数に取り出す
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const [firstUser] = users;
console.log(firstUser.name); // "Taro"
2. オブジェクトの中身を分割
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const { id, name } = users[0];
console.log(id); // 1
console.log(name); // "Taro"
3. 配列とオブジェクトのネストした分割
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const [{ id: firstId, name: firstName }] = users;
console.log(firstId); // 1
console.log(firstName); // "Taro"
✅ スプレッド構文の例
1. ユーザーの追加（非破壊で新しい配列を作成）
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const newUser = { id: 3, name: "Ichiro" };
const updatedUsers = [...users, newUser];
console.log(updatedUsers);
/*
[
{ id: 1, name: "Taro" },
{ id: 2, name: "Hanako" },
{ id: 3, name: "Ichiro" }
]
*/
2. 特定のユーザー情報を上書き（オブジェクトのコピー＋変更）
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const updatedTaro = { ...users[0], name: "太郎" };
console.log(updatedTaro); // { id: 1, name: "太郎" }
3. ユーザー配列のクローン（浅いコピー）
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const clonedUsers = [...users];
✅ 分割代入とスプレッド構文の組み合わせ例
先頭のユーザーだけ取り出して、残りを別配列に
jsconst users = [{ id: 1, name: "Taro" }, { id: 2, name: "Hanako" }];const [first, ...rest] = users;
console.log(first); // { id: 1, name: "Taro" }
console.log(rest); // [{ id: 2, name: "Hanako" }]
補足
- 分割代入 → 値を「取り出して代入」
- スプレッド構文 → 値を「広げる」「コピー・結合する」
🧠 おすすめTips
Array.prototype.map()とObject.fromEntries()を組み合わせることで、
配列からオブジェクトへの変換が柔軟に行えます。JSON.stringify()の第2引数にフィルターや整形用の関数を渡せば、
見やすいログ出力にも便利です。?.（オプショナルチェーン）や??（null合体）と組み合わせると、
JSON構造の安全なアクセスが可能です。
