SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

Reactで分割代入とスプレット構文とレスト構文を使ってみる

作成日：2022月02月25日
更新日：2023年12月01日

javascriptの分割代入をReactで使用してみる。

分割代入

分割代入する場合としない場合のソースを下記に記載しました。

分割代入をしない

titleとchidrenをpropsから取り出している。

分割代入を使わない
export const Hoge = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <h2>{props.children}</h2>
    </div>
  );
};


export default function App() {
  return (
    <div className="App">
      <Hoge title="hogehoge">Hello world</Hoge>
    </div>
  );
}

分割代入

次は分割代入を行う形で書いてみます。

分割代入
//引数のところでpropsの値を分割代入する。
export const Hoge = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{children}</h2>
    </div>
  );
};


export default function App() {
  return (
    <div className="App">
      <Hoge title="hogehoge">Hello world</Hoge>
    </div>
  );
}

参考

【React】関数コンポーネントの引数（props）は分割代入で渡すとわかりやすい

スプレッド構文

スプレッド構文を使用する場合としない場合のソースを下記に記載しました。

スプレッド構文なし

Hogeコンポーネントのpropsに必要なpropsをすべて書く必要がある。

スプレッド構文なし
export const Hoge = ({ title, name, age, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{name}</h2>
      <h3>{age}</h3>
      <h4>{children}</h4>
    </div>
  );
};


export default function App() {


  return (
    <div className="App">
      {/* プロパティで渡す */}
      <Hoge title={'hogehoge'} name={'hoge太郎'} age={18}>Hello world</Hoge>
    </div>
  );
}

スプレッド構文を使って書いてみる

先に必要なpropsをオブジェクトにし、スプレッド構文で渡せば Hogeコンポーネントのpropsにいちいち全部を書く必要がなくなる

スプレッド構文あり
export const Hoge = ({ title, name, age, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{name}</h2>
      <h3>{age}</h3>
      <h4>{children}</h4>
    </div>
  );
};


export default function App() {
  // Hogeコンポーネントに渡すpropsを作成
  const hogeProps = {
    title: 'hogehoge',
    name: 'hoge太郎',
    age: 18,
  };


  return (
    <div className="App">
      {/* スプレッド構文で渡す */}
      <Hoge {...hogeProps}>Hello world</Hoge>
    </div>
  );
}

スプレッド構文の注意点

コンポーネント呼び出し側でスプレッド構文を使う場合は、
その順番に注意する。
下記の場合はageを99で設定しているがその後にスプレッド構文があるため
99は18で上書きされてしまう

上書きされる
export const Hoge = ({ title, name, age, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <h2>{name}</h2>
      <h3>{age}</h3>
      <h4>{children}</h4>
    </div>
  );
};


export default function App() {
  // Hogeコンポーネントに渡すpropsを作成
  const hogeProps = {
    title: 'hogehoge',
    name: 'hoge太郎',
    age: 18,
  };


  return (
    <div className="App">
      {/* {...hogeProps}が後にあるためage=99はage=18で上書きされる*/}
      <Hoge age={99} {...hogeProps} >Hello world</Hoge>
    </div>
  );
}

参考

このReactコンポーネントの{…props}はどういう意味ですか？

スプレッド構文の応用（再利用）

コンポーネントのタグに指定した

  • id
  • className
  • style
  • childern※中身 等すべて再利用したい場合は下記のように書く。

スプレッド構文を使う

コンポーネント側で引数で受け取ったpropsをスプレッド構文で書くことで コンポーネントの呼び出し側で設定しているidなどをすべて再利用することができる

再利用（スプレッド構文あり）
//再利用
export const H1 = (props)=>{
  // propsをスプレッド構文で書くことで呼び出し側の設定を再利用することができる
  return <h1 style={{ color: "tomato" }} {...props} /> 
}


export default function App() {
  return (
    <div className="App">
      <H1 id="hogehoge">
        hello world
      </H1>
    </div>
  );
}

スプレッド構文なしの場合

porpsで渡された値を設定してやる必要がある

再利用（スプレッド構文なし）
//スプレッド構文を使わない
export const H1 = (props)=>{
  return <h1 id={props.id} style={{ color: "tomato" }}> {props.children} </h1> 
}


export default function App() {
  return (
    <div className="App">
      <H1 id="hogehoge">
        fsafafdfds
      </H1>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

注意点

コンポーネント側でスプレッド構文を書く順に注意する。 H1コンポーネントではcolor:"blue"を設定しているが、 スプレッド構文で上書きされるため実際はcolor: "red"になってしまう

再利用の注意点
//再利用
export const H1 = (props)=>{
  // {...props}が後にあるための上書きされstyle={{ color: "red" }}が適応されてしまう
  return <h1  style={{ color: "blue" }} {...props} /> 
}


export default function App() {
  return (
    <div className="App">
      <H1 id="hogehoge" style={{ color: "red" }}>
        hello world
      </H1>
    </div>
  );
}

レスト構文

スプレッド構文とは逆で複数の要素を一つのオブジェクトにまとめることができる。

オブジェクトをまとめる場合

jsx
const obj = { a: 1, b: 2, c: 3, x:10 };
const { x, ...props } = obj;


console.log(x);
// 出力 10
console.log(props);
// 出力 {a: 1, b: 2, c: 3}

コンポーネントで使う場合

コンポーネントに渡すpropsを分割代入する際に
レスト構文を使用するサンプルを実装してみる

jsx
import "./styles.css";


export default function App() {
  return (
    <div className="App">
      <Com1 title={"restでないprops"} style={{ color: "red" }} >
          restのchidren
      </Com1>
    </div>
  );
}


// propsの分割代入時にtitle以外の全てのpropsをrestPropsとして  
// レスト構文を使ってオブジェクトの形で受け取る
const Com1 = ({ title,...restProps }) => {
  console.log(`Com1のrestProps:${JSON.stringify(restProps)}`)
  return (
    <>
      {/* restでないprops */}
      <h1>{title}</h1>
      {/* レスト構文で受け取ったオブジェクトの値を使う */}
      <h2>{restProps.children}</h2>
      <h3 style={restProps.style}>restのstyle</h3>
      {/*レスト構文で受け取ったオブジェクトをスプレッド構文を使って再利用する場合*/}
      <h4 {...restProps}/>
    </>


  )
};
// ログ
// Com1のrestProps:{"style":{"color":"red"},"children":"restのchidren"}

スクリーンショット 2022-03-29 015420

  • propsの分割代入時にレスト構文を使ってtitle以外の項目を「restProps」というオブジェクトで受け取る。
  • レストの値を使いたい場合はrestPropsオブジェクトの値を使う。

コンポーネントからコンポーネントにレスト構文で値を渡す場合

レスト構文で取得した値はその後、オブジェクトとして扱うようにする。
さらに階層が下のコンポーネントに渡したい場合は、スプレッド構文で渡すようにする。

jsx
import "./styles.css";


export default function App() {
  return (
    <div className="App">
      <Com1 title={"restでないprops"} style={{ color: "red" }} >
          restのprops
      </Com1>
    </div>
  );
}


// propsの分割代入時にtitle以外の全てのpropsをrestPropsとして  
// レスト構文を使ってオブジェクトの形で受け取る
const Com1 = ({ title,...restProps }) => {
  console.log(`Com1のrestProps:${JSON.stringify(restProps)}`)
  return (
    <>
      {/* さらにrestPropsを下のコンポーネントにスプレッド構文で渡す */}
      <Com2 title={title} {...restProps}/>
      <Com3 {...restProps}/>
    </>


  )
};


// レスト構文で受け取る
const Com2 = ({ title, ...restProps2 }) => {
  console.log(`Com2のrestProps2:${JSON.stringify(restProps2)}`)
  // スプレッド構文で再利用
  return <h1 {...restProps2}>{title}</h1>;
};


// 分割代入で受け取る
const Com3 = ({children,style}) => {
  return <h1 style={style}>{children}</h1>;
};


// ログ
// Com1のrestProps:{"style":{"color":"red"},"children":"restのprops"} 
// Com2のrestProps2:{"style":{"color":"red"},"children":"restのprops"}

スクリーンショット 2022-03-29 015609

新着記事

タグ別一覧
top