こんにちは、Reiです。
コードを書いていると、
オブジェクトや配列の中から
特定のデータを取り出したい場面がよくあります。
例えば、
・ユーザー情報の名前だけ取り出す
・配列の最初の要素を使う
・必要なデータだけ変数に入れる
といった処理です。
これまでの書き方でも実現できますが、
項目が増えるとコードが長くなってしまいます。
こうしたときに便利なのが
「分割代入（Destructuring）」 です。
分割代入を使うことで、
データの塊から必要な値をまとめて取り出すことができます。
JavaScriptではよく使われる便利な書き方なので、
基本から整理していきましょう！
基本の考え方「分割代入」
まずは、これまでの書き方を見てみましょう。
const user = {
id: 1,
name: "田中",
age: 25
};
const name = user.name;
const age = user.age;このように、
オブジェクトの値を取り出すときはuser.name のように書いて1つずつ変数に代入していました。
分割代入を使うと、次のように書くことができます。
const { name, age } = user;
これだけで、
name → “田中”
age → 25
がそれぞれの変数に代入されるのです。
オブジェクトの分割代入
オブジェクトの場合は、
取り出したい「キー名」を指定して値を取り出します。
const user = {
id: 1,
name: "田中",
age: 25
};
const { name, age } = user;
console.log(`${name}さんは${age}歳です`);
このコードでは、次のような処理が行われています。
① user オブジェクトを確認する
{
id: 1,
name: “田中”,
age: 25
}
② name と age のキーを探す
name → “田中”
age → 25
③ 同じ名前の変数に代入する
name = “田中”
age = 25
その結果、
田中さんは25歳です
と表示されます。
もし指定したキーが存在しない場合は、
エラーにはならず undefined（値がない状態）になります。
なぜ変数名を合わせる必要があるの？
オブジェクトの分割代入では、
const { name, age } = user;のように書きます。
これは、
user.name
user.age
というキーを探して値を取り出す仕組みだからです。
つまり、
・name というキーの値 → name に代入
・age というキーの値 → age に代入
という対応関係になっています。
もし、
const { userName } = user;のように書いた場合、
userName というキーは存在しないため
userName = undefinedになります。
そのため、基本的には
オブジェクトのキー名と同じ名前の変数を書く必要があります。
配列の分割代入
配列でも同じように
分割代入を使うことができます。
ただし、オブジェクトとは違い、
配列では「順番」で値が取り出されます。
const colors = ["赤", "青", "黄色"];
const [red, blue] = colors;
console.log(red);
console.log(blue);
このコードでは、次の順番で処理が行われています。
① 配列の最初の要素を取り出す
red = “赤”
② 次の要素を取り出す
blue = “青”
③ それぞれの変数に代入する
このように、
const [変数1, 変数2] = 配列
と書くことで、
配列の要素を順番に取り出すことができます。
オブジェクトの分割代入では { } を使いましたが、
配列では [ ] を使うのがポイントです！
必要な要素だけ取り出す
配列の分割代入では、
途中の要素を飛ばすこともできます。
const numbers = [10, 20, 30];
const [, , third] = numbers;
console.log(third); // 30 と出力される
10 → 無視
20 → 無視
30 → third
となります。
このように、
必要な位置のデータだけを取り出すこともできます。
別の名前で受け取る
オブジェクトの分割代入では、
変数名を変更して受け取ることもできます。
const user = {
name: "田中"
};
const { name: userName } = user;
console.log(userName);
name → userName
という名前で値を受け取っています。
既に同じ名前の変数がある場合などに
便利な書き方です。
デフォルト値を設定する
分割代入では、
値が存在しない場合の「初期値」を設定することもできます。
const user = {
name: "田中"
};
const { name, country = "日本" } = user;
console.log(country); // →日本 と出力
country が存在しないため、日本 が自動的にcountryに代入されます。
このように、
データがない場合の保険として
デフォルト値を設定することができます。
Reactでよく使われる理由
Reactのコードでは、
分割代入がとてもよく使われます。
例えば、
コンポーネントが受け取るデータ（Props）は
次のように書かれることが多いです。
const Profile = ({ name, age }) => {
return <p>{name}さんは{age}歳です</p>;
};
この書き方では、
props.name
props.age
と書く代わりに、
関数の引数の段階で
分割代入を行っています。
このように分割代入を使うことで、
・コードが短くなる
・読みやすくなる
・タイピングミスを減らせる
といったメリットがあります。
まとめ
ここまで、JavaScriptの 分割代入 を見てきました。
分割代入を使うと、
オブジェクトや配列から必要な値を
簡単に取り出すことができます。
＼＼ 今回のまとめ ／／
・ 分割代入はデータの中から値を取り出す書き方
・ オブジェクトは { } を使ってキー名で取り出す
・ 配列は [ ] を使って順番で取り出す
・ 必要な要素だけ取り出すこともできる
・ 別名やデフォルト値を設定することも可能
・ Reactでは Props を受け取るときによく使われる
分割代入を使えるようになると、
コードをすっきり書けるようになります。
最初は少し記号が多く感じるかもしれませんが、
実際のコードを書いているうちに自然と慣れてきます。
ぜひ自分でもコードを書きながら、
使い方を試してみてください！
次は、
配列やオブジェクトをコピーしたり、
データをまとめたりできる便利な書き方
「スプレッド構文（Spread構文）」
を見ていきましょう！
コメント