React Routerで"...rest"を使ってURLルーティングをスマートに！

2024-05-27

React JSX における「...rest」の意味と使い方

React JSX における ...rest は、残りのプロパティ を意味する特殊な構文です。コンポーネントに渡されたプロパティのうち、コンポーネント自身が定義していないプロパティ をすべて rest オブジェクトに格納します。

詳細

コンポーネントに複数のプロパティを渡す場合、それらをすべて個別に処理するのは煩雑です。そこで ...rest を使用することで、コンポーネント自身が処理する必要のないプロパティ をまとめて処理することができます。

例

以下の例では、MyComponent コンポーネントに id, className, children の 3 つのプロパティが渡されています。

<MyComponent id="my-component" className="my-class" children="Hello, world!">
</MyComponent>

この場合、MyComponent コンポーネントは id と className プロパティのみを処理し、children プロパティはそのまま子要素としてレンダリングされます。

**...rest` を使用すると、以下のようになります。

<MyComponent {...rest} children="Hello, world!">
</MyComponent>

const rest = {
  id: "my-component",
  className: "my-class"
};

<MyComponent {...rest} children="Hello, world!">
</MyComponent>

用途

コンポーネントに渡されたプロパティのうち、コンポーネント自身が処理する必要のないプロパティ をまとめて処理したい場合
コンポーネントを再利用性 高くしたい場合
コンポーネントのコードを簡潔 にしたい場合

補足

...rest は、オブジェクト として扱われます。
...rest は、必須ではありません 。
...rest は、他のプロパティと同時に使用できます 。

関連トピック

React JSX
React コンポーネント
React プロパティ

本回答は、2024年5月26日時点の情報に基づいています。

例1：コンポーネントの再利用性向上

const Button = ({ children, ...rest }) => {
  return (
    <button {...rest} className="my-button">
      {children}
    </button>
  );
};

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button secondary>Secondary Button</Button>
      <Button disabled>Disabled Button</Button>
    </div>
  );
};

このコードでは、Button コンポーネントは primary, secondary, disabled などのプロパティを受け取ることができます。これらのプロパティは className プロパティにマッピングされ、ボタンのスタイルが変更されます。

例2：不要なプロパティの処理

以下の例では、Link コンポーネントに渡された to プロパティを RouterLink コンポーネントに渡すために、...rest を使用して不要なプロパティを処理します。

import { RouterLink } from 'react-router-dom';

const Link = ({ to, children, ...rest }) => {
  return (
    <RouterLink to={to} {...rest}>
      {children}
    </RouterLink>
  );
};

const App = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </div>
  );
};

このコードでは、Link コンポーネントは to プロパティのみを RouterLink コンポーネントに渡し、その他のプロパティは ...rest オブジェクトに格納されます。

上記以外にも、...rest はさまざまな用途で使用することができます。具体的な使用方法については、状況に応じて判断してください。

React JSX における ...rest の代替方法

個別プロパティの抽出

個々のプロパティを明示的に抽出することで、コードの可読性とメンテナンス性を向上させることができます。

const MyComponent = ({ id, className, children }) => {
  return (
    <div id={id} className={className}>
      {children}
    </div>
  );
};

利点

コードが可読性とメンテナンス性に優れている
コンポーネントが使用するプロパティを明確に示している

欠点

すべてのプロパティを個別に抽出する必要がある
コードが冗長になる可能性がある

カスタムプロパティの定義

コンポーネントが使用するプロパティをカスタムプロパティとして定義することで、コードをより簡潔にすることができます。

const MyComponent = ({ customId, customClassName, children }) => {
  return (
    <div id={customId} className={customClassName}>
      {children}
    </div>
  );
};

コードが簡潔になる

カスタムプロパティの名前を覚える必要がある
他のコンポーネントとの互換性が失われる可能性がある

プロパティ検証ライブラリの使用

prop-types や ts-prop-types などのプロパティ検証ライブラリを使用することで、コンポーネントに渡されるプロパティの型と必須性を検証することができます。

import PropTypes from 'prop-types';

const MyComponent = ({ id, className, children }) => {
  MyComponent.propTypes = {
    id: PropTypes.string.isRequired,
    className: PropTypes.string,
    children: PropTypes.node.isRequired
  };

  return (
    <div id={id} className={className}>
      {children}
    </div>
  );
};