JavaScript のオブジェクト分割代入（object destructuring assignment）は、ぜひ押さえておきたい機能です。オブジェクトから特定のプロパティを取り出して、そのまま新しい変数として扱えます。

例として、ユーザープロフィールから情報を取り出す場面を考えてみます。まずは、次のようなオブジェクトを定義します。

let userProfile = {
  name: "Satoshi Tajiri",
  email: "[email protected]",
  age: 58,
  location: "Tokyo",
};

分割代入を使わない場合、各プロパティはこう取り出します。

let name = userProfile.name;
let email = userProfile.email;
let age = userProfile.age;
let location = userProfile.location;

分割代入を使えば、これが一行で済みます。

let { name, email, age, location } = userProfile;

このコードは、ユーザープロフィールオブジェクトから name, email, age, location の各プロパティを取り出し、それぞれ同じ名前の新しい変数に代入しています。

では、これを React のコンポーネントで使ってみます。React では、コンポーネントのプロパティ（props）を分割代入するのがよくある書き方です。そのぶんコードがすっきりして、どのプロパティを使っているのかもはっきりします。ここでも同じユーザープロフィールを例に、まずは表示用のコンポーネントを定義します。

function UserProfile(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Email: {props.email}</p>
      <p>Age: {props.age}</p>
      <p>Location: {props.location}</p>
    </div>
  );
}

ここでは props を直接参照して各プロパティを取り出しています。分割代入を使うと、もっと短く書けます。

function UserProfile({ name, email, age, location }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Email: {email}</p>
      <p>Age: {age}</p>
      <p>Location: {location}</p>
    </div>
  );
}

今度は、関数の引数の部分で props オブジェクトを分割代入しています。その結果、コード内でprops.を繰り返す必要がなくなり、プロパティにも素直にアクセスできます。

分割代入は、コードを短く読みやすくするのに役立ちます。JavaScript のこうした基本を身につけて React の開発に持ち込むだけでも、書くコードはずいぶん扱いやすくなるはずです。