はじめに

突然ですが、Reactのステートフックを使う際に、出てくる
[変数1, 変数2] = useState(初期値)
これ、何だと思いますか？

配列？っぽいな、React特有の呪文かな？と思っていたのは私です。

これは、分割代入というJSの書き方を使っています。

分割代入

分割代入とは、右辺に置いた配列やオブジェクトの値を左辺の変数に代入するもの。

配列 & 分割代入

まずは、配列でつかう分割代入を見ていきます。
下記の例では、配列の中身を取り出すためには、配列名[インデックス番号]が必要です。

const arr = [1,2,3]
console.log(arr[2])
-> 3

ここで分割代入を使って、配列arrを代入してみます。

const [hoge,foo,woo,yee] = arr

console.log(hoge)
->1

console.log(yee)
->undefined

// const hoge = arr[0]
// const foo = arr[1] 
// const woo = arr[2] 
// で一つずつ入れるよりスマートですね

ちなみに、代入する値より多い変数を定義した場合、上記のようにundefinedとなります。
分割代入を使うと代入するのと、呼び出すのが楽になりますので、慣れていきたいと思う今日このごろ。

オブジェクト & 分割代入

上記では、配列を分割代入しましたが、オブジェクトでも使えます。
が、ちょっとだけ配列のときと雰囲気違うので一度まとめておきます。

// まず、オブジェクトを作成
const person = { name: "Taro", age: 20, address: "Tokyo" };

// ここで[name, score]で受けるとエラーになるので、左辺と右辺で揃えること
const {address, score} = person
console.log(address)
-> Tokyo

console.log(score)
-> undefined

オブジェクトを分割代入した場合、オブジェクトのプロパティ名と同じ変数名を左辺に入れて置くと、自動的に対応する値が代入されます。
配列のときは、配列の中身が順番に代入されていました。

オブジェクトの場合は、
順番は関係なく、プロパティ名と一致した変数に値が代入されていきます。

もちろん、プロパティ名として使われていないものを変数名に入れると、中身はundefinedになります。