Zenn
🎃

オブジェクト構造の再構築の考え方

に公開
JavaScript
tech

基本概念

  • 既存のデータを変換して、必要な形式のデータ構造に作り直す技法

主な目的

  1. データの整形: API応答やDBデータを表示や処理に適した形式に変換

実装例

// 元データ
const user = {
  user_id: 123,
  user_first_name: "太郎",
  user_last_name: "山田",
  user_email: "taro@example.com"
};

// 再構築したデータ
const formattedUser = {
  id: user.user_id,
  name: `${user.user_last_name} ${user.user_first_name}`,
  contact: user.user_email
};

具体的な変換操作

  1. プロパティ名の変更: user_id → id
  2. 値の加工: 姓名の結合、日付フォーマット変換など
  3. 階層構造の再編成: ネストの追加/削除
  4. 不要データの除外: 必要なプロパティのみ選択

利点

  • コードの可読性向上
  • データ操作の一貫性確保
  • メンテナンス性の向上
  • コンポーネント間の明確なデータ契約

Discussion