バニラJavaScriptでオブジェクトのプロパティの一部だけを抽出して新しいオブジェクトを作成する方法

オブジェクトから必要なプロパティだけを取り出し、それらを使って新しいオブジェクトを作成したい場合は、オブジェクトの分割代入（destructuring）とプロパティのショートハンド記法を組み合わせると、簡潔かつ読みやすく実装できます。

例えば、次のようなオブジェクトがあったとします。

例

const person = {
    name: 'John',
    age: 40,
    city: 'LA',
    school: 'High School'
}

この中から「name」と「age」だけが必要な場合は、分割代入で値を取り出し、ショートハンド記法を使って新しいオブジェクトを生成します。

const {name, age} = person;
const selectedObj = {name, age};
console.log(selectedObj);

ここでは、const {name, age} = person; によって person オブジェクトから name と age の値を変数として取り出しています。その後、{name, age} というショートハンド記法により、「プロパティ名と変数名が同じ場合に値を自動的に割り当てる」仕組みを利用して、新しいオブジェクトを作成しています。

出力結果

このコードを実行すると、コンソールには次の出力が表示されます。

{
    name: 'John',
    age: 40
}

このように、元のオブジェクトには影響を与えずに、必要なプロパティだけを持つ新しいオブジェクトを簡単に作成できます。APIレスポンスから特定のフィールドだけを抽出したい場合など、実務でも頻繁に使われるテクニックです。