JavaScriptの分割代入（Destructuring assignment）とは？
分割代入とは、配列やオブジェクトから特定の値を直接変数に取り出すことができる構文です。
より短く、読みやすいコードを書くことができます。
📦 配列の分割代入
// 通常の配列取り出し
const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];
// 分割代入を使うと
const [a, b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2
📦 オブジェクトの分割代入
const obj = { name: 'Alice', age: 25 };
// 通常の方法
const name = obj.name;
const age = obj.age;
// 分割代入を使うと
const { name, age } = obj;
console.log(name); // Alice
console.log(age); // 25
💡 関数の引数で使う（よく使う！）
function greet({ name, age }) {
console.log(`Hello, ${name}. You are ${age} years old.`);
}
greet({ name: 'Bob', age: 30 });
🔄 プロパティ名を変えたい（エイリアス）
const user = { id: 123, nickname: 'ryo' };
// nickname を別名として取り出す
const { nickname: displayName } = user;
console.log(displayName); // 'ryo'
🧪 デフォルト値をつける
const settings = { theme: 'dark' };
// fontSize は存在しないので 16 が入る
const { theme, fontSize = 16 } = settings;
console.log(fontSize); // 16
✅ 分割代入のメリット
- コードが短くなる
- 引数の順番を意識しなくて済む（オブジェクト）
- デフォルト値・名前変更など柔軟な取り出しが可能
📝 よくある使用場面
- APIのレスポンスから必要な値を抜き出す
- React の props や useState
- 関数引数の受け取り（設定など）
ES6 (2015年) から使えるようになった機能です。
モダンなJSを書いていくうえで必須テクニックなので、ぜひ使いこなしていきましょう！
