はじめに

前回の記事では、ChatGPTが当たり前のように使ってくる“関数まわり”の仕組みについて解説しました。

今回は、ChatGPTがよく出してくるけど「なんとなく書いてるだけ」になりがちな、分割代入・スプレッド構文・restパラメータなどの“構文理解”を深掘りしていきます。

「動くけど、カスタマイズは無理」という状態から脱出しよう！

1. 配列の分割代入

const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a); // 1
console.log(b); // 2

✅ 配列の順番で変数に代入される

const [first, , third] = [10, 20, 30];
console.log(third); // 30

👉 スキップもできる

const user = { name: "ムカイ", age: 26 };
const { name, age } = user;
console.log(name); // ムカイ

✅ キー名と変数名が一致するなら、簡略に書ける

const { name: username } = user;
console.log(username); // ムカイ

👉 別名をつけたいときは : を使う

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // [1, 2, 3, 4]

✅ 配列のコピーやマージに使える

const user = { name: "ムカイ" };
const extended = { ...user, age: 26 };
console.log(extended); // { name: "ムカイ", age: 26 }

👉 オブジェクトも展開できる

function sum(...numbers) {
  return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3)); // 6

✅ 「不特定数の引数をまとめて扱う」関数で便利

const user = { name: "ムカイ" };
const { name, age = 20 } = user;
console.log(age); // 20（userにageがなければ20になる）

👉 APIレスポンス処理などでめちゃくちゃ便利

function greet({ name, age = 18 }) {
  console.log(`Hi ${name}, you are ${age}`);
}

greet({ name: "ムカイ" }); // → Hi ムカイ, you are 18

✅ 何が起きてる？

→ ChatGPTはこういう記述をナチュラルに返す。読めないとカスタマイズできない。

分割代入やスプレッド構文は、今どきのJSでは「読めないと詰む」くらい頻出な構文です。

ChatGPTを“ただの自動コーディングマシン”にせず、“相棒”として使いこなすには、こうした構文の理解が不可欠。