初心者向け：多重代入（複数の値を一度に受け取る）
「多重代入」は、複数の値を一度に変数へ割り当てるテクニックです。JavaScriptでは主に「配列の分割代入」と「オブジェクトの分割代入」を使います。読みやすく、コード量を減らし、意図をはっきり示せます。
配列の分割代入
const arr = [10, 20, 30];
const [a, b, c] = arr;
console.log(a, b, c); // 10 20 30
- スキップ: いらない位置はカンマで飛ばせる
const [first, , third] = [1, 2, 3];
console.log(first, third); // 1 3
- デフォルト値: 値がないときの初期値を指定
const [x = 0, y = 0] = [5];
console.log(x, y); // 5 0
- 残りをまとめる（rest）: 可変長を受ける
const [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail); // 1 [2, 3, 4]
- 入れ替え（swap）: 一時変数なしで値を交換
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1
オブジェクトの分割代入
const user = { name: "Taro", age: 20 };
const { name, age } = user;
console.log(name, age); // "Taro" 20
- プロパティ名を変えて受け取る（別名）:
const { name: userName, age: years } = user;
console.log(userName, years); // "Taro" 20
- デフォルト値:
const { city = "N/A" } = { name: "Taro" };
console.log(city); // "N/A"
- ネストした取り出し:
const data = { profile: { id: 1, tags: ["js", "web"] } };
const { profile: { id, tags } } = data;
console.log(id, tags); // 1 ["js", "web"]
- 存在しないときの安全策（オプショナルチェーンと併用例）:
const cfg = {};
const theme = cfg.settings?.theme ?? "light";
console.log(theme); // "light"
関数の返り値を多重代入で受け取る
- 配列で返す関数:
function getPoint() { return [10, 20]; }
const [px, py] = getPoint();
console.log(px, py); // 10 20
- オブジェクトで返す関数（順番に依存しない）:
function getUser() { return { name: "Taro", age: 20 }; }
const { name, age } = getUser();
console.log(name, age); // "Taro" 20
- よくあるパターン（エラーと結果）:
function tryParse(s) {
try { return [true, JSON.parse(s)]; }
catch (e) { return [false, e]; }
}
const [ok, result] = tryParse('{"a":1}');
console.log(ok, result); // true { a: 1 }
実用パターン
- 配列の先頭と残り:
const codes = ["JP", "US", "UK"];
const [primary, ...others] = codes;
console.log(primary, others); // "JP" ["US", "UK"]
- APIレスポンスから必要な項目だけ:
const response = { status: 200, data: { user: { id: 1, name: "Taro" } } };
const { data: { user: { id, name } } } = response;
console.log(id, name); // 1 "Taro"
- 文字列分割＋多重代入（CSV 風）:
const line = "Taro,20,Tokyo";
const [n, ageStr, city] = line.split(",");
console.log(n, Number(ageStr), city); // "Taro" 20 "Tokyo"
よくあるつまずきと注意点
- 順番依存（配列）: 配列の分割代入は「位置」が意味を持つ。順番を変更すると意味が変わる。
- キー依存（オブジェクト）: オブジェクトの分割代入は「プロパティ名」が一致していないと取れない。
- 未定義アクセス: ネスト分割で途中が undefined だとエラーになる。必要なら
?.と??を併用。 - 既存変数への再代入（オブジェクト）: すでにある変数へ再代入する場合は丸括弧が必要になることがある。
let a;
({ a } = { a: 42 }); // 丸括弧で式扱いにする
console.log(a); // 42
ミニ練習
- 問1: 配列 [1,2,3] から先頭だけ a に、残りを rest に入れよ。
const [a, ...rest] = [1, 2, 3];
console.log(a, rest); // 1 [2, 3]
- 問2: user={name:”Hanako”, age:22} から name を別名 userName で受け取れ。
const user = { name: "Hanako", age: 22 };
const { name: userName } = user;
console.log(userName); // "Hanako"
- 問3: “x=10;y=20” をセミコロンで分割し、x と y の数値を取り出せ。
const [xPart, yPart] = "x=10;y=20".split(";");
const [, xStr] = xPart.split("=");
const [, yStr] = yPart.split("=");
console.log(Number(xStr), Number(yStr)); // 10 20
- 問4: 関数 getRect が {w,h} を返す。幅と高さを受け取って面積を求めよ。
function getRect() { return { w: 5, h: 8 }; }
const { w, h } = getRect();
console.log(w * h); // 40
まとめ
- 配列の分割代入は「位置で受け取る」、オブジェクトの分割代入は「名前で受け取る」。
- デフォルト値、rest、スキップ、別名、ネストなどで柔軟に扱える。
- 関数の返り値を配列/オブジェクトにしておくと、呼び出し側が多重代入で読みやすく受け取れる。
- 未定義に注意し、必要なら
?.と??を併用して安全に書く。
