はじめに
前回の記事では、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
👉 スキップもできる
2. オブジェクトの分割代入
const user = { name: "ムカイ", age: 26 };
const { name, age } = user;
console.log(name); // ムカイ
✅ キー名と変数名が一致するなら、簡略に書ける
const { name: username } = user;
console.log(username); // ムカイ
👉 別名をつけたいときは : を使う
3. スプレッド構文（展開）
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 }
👉 オブジェクトも展開できる
4. restパラメータ（残り全部受け取る）
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
console.log(sum(1, 2, 3)); // 6
✅ 「不特定数の引数をまとめて扱う」関数で便利
5. 分割代入 + デフォルト値 = 最強
const user = { name: "ムカイ" };
const { name, age = 20 } = user;
console.log(age); // 20（userにageがなければ20になる）
👉 APIレスポンス処理などでめちゃくちゃ便利
6. よくある「ChatGPTが使ってくる構文」読解練習
function greet({ name, age = 18 }) {
console.log(`Hi ${name}, you are ${age}`);
}
greet({ name: "ムカイ" }); // → Hi ムカイ, you are 18
✅ 何が起きてる？
-
greetの引数で直接オブジェクトのプロパティを受け取ってる - ageにデフォルト値が指定されてる
→ ChatGPTはこういう記述をナチュラルに返す。読めないとカスタマイズできない。
まとめ：構文の「意図」がわかれば怖くない
| 構文 | 使う意味 |
|---|---|
| 配列分割 | 順番で値を取り出す |
| オブジェクト分割 | キー名でピンポイント抽出 |
| スプレッド | 値をコピー・合体・展開する |
| restパラメータ | 可変引数を配列で受け取る |
| デフォルト値 | 未定義でも安全に処理する |
おわりに
分割代入やスプレッド構文は、今どきのJSでは「読めないと詰む」くらい頻出な構文です。
ChatGPTを“ただの自動コーディングマシン”にせず、“相棒”として使いこなすには、こうした構文の理解が不可欠。