Day 9：分割代入・Spread構文で「きれいに扱う＆安全にコピーする」を身につける
Day 9では、ReactのState更新でほぼ必須になる 分割代入 と Spread構文 を扱います。 ここをしっかり押さえておくと、コードが読みやすくなるだけでなく、「バグを生みにくい書き方」が自然にできるようになります。
オブジェクトの分割代入：欲しいプロパティだけを取り出す
分割代入って何をするもの？
分割代入（destructuring） は、
「オブジェクトや配列から、欲しい値だけを まとめて変数に取り出すための書き方」
です。
まずは、オブジェクトの分割代入から見ていきます。
// ユーザーオブジェクト
const user = {
name: "山田太郎",
age: 25,
email: "[email protected]",
};
これを普通に取り出すとこうなります。
const name = user.name;
const age = user.age;
const email = user.email;
分割代入を使うと、これを一気に書けます。
// オブジェクトの分割代入
const { name, age, email } = user;
console.log(name); // "山田太郎"
console.log(age); // 25
console.log(email); // "[email protected]"
{ name, age, email } = user「userから name / age / email を取り出して、それぞれ同名の変数に入れる」という意味です。
Reactコンポーネントで props を受け取るときにも、よくこの形が使われます。
// 例：Reactコンポーネント内
const UserCard = (props) => {
const { name, age } = props;
// name と age をそのまま使える
};
別名で受け取りたいとき
プロパティ名と違う名前の変数にしたいときは、「プロパティ名: 変数名」という形で書きます。
const user = {
name: "山田太郎",
age: 25,
};
// name を displayName という変数名で受け取る
const { name: displayName, age } = user;
console.log(displayName); // "山田太郎"
console.log(age); // 25
name: displayName「user.name を displayName という変数に入れる」という意味です。
配列の分割代入：順番で取り出す
配列の分割代入の基本
配列の場合は、「インデックス（順番）」に応じて変数に入っていきます。
const colors = ["red", "green", "blue"];
// 配列の分割代入
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
console.log(thirdColor); // "blue"
[]の中の変数が、配列の 0番目・1番目・2番目…に対応します。
Reactでは、useState の戻り値でこの形がよく登場します。
// 例：ReactのuseState
const [count, setCount] = useState(0);
// count: 現在の値
// setCount: 更新用の関数
一部だけ取り出したいとき
途中をスキップしたいときは、カンマだけ置いて「空席」にしておきます。
const colors = ["red", "green", "blue"];
// 2番目だけ欲しい場合
const [, secondColor] = colors;
console.log(secondColor); // "green"
- 最初の
,は「0番目をスキップする」という意味です。
Spread構文：...で「中身を展開する」
Spread構文って何？
Spread構文（スプレッド構文） は、... を使って、
「配列やオブジェクトの中身を、 その場に 展開 するための書き方」
です。
まずは配列から見ていきます。
const numbers = [1, 2, 3];
// Spread構文で中身を展開
console.log(...numbers); // 1 2 3
この「展開する力」を使うと、コピー や 結合 がとても簡単になります。
配列コピー：元の配列を壊さずに複製する
Spread構文で配列をコピーする
配列をコピーしたいとき、= で代入すると「同じものを指す別名」になってしまいます。
const original = [1, 2, 3];
const copy = original; // これは「コピー」ではなく「同じものへの別名」
copy.push(4);
console.log(original); // [1, 2, 3, 4] ← 元も変わってしまう
console.log(copy); // [1, 2, 3, 4]
ReactのStateでは「元の配列を直接書き換えない」ことがとても重要なので、 この書き方は避けたいです。
そこで登場するのが Spread構文です。
const original = [1, 2, 3];
// Spread構文で「中身だけ」を新しい配列に入れる
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] ← 元はそのまま
console.log(copy); // [1, 2, 3, 4] ← コピーだけが変わる
[...original]「originalの中身を展開して、新しい配列を作る」という意味です。- これで「元を壊さないコピー」が作れます。
配列を結合する
Spread構文は、配列同士を結合するときにも便利です。
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];
console.log(merged); // [1, 2, 3, 4]
[...a, ...b]「aの中身 → bの中身」という順番で並べた新しい配列を作ります。
オブジェクトコピー：元のオブジェクトを壊さずに複製する
Spread構文でオブジェクトをコピーする
オブジェクトも、= で代入すると「同じものへの別名」になります。
const user = { name: "山田太郎", age: 25 };
const copyUser = user; // 同じオブジェクトを指す
copyUser.age = 26;
console.log(user.age); // 26 ← 元も変わってしまう
console.log(copyUser.age); // 26
これを避けるために、Spread構文でコピーします。
const user = { name: "山田太郎", age: 25 };
// Spread構文でオブジェクトをコピー
const copyUser = { ...user };
copyUser.age = 26;
console.log(user); // { name: "山田太郎", age: 25 }
console.log(copyUser); // { name: "山田太郎", age: 26 }
{ ...user }「userのプロパティを展開して、新しいオブジェクトを作る」という意味です。- コピー側だけを変更しても、元のオブジェクトには影響しません。
一部の値を変更する：コピー＋上書きのパターン
オブジェクトの一部だけを変えたいとき
ReactのState更新でよく使うのが、
「元のオブジェクトをコピーして、 一部のプロパティだけを上書きする」
というパターンです。
const user = {
name: "山田太郎",
age: 25,
email: "[email protected]",
};
// 年齢だけを変更した新しいオブジェクトを作る
const updatedUser = {
...user, // まず元のプロパティを全部コピー
age: 26, // そのあと age を上書き
};
console.log(user);
/*
{
name: "山田太郎",
age: 25,
email: "[email protected]",
}
*/
console.log(updatedUser);
/*
{
name: "山田太郎",
age: 26,
email: "[email protected]",
}
*/
{ ...user, age: 26 }「userの中身をコピーしたあとで、ageだけを新しい値にする」という意味です。- 同じプロパティ名が後ろに書かれていると、そちらが優先されます。
ReactのState更新では、次のような形でよく使われます。
// 例：ReactのState更新イメージ
setUser((prevUser) => ({
...prevUser,
age: prevUser.age + 1,
}));
配列の一部だけを変えたいとき（イメージ）
配列の場合も、「コピー＋一部変更」の考え方が使えます。 少しだけイメージを示しておきます。
const numbers = [1, 2, 3];
// 2番目の要素だけを変更した新しい配列を作る
const updatedNumbers = numbers.map((n, index) => {
if (index === 1) {
return n * 10; // 2番目だけ10倍
}
return n; // それ以外はそのまま
});
console.log(numbers); // [1, 2, 3]
console.log(updatedNumbers); // [1, 20, 3]
- 配列は「位置」で管理されるので、
map()と組み合わせて「一部だけ変更した新しい配列」を作ることが多いです。
Day 9ミニテンプレート：分割代入＆Spread構文をまとめて試す
最後に、Day 9の内容をひとまとめに試せるテンプレートコードを用意しました。
// --- Day 9 分割代入・Spread構文ミニテンプレート ---
// 1. オブジェクトの分割代入
const user = {
name: "山田太郎",
age: 25,
email: "[email protected]",
};
const { name, age, email } = user;
console.log("名前:", name);
console.log("年齢:", age);
console.log("メール:", email);
// 別名で受け取る
const { name: displayName } = user;
console.log("表示名:", displayName);
// 2. 配列の分割代入
const colors = ["red", "green", "blue"];
const [firstColor, secondColor, thirdColor] = colors;
console.log("1番目:", firstColor);
console.log("2番目:", secondColor);
console.log("3番目:", thirdColor);
// 一部だけ取り出す
const [, onlySecond] = colors;
console.log("2番目だけ:", onlySecond);
// 3. Spread構文で配列コピー
const originalNumbers = [1, 2, 3];
const copiedNumbers = [...originalNumbers];
copiedNumbers.push(4);
console.log("元の配列:", originalNumbers); // [1, 2, 3]
console.log("コピー配列:", copiedNumbers); // [1, 2, 3, 4]
// 4. Spread構文でオブジェクトコピー
const originalUser = { name: "山田太郎", age: 25 };
const copiedUser = { ...originalUser };
copiedUser.age = 26;
console.log("元のユーザー:", originalUser); // age: 25
console.log("コピーユーザー:", copiedUser); // age: 26
// 5. 一部の値を変更する（オブジェクト）
const updatedUser = {
...originalUser,
age: 30, // ageだけ上書き
};
console.log("更新ユーザー:", updatedUser);
/*
{
name: "山田太郎",
age: 30,
}
*/
このテンプレートを少しずつ書き換えながら、
- 分割代入で取り出すプロパティや配列の位置を変えてみる
- Spread構文でコピーしたものをいろいろ変更して、元が変わらないことを確認する
- オブジェクトにプロパティを追加しつつ、一部だけ上書きするパターンを試してみる
といった練習をしていくと、ReactのState更新でよく見る書き方が「意味ごと」理解できるようになっていきます。
Day 9のまとめ
- オブジェクトの分割代入
{ name, age } = userのように書くことで、オブジェクトから欲しいプロパティだけをまとめて変数に取り出せます。 - 配列の分割代入
[first, second] = arrayのように、順番に応じて値を取り出せます。useStateの戻り値でも使われる形です。 - Spread構文
...を使って配列やオブジェクトの中身を展開し、コピーや結合を安全に行うことができます。 - 配列コピー・オブジェクトコピー
[...array]や{ ...object }で「元を壊さないコピー」を作り、コピー側だけを変更できます。 - 一部の値を変更する
{ ...user, age: 26 }のように、「コピー＋上書き」のパターンで、一部のプロパティだけを変更した新しいオブジェクトを作れます。
このDay 9の内容は、ReactのState更新（特にオブジェクトや配列のState）を正しく・きれいに書くための基礎になります。