Reactパフォーマンス最適化の極意：map関数とReact.memoで高速レンダリングを実現

2024-05-20

JavaScript と React でオブジェクトの配列から React コンポーネントをレンダリングする方法

手順

例

// Item コンポーネント
const Item = (props) => {
  return (
    <li>
      <h2>{props.title}</h2>
      <p>{props.description}</p>
    </li>
  );
};

// データ
const data = [
  { id: 1, title: "アイテム 1", description: "これはアイテム 1 の説明です。" },
  { id: 2, title: "アイテム 2", description: "これはアイテム 2 の説明です。" },
  { id: 3, title: "アイテム 3", description: "これはアイテム 3 の説明です。" },
];

// リストのレンダリング
const App = () => {
  return (
    <ul>
      {data.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </ul>
  );
};

この例では、Item コンポーネントは title と description プロパティを受け取り、それらをレンダリングします。data 配列は 3 つのオブジェクトを含み、App コンポーネントは map() 関数を使用してこの配列をループ処理し、各オブジェクトに対して Item コンポーネントをレンダリングします。

補足

map() 関数に加えて、filter() や reduce() などの他の JavaScript 配列メソッドを使用して、レンダリングするオブジェクトを制御することもできます。
コンポーネントをより複雑にする場合は、コンポーネントを再利用できるようにサブコンポーネントを作成することを検討してください。
React Hooks を使用して、コンポーネントの状態とロジックを管理することができます。

サンプルコード：map 関数を使用して React コンポーネントをレンダリングする

Item.js

import React from 'react';

const Item = (props) => {
  return (
    <li>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </li>
  );
};

export default Item;

App.js

import React from 'react';
import Item from './Item';

const data = [
  { id: 1, title: 'ブログ記事 1', content: 'これはブログ記事 1 の内容です。' },
  { id: 2, title: 'ブログ記事 2', content: 'これはブログ記事 2 の内容です。' },
  { id: 3, title: 'ブログ記事 3', content: 'これはブログ記事 3 の内容です。' },
];

const App = () => {
  return (
    <ul>
      {data.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </ul>
  );
};

export default App;

この例をさらに詳しく見てみましょう。

Item.js:
- このファイルは Item コンポーネントを定義します。
- コンポーネントは title と content props を受け取ります。
- コンポーネントは JSX を使用して、記事のタイトルとコンテンツをレンダリングします。
App.js:
- コンポーネントは data という名前の配列を定義します。
- この配列は、ブログ記事オブジェクトを含む JavaScript オブジェクトの配列です。
- コンポーネントは map() 関数を使用して data 配列をループ処理します。
- ループの各イテレーションで、map() 関数は Item コンポーネントを呼び出し、item オブジェクトを props として渡します。
- key プロパティは、Item コンポーネントの各インスタンスに一意の ID を提供します。これは、React がコンポーネントを効率的に更新および再レンダリングするのに役立ちます。

このサンプルコードは、React でオブジェクトの配列からコンポーネントをレンダリングする方法を理解するための出発点として使用できます。さまざまな種類のコンポーネントとデータをレンダリングするために、この基本的なテクニックを拡張できます。

React でオブジェクトの配列からコンポーネントをレンダリングするその他の方法

reduce() 関数は、配列の要素を単一の値にまとめるために使用できます。この方法は、コンポーネントのリストを単一の親コンポーネントにラップする場合に役立ちます。

const items = [
  { id: 1, title: 'アイテム 1' },
  { id: 2, title: 'アイテム 2' },
  { id: 3, title: 'アイテム 3' },
];

const App = () => {
  return (
    <ul>
      {items.reduce((acc, item) => {
        return [...acc, <Item key={item.id} item={item} />];
      }, [])}
    </ul>
  );
};

条件付きレンダリングを使用して、特定の条件を満たすオブジェクトのみをレンダリングできます。

const items = [
  { id: 1, title: 'アイテム 1', visible: true },
  { id: 2, title: 'アイテム 2', visible: false },
  { id: 3, title: 'アイテム 3', visible: true },
];

const App = () => {
  return (
    <ul>
      {items.map((item) => {
        if (item.visible) {
          return <Item key={item.id} item={item} />;
        }
        return null;
      })}
    </ul>
  );
};

カスタムフックを使用して、コンポーネントのロジックを再利用できます。この方法は、複雑なレンダリングロジックを持つコンポーネントを作成する場合に役立ちます。

import React, { useState } from 'react';

const useItems = () => {
  const [items, setItems] = useState([
    { id: 1, title: 'アイテム 1' },
    { id: 2, title: 'アイテム 2' },
    { id: 3, title: 'アイテム 3' },
  ]);

  return {
    items,
    setItems,
  };
};

const Item = ({ item }) => {
  return (
    <li>
      <h2>{item.title}</h2>
    </li>
  );
};

const App = () => {
  const { items } = useItems();

  return (
    <ul>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </ul>
  );
};

これらの方法はほんの一例であり、React でオブジェクトの配列からコンポーネントをレンダリングする方法は他にもたくさんあります。最適な方法は、特定のニーズと要件によって異なります。

その他のヒント:

パフォーマンスが重要な場合は、React.memo() コンポーネントを使用検討してください。これにより、コンポーネントが不要な再レンダリングを行わないようにすることができます。
コードをより読みやすく、保守しやすくするために、コンポーネントを分割することを検討してください。
データのフェッチとキャッシュについては、useReducer や useEffect などの React フックを使用できます。

javascript reactjs