スプレッド構文とは
スプレッド構文について説明します。
スプレッド構文は配列やオブジェクトを「展開」する機能を持ちます。
まずは下記のようなpersonというオブジェクトがあったとします。
const person = {
name: "Alice",
age: 25,
city: "Tokyo"
};
このpersonの中身を複製したnewPersonというオブジェクトを作成したいとして、
const newPerson = person;このように記述すると、Javascriptの特性上「複製」ではなくnewPersonが元のpersonのデータを指すという意味になります。
これだと、newPersonの中身だけ変更したい場合など、複製した上でそのデータを扱う場合に不便です。そこで使用するのがスプレッド構文です。
書き方は下記のように、複製したいpersonの前に「…」をつけます。
const newPerson = { ...person };このように記述することで、personの中身を展開した上で複製し、新たなnewPersonを作成できます。
今回はオブジェクトを例に出しましたが配列でも使用可能です。
スプレッド構文を使ったデータの継承
オブジェクトとスプレッド構文を使って複数のデータを継承してみましょう。
まずはapp/components/offspringフォルダに「spreadGC.js」を作成し、SpreadGcコンポーネントを定義します。
export default function SpreadGc(props) {
return (
<div>
<h3>I am the grandchild.</h3>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
<p>Favorite Color: {props.color}</p>
</div>
);
}
次にapp/componentsフォルダに「spreadChild.js」を作成しSpreadChildコンポーネントを定義します。
import SpreadGc from "./offspring/spreadGC";
export default function SpreadChild(props) {
return (
<div>
<h2>I am the child.</h2>
{/* スプレッド構文で全てのpropsを孫に渡す */}
<SpreadGc {...props} />
</div>
);
}
最後にapp/page.jsでSpreadChildコンポーネントを定義し、personオブジェクトをpropsとして渡します。
import SpreadChild from "./components/spreadChild"; const person = {
name: "Alice",
age: 25,
color: "blue",
}; <h1>I am the parent.</h1>
{/* スプレッド構文で複数プロパティを子に渡す */}
<SpreadChild {...person} />
このように表示されました
propsはオブジェクト
今回行ったスプレッド構文を使ったデータの継承を図にまとめると下記のようになります。
この図でも記載のある通り、propsはオブジェクトです。
その性質を利用したデータ継承方法ということです。
propsの特徴
propsはオブジェクトですが、通常のオブジェクトとは異なる特徴があります。
- オブジェクトなので分割代入やスプレッド構文が使える
- 読み取り専用（変更不可）
- 何も渡されないと
{}になる
データ継承の他の方法
ここまでpropsを使ったデータ継承を見てきました。
しかし、
親から子、子から孫に明示的に渡す必要があるので、深いネストでの管理が複雑になる場合がある
というデメリットがあります。
ですので、他の方法としてContext APIやReduxのような状態管理ツールといったものがReactでは用意されています。
今は「そういうものもあるんだな」程度に考えておいてください。
コメント