分割代入は必ず使ったほうがよいですか

取り出す値が 2 つ以上あるときは読みやすくなります。1 つだけなら work.title と書いたほうが素直な場面も多いです。関数の引数で使うと呼び出し側が名前付きで値を渡せるようになるため、そこが最も効果の大きい使いどころです。

既定値が使われる条件を教えてください

値が undefined のときだけです。null や 0 や空文字が入っていた場合はその値がそのまま採用されます。?? と同じ判定基準なので、null を既定値に置き換えたいときは分割代入の後にもう一段 ?? を書く必要があります。

入れ子の分割代入でエラーになります

途中の階層が undefined だとエラーになります。入れ子の分割代入をするなら途中の階層にも既定値の空オブジェクトを置くか、素直に work?.links?.url と書くほうが安全です。深い分割代入は読みにくくなりがちなので使いすぎに注意してください。

分割代入｜コードで実践 - ゆめさくコード

このレッスンで分かること

const { title, year } = work でオブジェクトから複数の値を一度に取り出せます

const [first, second] = arr で配列からも取り出せます

既定値 = "無題"、名前の付け替え title: name、関数の引数での分割代入まで使えます

分割代入とは

オブジェクトや配列から必要な値をまとめて変数に取り出す書き方です。既定値を添えたり、別の名前を付けたりもできます。

同じ名前を 3 回書くのをやめる

前のレッスンまでで、作品オブジェクトから値を取り出す方法は身に付きました。ただ、実際に書いてみると気になることがあります。

function formatWork(work) {
  const title = work.title;
  const year = work.year;
  const views = work.views;
  return title + " (" + year + ") " + views + " 回";
}

title という単語が 1 行に 2 回、全体で何度も出てきます。やっていることは「同じ名前の変数に移し替える」だけなのに、行数だけが増えていきます。

function formatWork(work) {
  const { title, year, views } = work;
  return title + " (" + year + ") " + views + " 回";
}

これが分割代入 (destructuring) です。{} の中に書いたキー名と同じ名前の変数が作られ、対応する値が入ります。3 行が 1 行になりました。

分割代入は 2015 年の ES2015 で入った書き方で、いまでは現代的な JavaScript コードのほぼ全てに登場します。React のコードを開いて最初の数行を見ると、まず間違いなくこれが並んでいます。

オブジェクトの分割代入

基本形をもう一度確認します。左辺に {}、右辺にオブジェクトです。

const work = { title: "プロフィールサイト", year: 2026, views: 120 };

const { title, year } = work;
console.log(title);   // プロフィールサイト
console.log(year);    // 2026

要らないキーは書かなくてかまいません。順番も自由です。オブジェクトはキーの名前で対応を取るので、const { year, title } = work; と書いても結果は同じです。

無いキーは undefined になる

対応するキーが無いときは undefined が入ります。

const work = { title: "自己紹介カード" };
const { title, year } = work;
console.log(year);   // undefined

そこで既定値を添えられます。

const { title, year = 2026 } = work;
console.log(year);   // 2026

既定値が使われるのは、値が undefined のときだけです。null や 0 や "" が入っていた場合は、そのままの値が採用されます。この判定基準は ?? や ?. と同じで、第 3 章から一貫しています。

const { views = 0 } = { views: null };
console.log(views);   // null  既定値は使われない

別の名前を付ける

キーの名前をそのまま変数名にしたくないときは、コロンを使って付け替えられます。

const work = { title: "スキル一覧の表", year: 2026 };

const { title: name, year: createdYear } = work;
console.log(name);          // スキル一覧の表
console.log(createdYear);   // 2026

title: name は「title というキーの値を name という変数に入れる」と読みます。左がキー、右が変数名です。方向を逆に覚えやすいので気を付けてください。付け替えと既定値は同時にも使えます。

const { title: name = "無題" } = {};
console.log(name);   // 無題

書き方	意味
`const { title } = work`	`work.title` を変数 `title` に取り出す
`const { title = "無題" } = work`	無いときは `"無題"` を使う
`const { title: name } = work`	変数名を `name` に変える
`const { title: name = "無題" } = work`	名前を変えつつ既定値も付ける
`const { links: { url } } = work`	入れ子の中から取り出す

入れ子の分割代入は便利ですが、途中が無いとエラーになります。

const work = { title: "自己紹介カード" };
const { links: { url } } = work;   // TypeError で止まる
const { links: { url } = {} } = work;   // これなら url は undefined

配列の分割代入

配列は名前ではなく位置で対応を取ります。左辺は [] です。

const skills = ["HTML", "CSS", "JavaScript"];

const [first, second] = skills;
console.log(first);    // HTML
console.log(second);   // CSS

飛ばしたい要素はカンマだけを置きます。

const [, , third] = skills;
console.log(third);   // JavaScript

配列でも既定値は使えます。

const [a, b, c, d = "未設定"] = skills;
console.log(d);   // 未設定

2 つの変数を入れ替えるときにも使えます。一時変数が要らなくなる有名な書き方です。

let x = 1;
let y = 2;
[x, y] = [y, x];
console.log(x, y);   // 2 1

オブジェクトは名前で、配列は位置で対応します。この違いが、前のレッスンで「意味の違う値はオブジェクトで返す」と説明した理由そのものです。位置で覚えなければならない情報は、増えるほど間違いやすくなります。

関数の引数で分割代入する

分割代入がいちばん活きるのは、関数の引数です。

function formatWork({ title, year }) {
  return title + " (" + year + ")";
}

console.log(formatWork({ title: "プロフィールサイト", year: 2026 }));
// プロフィールサイト (2026)

引数の位置に直接 { title, year } と書けます。呼び出す側はオブジェクトを 1 つ渡すだけ、関数の中では最初から必要な値が変数になっている状態から始められます。既定値も同じように書けます。

function formatWork({ title = "無題", year = "年不明" }) {
  return title + " (" + year + ")";
}

console.log(formatWork({}));   // 無題 (年不明)

引数そのものが渡されない可能性があるなら、引数全体にも既定値を付けます。

function formatWork({ title = "無題" } = {}) {
  return title;
}
console.log(formatWork());   // 無題

よくある間違い

付け替えの向きを逆にする

const { name: title } = work;   // work.name を title に入れる (意図と逆)
const { title: name } = work;   // work.title を name に入れる

左がキー、右が新しい変数名です。「元の名前から新しい名前」の順と覚えます。

オブジェクトなのに [] を使う

const [title] = { title: "プロフィールサイト" };   // TypeError
const { title } = { title: "プロフィールサイト" };  // 正しい

配列は []、オブジェクトは {} です。オブジェクトは位置を持たないので [] では取り出せません。

文の先頭に { を置いて代入する

let title;
{ title } = work;      // SyntaxError  ブロックだと解釈される
({ title } = work);    // カッコで囲めば通る

宣言と同時に書く const { title } = work; なら問題は起きません。後から代入したいときだけ、この落とし穴があります。

この章のポイント

ここまでの要点 オブジェクトは名前で、配列は位置で取り出す。既定値は undefined のときだけ効く。付け替えは キー: 変数名。関数の引数でもそのまま使える。

やってみよう

作品オブジェクトを受け取って表示用の文字列を作る関数を、引数の分割代入で書きます。

引数の位置で { title, year } と分割代入する
title の既定値は "無題" にする
year の既定値は "年不明" にする
"タイトル (年)" の形の文字列を返す

formatWork({ title: "プロフィールサイト", year: 2026 }) は "プロフィールサイト (2026)" を返します。カッコの前の半角スペースを忘れないでください。

分割代入