8.1 オブジェクトのデストラクチャリング
JavaScriptのデストラクチャリングは、配列から値を取り出したり、オブジェクトのプロパティを別々の変数に 展開するための構文だよ。これにより、コードがよりクリーンで読みやすくなるんだ。この講義では、オブジェクトと配列のデストラクチャリングを詳しく 説明し、それぞれの例と応用を見ていくよ。
1. 基本構文
オブジェクトのデストラクチャリングを使うと、オブジェクト内のプロパティの値を抽出して変数に割り当てることができるよ：
const person = {
name: 'John',
age: 30,
isStudent: false
};
const { name, age, isStudent } = person;
console.log(name); // 出力: John
console.log(age); // 出力: 30
console.log(isStudent); // 出力: false
2. 新しい変数への割り当て
オブジェクトのプロパティの値を別の名前の変数に割り当てることもできるよ：
const person = {
name: 'John',
age: 30
};
const { name: personName, age: personAge } = person;
console.log(personName); // 出力: John
console.log(personAge); // 出力: 30
3. デフォルト値
オブジェクトにプロパティが存在しない場合、デフォルト値を設定できるよ：
const person = {
name: 'John',
age: 30
};
const { name, isStudent = true } = person;
console.log(isStudent); // 出力: true
4. ネストされたデストラクチャリング
ネストされたオブジェクトから値を抽出することもできるよ：
const person = {
name: 'John',
address: {
city: 'New York',
country: 'USA'
}
};
const { name, address: { city, country } } = person;
console.log(city); // 出力: New York
console.log(country); // 出力: USA
5. 関数のパラメータでのデストラクチャリング
デストラクチャリングは関数のパラメータでも使えるよ：
function greet({ name, age }) {
console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
const person = {
name: 'John',
age: 30
};
greet(person); // 出力: Hello, my name is John and I am 30 years old.
8.2 配列のデストラクチャリング
1. 基本構文
配列のデストラクチャリングを使うと、配列の要素を抽出して変数に割り当てることができるよ：
const fruits = ['apple', 'banana', 'cherry'];
const [first, second, third] = fruits;
console.log(first); // 出力: apple
console.log(second); // 出力: banana
console.log(third); // 出力: cherry
2. 要素のスキップ
抽出する必要がない配列の要素をスキップすることができるよ：
const fruits = ['apple', 'banana', 'cherry'];
const [first, , third] = fruits;
console.log(first); // 出力: apple
console.log(third); // 出力: cherry
3. デフォルト値
配列要素にデフォルト値を設定することができるよ：
const fruits = ['apple'];
const [first, second = 'banana'] = fruits;
console.log(second); // 出力: banana
4. ネストされたデストラクチャリング
ネストされた配列から値を抽出することもできるよ：
const numbers = [1, [2, 3], 4];
const [one, [two, three], four] = numbers;
console.log(two); // 出力: 2
console.log(three); // 出力: 3
5. 関数のパラメータでのデストラクチャリング
配列のデストラクチャリングを関数のパラメータで使うこともできるよ：
function getFullName([firstName, lastName]) {
return `${firstName} ${lastName}`;
}
const nameArray = ['John', 'Doe'];
console.log(getFullName(nameArray)); // 出力: John Doe
8.3 デストラクチャリングの応用例
1. 変数の値を交換する
デストラクチャリングを使うと、変数の値を簡単に交換できるよ：
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a); // 出力: 2
console.log(b); // 出力: 1
2. オブジェクトからデータを抽出する
デストラクチャリングは、オブジェクトからのデータ抽出を簡単にするよ。例えば、APIのレスポンスからデータを抽出する場合：
const response = {
data: {
user: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
}
};
const { data: { user: { id, name, email } } } = response;
console.log(name); // 出力: John Doe
console.log(email); // 出力: john@example.com
3. 関数でのデフォルト設定
デストラクチャリングは、関数のパラメータにデフォルト値を簡単に設定できるよ：
function createUser({ name = 'Anonymous', age = 0, isAdmin = false } = {}) {
return {
name,
age,
isAdmin
};
}
console.log(createUser({ name: 'Alice', age: 25 }));
// 出力: { name: 'Alice', age: 25, isAdmin: false }
console.log(createUser());
// 出力: { name: 'Anonymous', age: 0, isAdmin: false }
4. 配列と関数
デストラクチャリングは、特に配列メソッドを使う際、配列の操作を簡単にするよ：
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 出力: 1
console.log(second); // 出力: 2
console.log(rest); // 出力: [3, 4, 5]
GO TO FULL VERSION