オブジェクトの特定のプロパティ以外を全て取り出す方法

分割代入と残余引数を使えば、オブジェクトから「特定のプロパティ以外」を全て取り出すことができます。

const profile = {
  id: 1,
  name: "hoge",
  age: 30,
  gender: "man",
  height: 165,
  weight: 55,
  bloodType: "O"
}

const {id, ...newProfile} = profile;
console.log(newProfile);
// {"name": "hoge", "age": 30, "gender": "man", "height": 165, "weight": 55, "bloodType": "O"} 

上の例では、オブジェクトprofileからidを分割代入で取り出し、それ以外のプロパティは残余引数を使ってnewProfileで取り出しています。

Reactでは、「propsの特定のプロパティ以外をそのまま別のコンポーネントに渡す」ときなんかに使えます。

以下の例では、HogeButtonコンポーネントにpropsでbuttonName、onClick、disabledを渡しています。

HogeButtonコンポーネントではbuttonNameを分割代入で取り出し、それ以外は残余引数でhogeButtonPropsとして取り出しています。

そして、Buttonコンポーネントに対してbuttonNameを渡し、それ以外はhogeButtonPropsをスプレッド構文で展開して渡しています。

"use client"

import HogeButton from "@/components/HogeButton";

export default function Home() {
  return (
    <HogeButton
      buttonName="hoge"
      onClick={() => {
        alert("hoge");
      }}
      disabled={false}
    />
  );
}

import { ButtonHTMLAttributes } from "react";
import Button from "./Button";

type HogeButton = {
  buttonName: string;
} & ButtonHTMLAttributes<HTMLButtonElement>;

const HogeButton = (props: HogeButton) => {
  const { buttonName, ...hogeButtonProps } = props;
  return <Button buttonName={buttonName} {...hogeButtonProps} />;
};

export default HogeButton;

import { ButtonHTMLAttributes } from "react";

type Button = { buttonName: string } & ButtonHTMLAttributes<HTMLButtonElement>;

const Button = (props: Button) => {
  const { buttonName, ...buttonProps } = props;
  return <button {...buttonProps}>{buttonName}</button>;
};

export default Button;