分割代入の復習｜コードで実践

オブジェクトから中身を取り出す

分割代入は、オブジェクトや配列から必要な値だけを取り出して、別々の変数に入れる書き方です。

const profile = {
  name: "あおい",
  title: "Web エンジニア",
  bio: "動くものを作るのが好きです。",
};

// これまでの書き方
const name = profile.name;
const title = profile.title;

// 分割代入で同じことをする
const { name, title } = profile;

左辺に波かっこを書いて、その中にプロパティ名を並べます。並べた名前と同じ名前の変数が作られ、そこに値が入ります。書く順番は自由で、{ title, name } と書いても結果は同じです。オブジェクトはプロパティ名で取り出すので、並び順は関係ありません。

配列のときは角かっこを使います。こちらは名前ではなく位置で決まります。

const titles = ["レシピ検索アプリ", "買い物メモツール"];
const [first, second] = titles;
// first は "レシピ検索アプリ"

無かったときの値を決めておける

取り出したいプロパティが無いとき、そのままだと undefined が入ります。イコールで既定値を書いておくと、undefined のときだけその値が使われます。

const profile = { name: "あおい", title: "Web エンジニア" };
const { name, bio = "よろしくお願いします。" } = profile;

bio; // よろしくお願いします。

注意点として、既定値が使われるのは値が undefined のときだけです。null や空文字が入っているときは、その値がそのまま使われます。

なぜ React でこれが要るのか

次の章で出てくる props の受け取りが、まさにこの形だからです。React のコンポーネントは、親から渡された値をオブジェクト 1 個で受け取ります。

// 分割代入を使わない受け取り方
function ProfileCard(props) {
  return <h2>{props.name}（{props.title}）</h2>;
}

// 分割代入で受け取る書き方
function ProfileCard({ name, title }) {
  return <h2>{name}（{title}）</h2>;
}

下の書き方なら、引数のかっこを見ただけで「このコンポーネントは name と title を必要としている」と分かります。React のコードでコンポーネントの仕様を読むとき、まず見るのはこの部分です。既定値も同じように書けるので、function WorkCard({ title, published = false }) のように「渡さなかったときの値」をその場で決められます。

分割代入は、第3章の props と、第5章のフォームで受け取るイベントオブジェクトの両方で使います。ここで手になじませておくと、あとが楽になります。

つまずきどころ

波かっこと角かっこを取り違えると動きません。オブジェクトは波かっこ、配列は角かっこです。

const profile = { name: "あおい" };
const [name] = profile; // エラー profile is not iterable

演習

プロフィールのオブジェクトを受け取り、分割代入で中身を取り出して自己紹介の文を組み立てます。

分割代入の復習

オブジェクトから中身を取り出す

無かったときの値を決めておける

なぜ React でこれが要るのか

つまずきどころ

演習

要件

入出力例

ヒント

メモ