こんにちは！フロントエンド開発の世界へようこそ。JavaScriptを書き始めると、オブジェクトや配列から値を取り出して変数に入れる作業が頻繁に発生しますよね。そんな時、従来のような「一行ずつ変数に代入する」やり方を卒業できるのが「分割代入」という機能です。
なぜ分割代入を使うのか？
例えば、ユーザー情報が入ったオブジェクトから名前と年齢を取り出す場合を考えてみましょう。従来の方法だと「const name = user.name;」「const age = user.age;」というように、似たようなコードを何度も書く必要がありました。これがデータ量に応じて増えていくと、コードが冗長になって読みづらくなってしまいます。
分割代入を使えば、この作業をたった一行にまとめることができます。
基本の書き方：オブジェクト編
オブジェクトから値を取り出す時は、波括弧 {} を使います。
const user = { name: “太郎”, age: 25, job: “エンジニア” };
const { name, age } = user;
これだけで、変数 name に「太郎」、変数 age に「25」が代入されます。変数名とプロパティ名が一致していることがポイントです。もし「別名で変数を使いたい」という場合は、「const { name: userName } = user;」のようにコロンを使って名前を変えることも可能です。
基本の書き方：配列編
配列の場合は、波括弧ではなく角括弧 [] を使います。
const colors = [“赤”, “青”, “緑”];
const [first, second] = colors;
このように書くと、first には「赤」、second には「青」が入ります。配列は順番が重要なので、インデックス番号を意識せずに直感的に値を取り出せるのが大きなメリットです。
実践的な活用シーン：関数の引数
分割代入が最も輝くのは、関数の引数を受け取る時です。コンポーネントや関数にオブジェクトを渡す際、引数の段階で分割してしまえば、内部で「user.name」と何度も書く必要がなくなり、コードの可読性が格段に上がります。
function showProfile({ name, job }) {
console.log(`${name}さんは${job}として働いています。`);
}
このように、必要なプロパティだけをあらかじめ抜き出しておくことで、関数内で今どのデータを使っているのかが一目瞭然になります。
まとめ
分割代入は、単なる省略テクニックではなく「必要なデータだけをスマートに取り出す」ための現代的な作法です。最初は少し独特な見た目に感じるかもしれませんが、慣れてしまうと「これなしではコードが書けない！」と思うほど便利です。ぜひ今日から、オブジェクトや配列を扱う際に意識的に使ってみてくださいね。