Zenn
📑

Reactコンポーネントのさまざまな操作方法

に公開
React
tech

はじめに

この記事ではReactにおける「Reactコンポーネントの操作方法」について理解を深めたいと思います。この記事を読んだ頃には、propsを使ったカスタマイズ、条件付きレンダリング、複数のコンポーネントのレンダリングについて理解できていることを願っております。

では初めにコンポーネントを props を使ってカスタマイズする方法について触れていきたいと思います。

コンポーネントにpropsを渡す方法

// 親コンポーネントから子コンポーネントにpropsを渡す
function ParentComponent() {
  const message = "Hello from Parent!";
  return <ChildComponent message={message} />;
}

// 子コンポーネントでpropsを受け取る
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

このコードでは、親コンポーネントである ParentComponent から子コンポーネントである ChildComponent に props を渡す方法を示しています。親コンポーネントでは message という文字列を生成し、それを ChildComponent に渡しています。子コンポーネントでは、props を受け取り、その中から message を読み取り、レンダリングしています。

props のデフォルト値を指定する方法

// デフォルト値を指定
ChildComponent.defaultProps = {
  message: "Default Message",
};

このコードでは子コンポーネントである ChildComponent に message のデフォルト値を指定しています。これは、親コンポーネントが message を提供しない場合に使用される値です。親コンポーネントから提供された場合は、デフォルト値ではなく提供された値が使用されます。

コンポーネントに JSX を渡す方法

// JSX要素をpropsとして渡す
function ParentComponent() {
  const customElement = <div>Custom JSX Element</div>;
  return <ChildComponent jsxProp={customElement} />;
}

// 子コンポーネントでpropsをレンダリング
function ChildComponent(props) {
  return <div>{props.jsxProp}</div>;
}

このコードでは、親コンポーネント ParentComponent で jsxProp という名前のプロパティに JSX 要素を渡しています。その後、子コンポーネント ChildComponent はこの JSX 要素を props から受け取り、レンダリングします。この方法を使用すると、親コンポーネントから子コンポーネントにカスタムのUI要素を渡すことができます。

props は時間とともに変化する

// 親コンポーネントから動的なpropsを渡す
function ParentComponent() {
  const [message, setMessage] = useState("Hello from Parent!");
  
  return (
    <div>
      <button onClick={() => setMessage("New Message")}>Change Message</button>
      <ChildComponent message={message} />
    </div>
  );
}

// 子コンポーネントでpropsを受け取り、時間とともに変化する
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

このコードでは、親コンポーネント ParentComponent が動的な message を子コンポーネントに渡す方法を示しています。親コンポーネント内で message は useState フックを使用して変更可能な状態として管理されており、ChildComponent に渡されます。ボタンをクリックすると、message が変更され、ChildComponent に反映されます。これにより、props が時間とともに変化することが示されています。

次にコンポーネントを条件付きでレンダーする方法について触れていきます。

条件に応じて異なる JSX を返す方法

以下のコードでは、isError という条件に基づいて、異なるスタイルとメッセージを持つコンポーネントをレンダリングする方法を示しています。isError が true の場合、エラーメッセージを表示し、false の場合は成功メッセージを表示します。

function MessageComponent({ isError }) {
  return (
    <div className={isError ? "error" : "success"}>
      {isError ? "エラーが発生しました" : "処理が成功しました"}
    </div>
  );
}

このコードでは、isError が条件です。条件に応じて、異なるスタイルとメッセージを持つコンポーネントをレンダリングします。

JSX の一部を条件によって表示または除外する方法

JSXの中で条件に応じて要素を表示または除外する方法を示します。例えば、以下のコードでは isDisplayed の値に基づいて <p> 要素を表示または非表示にします。

function ConditionalComponent({ isDisplayed }) {
  return (
    <div>
      {isDisplayed && <p>これは表示されます。</p>}
    </div>
  );
}

isDisplayed が true の場合、<p> 要素が表示されます。これにより、条件に応じて要素を柔軟に制御できます。

React コードベースでよく使われる条件式のショートカット記法

JavaScriptの条件式を用いたショートカット記法は、Reactコンポーネント内でよく使用されます。例えば、次のコードは、isLoading が true の場合に "読み込み中" メッセージを表示し、それ以外の場合にデータを表示するシンプルな条件式です。

function DataFetchingComponent({ isLoading, data }) {
  return (
    <div>
      {isLoading ? "読み込み中" : data}
    </div>
  );
}

ショートカット記法は、条件に応じてコンポーネントを簡潔にレンダリングするのに役立ちます。

次に複数のコンポーネントを同時にレンダーする方法について触れていきます。

JavaScriptのmap()を使用して、配列からコンポーネントをレンダリングする方法

map()メソッドは、与えられた関数を配列の各要素に適用し、その結果を新しい配列として返します。Reactでコンポーネントのリストを生成する際に非常に便利です。

function NumberList({ numbers }) {
  const numberItems = numbers.map((number) => (
    <li key={number.toString()}>{number}</li>
  ));

  return <ul>{numberItems}</ul>;
}

このコードでは、map()を使用してnumbers配列から<li>要素のリストを生成しています。各要素には一意のkeyが設定されています。これによりReactがリストアイテムを正確に識別できます。

JavaScriptのfilter()を使用して、特定のコンポーネントのみをレンダリングする方法

filter()メソッドは、与えられた条件に合致する要素だけを抽出した新しい配列を作成します。特定の条件に合致するコンポーネントをレンダリングする際に有用です。

Copy code
function FilteredComponents({ components, filterCondition }) {
  const filteredItems = components
    .filter((component) => filterCondition(component))
    .map((component, index) => (
      <div key={index}>{component}</div>
    ));

  return <div>{filteredItems}</div>;
}

このコードでは、filter()を使用してcomponentsからfilterConditionに合致する要素を抽出し、その後map()を使用してコンポーネントのリストを生成します。各コンポーネントには一意のkeyが設定されています。

keyによるリストアイテムの順序の保持

keyを使用する際のもう一つの重要な理由は、リストアイテムの順序を保持するためです。Reactはリストアイテムが追加、削除、または再並び替えられた際に、keyを参照してアイテムの順序を識別します。keyがない場合、Reactは変更を追跡するのが難しくなり、コンポーネントの再レンダリングが効率的ではなくなることがあります。

function ListItem({ text }) {
  return <li>{text}</li>;
}

function App() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const shuffleItems = () => {
    // リストアイテムをシャッフルする例
    const shuffledItems = [...items].sort(() => Math.random() - 0.5);
    setItems(shuffledItems);
  };

  return (
    <div>
      <button onClick={shuffleItems}>Shuffle Items</button>
      <ul>
        {items.map((item, index) => (
          <ListItem key={index} text={item} />
        ))}
      </ul>
    </div>
  );
}

このコードでは、ListItemコンポーネントを使用してリストアイテムを表示し、keyはindexを使用して設定しています。shuffleItems関数を呼び出すことで、リストアイテムの順序をシャッフルできます。

keyがない場合、リストアイテムの順序が正確に保持されないため、シャッフルの効果が期待通りに表示されません。しかし、keyを使用することでReactは各アイテムを正確に識別し、順序を維持できます。

Discussion