目次

React入門

スプレッド構文

Reactというよりかは、javascriptの話ですね。
簡単に言うと、配列やオブジェクトを...で簡単に展開できます。
ってことだと思います。

最近よく利用することが多いので紹介しておきます。

こういうサイトを使うと、
サクッと試していただけると思います。

説明はしません。
先程のサイトなどで実行して試してもらうと、すぐ理解できると思います。

スプレッド構文の例（配列）

const arr1 = [1,2,3,4];

// 配列のクローン
const arr2 = [...arr1];
console.log(arr2);
// arr1を展開しつつ、他の値も追加
const arr3 = [0, ...arr1, 5,6,7];
console.log(arr3);
// 複数の配列を展開
const arr4 = [...arr1,...arr3];
console.log(arr4);

スプレッド構文の例（オブジェクト）

const obj1 = { a: 1, b: 2}

const obj2 = { ...obj1 }
console.log('オブジェクトのクローン1: ' + JSON.stringify(obj2))

const obj3 = { ...obj1, c: 3 }
console.log('オブジェクトのクローン2: ' + JSON.stringify(obj3))

const obj4 = { ...obj1, ...{ c: 3, d: 4} }
console.log('オブジェクトのマージ: ' + JSON.stringify(obj4))

const obj5 = { ...obj1, b: 5 }
console.log('値を上書き: ' + JSON.stringify(obj5))

const obj6 = { ...obj1, ...{ a:9, d: 7 }}
console.log('値を上書き2: ' + JSON.stringify(obj6))

以上