const copy = user;とconst copy = { user };は似てるけど

表記は似てるけど

① const copy = user;

• 参照コピー
• copy と user は まったく同じオブジェクト を指す
• キーはつかない（ただの変数がコピーされるだけ）

user ──▶ { name: "kato" }
copy ──┘（同じものを指す）

② const copy = { user };

• 新しいオブジェクトを作る
• 中に user という キー ができ、その値に user が入る
• 中身のオブジェクトは参照コピーされる

copy ──▶ {
            user: { name: "kato" }  ← 値は参照コピー
        　}

これは省略記法で、実際には：

const copy = { user: user };

---

まとめ

書き方	意味	結果
copy = user	参照をそのまま渡す	全く同じオブジェクト
copy = { user }	user をキーとした新しいオブジェクトを作る	{ user: {...} }

---

const copy = { user };はプロパティ名省略記法

使いどころ①：複数の変数をまとめて1つのオブジェクトにしたいとき

例えばフォーム入力などで、バラバラの値をひとつのオブジェクトにまとめたい場面。

const name = "kato";
const age = 20;
const city = "Tokyo";

const user = { name, age, city };
// → { name: "kato", age: 20, city: "Tokyo" }

🔍 なぜ便利？
毎回こう書く必要がなくなるからです：

const user = { name: name, age: age, city: city };

---

使いどころ②：Reactのstate更新でまとめて渡すとき

const name = "kato";
const age = 20;

setUser({ name, age });

✅ name: name を省略
✅ フォームで入力データをまとめる定番パターン

---

使いどころ③：関数の引数を「オブジェクトにまとめて渡す」とき

複数引数の管理がしやすくなるため、ライブラリやReactの習慣として定番です。

function createUser({ name, age }) {
  return { name, age };
}

const name = "kato";
const age = 20;

const user = createUser({ name, age });
// 引数をまとめて渡す！

---

使いどころ④：APIへ送るデータをまとめるとき

フロント側で API に送るデータをまとめる典型的な例。

const name = "kato";
const age = 20;

fetch("/api/users", {
  method: "POST",
  body: JSON.stringify({ name, age }),
});

これは REST でも GraphQL でも同じ。

---

使いどころ⑤：オブジェクトを返す処理で “まとめて返したい” とき

例えばユーティリティ関数で複数の値を返したい場面。

function useModal() {
  const [open, setOpen] = useState(false);

  const show = () => setOpen(true);
  const hide = () => setOpen(false);

  return { open, show, hide };
}

呼び出し側は：

const { open, show, hide } = useModal();

これが React Hooks の一般的な書き方ですね。

---

✨【重要】この書き方は「変数 → オブジェクト」への橋渡し

{ user } ← これは

変数 user(中身はオブジェクト) を
“user というキーをもつオブジェクト” の ‘値’ にする

という意味になります。
📌 これはあくまで
「オブジェクトを構築するための記法」 であり、
参照コピーやスプレッドとは役割が違います。