React.jsコンポーネントで「...」を使いこなす！状態更新、props受け渡し、配列・オブジェクト展開の超便利テクニック

2024-04-02

React.jsにおけるスプレッド構文（...）の役割

スプレッド構文を使うメリット

コードの簡潔化
コードの可読性向上
コンポーネントの再利用性向上

具体的な例

propsの受け渡し

const MyComponent = ({ props1, props2, ...rest }) => {
  // props1とprops2は個別に使用
  // restは残りのpropsをまとめてオブジェクトとして受け取る
  return (
    <div>
      {props1}
      {props2}
      {JSON.stringify(rest)}
    </div>
  );
};

上記コードでは、MyComponentコンポーネントはprops1とprops2を個別に受け取り、残りのpropsはrestというオブジェクトにまとめて受け取ります。

状態の更新

const [state, setState] = useState({
  count: 0,
  name: 'John Doe',
});

const handleClick = () => {
  setState({
    ...state,
    count: state.count + 1,
  });
};

上記コードでは、handleClick関数はstateオブジェクトを更新しますが、スプレッド構文を使うことで、countプロパティのみを変更しつつ、nameプロパティは維持することができます。

配列の展開

const list = ['a', 'b', 'c'];

const MyComponent = () => {
  return (
    <ul>
      {list.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

上記コードでは、list配列の要素をli要素として展開しています。

オブジェクトの展開

const person = {
  name: 'John Doe',
  age: 30,
};

const MyComponent = () => {
  return (
    <div>
      <h1>{person.name}</h1>
      <p>{person.age}</p>
    </div>
  );
};

上記コードでは、personオブジェクトのプロパティを個別に展開しています。

注意事項

スプレッド構文は、オブジェクトや配列を展開する際にのみ使用できます。
スプレッド構文は、キー重複の可能性がある場合、意図しない結果になることがあります。

const MyComponent = ({ props1, props2, ...rest }) => {
  // props1とprops2は個別に使用
  // restは残りのpropsをまとめてオブジェクトとして受け取る
  return (
    <div>
      {props1}
      {props2}
      {JSON.stringify(rest)}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent props1="Hello" props2="World" data="test" />
    </div>
  );
};

const [state, setState] = useState({
  count: 0,
  name: 'John Doe',
});

const handleClick = () => {
  // countのみ更新し、nameは維持
  setState({
    ...state,
    count: state.count + 1,
  });
};

const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Count Up</button>
      <p>Count: {state.count}</p>
      <p>Name: {state.name}</p>
    </div>
  );
};

上記コードでは、handleClick関数はcountプロパティのみ更新し、nameプロパティは維持します。

const list = ['a', 'b', 'c'];

const MyComponent = () => {
  return (
    <ul>
      {list.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

const person = {
  name: 'John Doe',
  age: 30,
};

const MyComponent = () => {
  return (
    <div>
      <h1>{person.name}</h1>
      <p>{person.age}</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

動作確認

これらのサンプルコードは、React.jsの開発環境で実行することで動作を確認できます。

スプレッド構文の代替方法

個別プロパティの受け渡し

const MyComponent = ({ props1, props2 }) => {
  // props1とprops2を個別に使用
  return (
    <div>
      {props1}
      {props2}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent props1="Hello" props2="World" />
    </div>
  );
};

オブジェクトのデストラクチャリング

const MyComponent = ({ props }) => {
  const { props1, props2 } = props;
  // props1とprops2を個別に使用
  return (
    <div>
      {props1}
      {props2}
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent props={{ props1: "Hello", props2: "World" }} />
    </div>
  );
};

上記コードでは、MyComponentコンポーネントはpropsオブジェクトを受け取り、デストラクチャリングを使用してprops1とprops2プロパティを取り出します。

配列のループ処理

const list = ['a', 'b', 'c'];

const MyComponent = () => {
  return (
    <ul>
      {list.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

オブジェクトのキーのループ処理

const person = {
  name: 'John Doe',
  age: 30,
};

const MyComponent = () => {
  return (
    <div>
      <h1>{person.name}</h1>
      <p>{person.age}</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};