今日もしがめる味がする勉強会の復習【Day43 of 100】

今回の勉強会のコードには

「…」　テンテンテン、が分からん！

でも今回のコードに多発するんですよね。なので勉強することに

スプレッド構文

というらしい。

で、色々勉強してみた

スプレッド構文（...）が「中身をバラバラに広げる」というイメージが掴めてきたところで、具体的にどう操作するのか、ReactやJavaScriptの開発でよく使う3つのパターンを紹介します。

1. 配列をコピーしつつ「新しい要素」を追加する

ReactのState更新で最もよく使うパターンです。元の配列を壊さず、新しい配列を作ります。

JavaScript

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 配列の「後ろ」に追加
let addBack = [...array, 10]; 
// 結果: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// 配列の「前」に追加
let addFront = [0, ...array]; 
// 結果: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

2. 複数の配列を「合体」させる

昔は concat() というメソッドを使っていましたが、スプレッド構文なら直感的に書けます。

JavaScript

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let extra = [10, 11, 12];
// 2つの配列を合体
let combined = [...array, ...extra];
// 結果: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
// 間に別の要素を挟むことも可能
let sandwich = ["start", ...array, "end"];
// 結果: ["start", 1, 2, ..., 9, "end"]

3. 関数の「引数」としてバラバラに渡す

Math.max()（最大値を出す関数）などは、配列をそのまま渡すとエラーになりますが、スプレッド構文で広げてあげると計算できるようになります。

JavaScript

let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// そのまま渡すとエラー（NaN）
console.log(Math.max(array)); 
// スプレッド構文でバラバラにして渡す
console.log(Math.max(...array)); 
// これは Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9) と書いたのと同じ意味になります！
// 結果: 9

💡 とらゼミさんの動画的なポイント

とらゼミさんの動画でも、コンポーネントにデータを渡すときに ...props と書く場面が出てくるかもしれません。これは「propsの中身をバラバラにして、子コンポーネントに丸ごと引き継ぐ」という非常に便利なテクニックです。

スプレッド構文を使いこなせると、Reactのコードがぐっと「モダン」で読みやすくなりますよ。

次は、これを使って「ボタンを押すたびに配列にランダムな数字が増えていく」ようなReactの機能を一緒に作ってみますか？

今回の成果物はこちら

https://kiyo4810.github.io/autocal/html_ver/index13.html