オブジェクトの一部だけ欲しい？ JavaScript で簡単に行うプロパティサブセットの取得

2024-05-01

JavaScript オブジェクトからプロパティのサブセットを取得するには、いくつかの方法があります。それぞれのアプローチには長所と短所があり、状況に応じて最適な方法を選択する必要があります。

即時関数と分割代入

この方法は、シンプルで外部ライブラリの必要がない点が利点です。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const subset = {
  name: obj.name,
  age: obj.age
};

console.log(subset); // { name: 'John Doe', age: 30 }

Object.assign() 関数を使用して、新しいオブジェクトに元のオブジェクトから特定のプロパティをコピーできます。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const subset = Object.assign({}, obj, {
  name: 'Jane Doe',
  age: 25
});

console.log(subset); // { name: 'Jane Doe', age: 25 }

Object.keys() と Array.isArray()

この方法は、プロパティ名の配列を取得してから、その配列を使用して新しいオブジェクトを作成します。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const keys = Object.keys(obj);
const subset = {};

for (const key of keys) {
  if (Array.isArray(obj[key])) {
    subset[key] = obj[key].slice();
  } else {
    subset[key] = obj[key];
  }
}

console.log(subset); // { name: 'John Doe', age: 30, occupation: 'Software Engineer' }

lodash.pick() と lodash.omit()

lodash ライブラリを使用すると、pick と omit 関数を使用して、プロパティのサブセットを簡単に取得できます。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const subset = _.pick(obj, ['name', 'age']);
console.log(subset); // { name: 'John Doe', age: 30 }

const subset2 = _.omit(obj, ['occupation']);
console.log(subset2); // { name: 'John Doe', age: 30 }

デストラクチャリング代入

ES6 以降では、デストラクチャリング代入を使用して、オブジェクトのプロパティを新しいオブジェクトに直接抽出できます。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const { name, age } = obj;
console.log({ name, age }); // { name: 'John Doe', age: 30 }

最適な方法を選択する

シンプルで外部ライブラリの必要がない方法: 即時関数と分割代入
柔軟性と簡潔さを求める場合: Object.assign()
lodash を既に使用している場合: lodash.pick() と lodash.omit()
ES6 以降を使用している場合: デストラクチャリング代入

どの方法を選択する場合も、コードの読みやすさとメンテナンス性を考慮することが重要です。

即時関数と分割代入

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const subset = {
  name: obj.name,
  age: obj.age
};

console.log(subset); // { name: 'John Doe', age: 30 }

Object.assign()

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const subset = Object.assign({}, obj, {
  name: 'Jane Doe',
  age: 25
});

console.log(subset); // { name: 'Jane Doe', age: 25 }

Object.keys() と Array.isArray()

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const keys = Object.keys(obj);
const subset = {};

for (const key of keys) {
  if (Array.isArray(obj[key])) {
    subset[key] = obj[key].slice();
  } else {
    subset[key] = obj[key];
  }
}

console.log(subset); // { name: 'John Doe', age: 30, occupation: 'Software Engineer' }

lodash.pick() と lodash.omit()

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const subset = _.pick(obj, ['name', 'age']);
console.log(subset); // { name: 'John Doe', age: 30 }

const subset2 = _.omit(obj, ['occupation']);
console.log(subset2); // { name: 'John Doe', age: 30 }

デストラクチャリング代入

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const { name, age } = obj;
console.log({ name, age }); // { name: 'John Doe', age: 30 }

説明

これらのサンプルコードは、JavaScript オブジェクトからプロパティのサブセットを取得する方法を示しています。

この方法は、シンプルで外部ライブラリの必要がない点が利点です。obj オブジェクトから name と age プロパティを取得し、新しい subset オブジェクトにコピーします。

Object.assign() 関数を使用して、新しいオブジェクトに元のオブジェクトから特定のプロパティをコピーできます。Object.assign() 関数は、最初の引数に空のオブジェクト ({}) を渡し、2 番目の引数に obj オブジェクトを渡します。その後、name プロパティを Jane Doe に、age プロパティを 25 に設定するように Object.assign() 関数をオーバーライドします。

この方法は、プロパティ名の配列を取得してから、その配列を使用して新しいオブジェクトを作成します。Object.keys(obj) 関数は、obj オブジェクトのプロパティ名の配列を返します。次に、for...of ループを使用して各プロパティ名に対してイテレートし、Array.isArray(obj[key]) 関数を使用してプロパティが配列かどうかを確認します。プロパティが配列の場合、obj[key].slice() メソッドを使用してプロパティのコピーを作成します。そうでなければ、プロパティの値をそのまま subset オブジェクトにコピーします。

lodash ライブラリを使用すると、pick と omit 関数を使用して、プロパティのサブセットを簡単に取得できます。_.pick(obj, ['name', 'age']) 関数は、obj オブジェクトから name と age プロパティを含む新しいオブジェクトを返します。_.omit(obj, ['occupation']) 関数は、obj オブジェクトから occupation プロパティを除いた新しいオブジェクトを返します。

JavaScript オブジェクトからプロパティサブセットを取得するその他の方法

クラスとインスタンスを使用して、プロパティのサブセットを表すことができるカスタムデータ構造を作成できます。

class User {
  constructor(name, age, occupation) {
    this.name = name;
    this.age = age;
    this.occupation = occupation;
  }

  get profile() {
    return {
      name: this.name,
      age: this.age
    };
  }
}

const user = new User('John Doe', 30, 'Software Engineer');
const subset = user.profile;
console.log(subset); // { name: 'John Doe', age: 30 }

ジェネレータを使用して、プロパティのサブセットをイテレータとして取得できます。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

function* getSubset(obj, keys) {
  for (const key of keys) {
    yield obj[key];
  }
}

const subset = getSubset(obj, ['name', 'age']);

for (const value of subset) {
  console.log(value); // John Doe, 30
}

Proxy オブジェクトを使用して、オブジェクトのプロパティアクセスをインターセプトし、サブセットを返すようにカスタマイズできます。

const obj = {
  name: 'John Doe',
  age: 30,
  occupation: 'Software Engineer'
};

const handler = {
  get: function(target, prop) {
    if (['name', 'age'].includes(prop)) {
      return target[prop];
    } else {
      return undefined;
    }
  }
};

const subset = new Proxy(obj, handler);
console.log(subset.name); // John Doe
console.log(subset.age); // 30
console.log(subset.occupation); // undefined