MENU
  1. ホーム
  2. React
  3. Reactで再利用可能なテーブルコンポーネントを作成する方法

Reactで再利用可能なテーブルコンポーネントを作成する方法

React

Reactを使用した開発では、再利用可能なコンポーネントを作成することが、効率的で保守性の高いコードを書くための鍵となります。その中でも、データを整理して視覚的に表示するテーブルコンポーネントは、多くのプロジェクトで重要な役割を果たします。本記事では、シンプルかつ汎用性の高いReactのテーブルコンポーネントをゼロから作成し、データのソートやページネーションなどの機能を追加する方法をステップバイステップで解説します。再利用性のあるコンポーネントの作成によって、どのように効率的な開発環境を構築できるのかを学びましょう。

目次

再利用可能なコンポーネントの基礎概念


再利用可能なコンポーネントを設計することは、React開発におけるベストプラクティスの一つです。コンポーネントを再利用可能にすることで、以下のような利点が得られます。

コードの効率化


同じ機能を複数回実装する必要がなくなり、コードの重複を減らすことができます。これにより、開発スピードが向上し、エラーのリスクも軽減されます。

保守性の向上


再利用可能なコンポーネントは、変更が必要な際に一か所を修正するだけで済みます。これにより、大規模なプロジェクトでも柔軟な変更が可能になります。

一貫性の確保


アプリケーション全体で一貫性のあるデザインや機能を維持できます。特にUIコンポーネントでは、統一感のある見た目が重要です。

抽象化と汎用性


抽象化されたコンポーネントは、異なるデータセットやユースケースに適用することができます。テーブルコンポーネントの場合、列の構造やデータソースを柔軟に変更できるように設計することが再利用性を高める鍵となります。

次のセクションでは、テーブルコンポーネントを再利用可能にするための具体的な設計要件について詳しく説明します。

テーブルコンポーネントの設計要件


再利用可能なテーブルコンポーネントを設計するには、特定のユースケースに縛られない柔軟性と拡張性が求められます。以下に設計時に考慮すべき主要な要件を挙げます。

動的なデータ表示


テーブルに表示するデータが動的に変更可能である必要があります。これには、APIから取得したデータや、アプリケーション内部で生成されたデータなどが含まれます。データの柔軟な入力を可能にするため、propsを使用してデータソースを渡す設計が推奨されます。

列構造のカスタマイズ


異なるユースケースに対応するために、列の定義を柔軟に設定できる仕組みを設けるべきです。例えば、列の見出しやデータ型を動的に指定できるようにすることで、さまざまなデータセットに対応可能になります。

ユーザーインタラクション


ユーザー体験を向上させるために、以下の機能を設計に組み込むことを検討します：

  • カラムソート機能
  • ページネーション機能
  • フィルタリング機能

これらを柔軟にオン・オフできる仕組みが理想的です。

スタイリングの柔軟性


コンポーネントを使用するアプリケーションのデザインに合わせたカスタマイズが可能であるべきです。これには、classNameやstyleを活用したスタイルの適用が含まれます。

アクセシビリティの考慮


すべてのユーザーがテーブルを使いやすいようにするため、ARIA属性を適切に設定し、スクリーンリーダーに対応したデザインを採用します。

次のセクションでは、基本的なテーブル構造を実装するコード例を示し、実際の構築プロセスを具体的に解説します。

基本的なテーブル構造の実装例


まずはシンプルなReactテーブルコンポーネントを実装し、基本的な構造を理解しましょう。この例では、動的にデータを表示するシンプルなテーブルを作成します。

テーブルコンポーネントのコード例


以下は、Reactで基本的なテーブルを構築するコード例です。

import React from 'react';

const Table = ({ columns, data }) => {
  return (
    <table style={{ borderCollapse: 'collapse', width: '100%' }}>
      <thead>
        <tr>
          {columns.map((column, index) => (
            <th key={index} style={{ border: '1px solid #ddd', padding: '8px' }}>
              {column.header}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {columns.map((column, colIndex) => (
              <td key={colIndex} style={{ border: '1px solid #ddd', padding: '8px' }}>
                {row[column.accessor]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

コンポーネントの使用例


このテーブルを使用するためには、columnsとdataという2つのpropsを渡します。

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

const App = () => {
  const columns = [
    { header: '名前', accessor: 'name' },
    { header: '年齢', accessor: 'age' },
    { header: '職業', accessor: 'occupation' },
  ];

  const data = [
    { name: '山田太郎', age: 30, occupation: 'エンジニア' },
    { name: '佐藤花子', age: 25, occupation: 'デザイナー' },
    { name: '田中一郎', age: 35, occupation: 'プロジェクトマネージャー' },
  ];

  return (
    <div>
      <h1>ユーザー一覧</h1>
      <Table columns={columns} data={data} />
    </div>
  );
};

export default App;

コードのポイント

  1. 柔軟性の確保
  • columnsに列の定義を渡すことで、どのようなデータにも対応可能。
  • dataで行の内容を動的に変更可能。
  1. スタイルのシンプルさ
  • 基本的なCSSをインラインスタイルで指定。必要に応じて外部CSSに置き換えることが可能。
  1. 動的な描画
  • map関数を活用し、列と行を動的に生成。

次のセクションでは、この基本構造を基に、propsを活用してさらに動的なデータ表示を実現する方法を解説します。

Propsを活用した動的データ表示


Reactコンポーネントの強みの一つは、propsを使用して動的にデータを操作できる点です。ここでは、propsを活用してテーブルに異なるデータセットを表示する方法を詳しく解説します。

Propsの仕組み


propsは、親コンポーネントから子コンポーネントにデータや関数を渡すために使用されます。テーブルコンポーネントでは、以下のようにpropsを受け取ります：

  • columns：テーブルの列を定義するための配列。
  • data：表示する行データの配列。

動的データの切り替え


異なるデータセットを表示する場合、以下のコード例のようにpropsを変更するだけで簡単に対応できます。

import React, { useState } from 'react';
import Table from './Table';

const App = () => {
  const [dataset, setDataset] = useState('users');

  const columns = [
    { header: '名前', accessor: 'name' },
    { header: '年齢', accessor: 'age' },
    { header: '職業', accessor: 'occupation' },
  ];

  const userData = [
    { name: '山田太郎', age: 30, occupation: 'エンジニア' },
    { name: '佐藤花子', age: 25, occupation: 'デザイナー' },
    { name: '田中一郎', age: 35, occupation: 'プロジェクトマネージャー' },
  ];

  const productData = [
    { name: 'ノートPC', age: '2022', occupation: '電子機器' },
    { name: 'スマートフォン', age: '2021', occupation: '電子機器' },
    { name: 'タブレット', age: '2023', occupation: '電子機器' },
  ];

  const data = dataset === 'users' ? userData : productData;

  return (
    <div>
      <h1>データ切り替え可能なテーブル</h1>
      <button onClick={() => setDataset('users')}>ユーザー</button>
      <button onClick={() => setDataset('products')}>商品</button>
      <Table columns={columns} data={data} />
    </div>
  );
};

export default App;

コードの説明

  1. 状態管理でデータセットを切り替え
  • useStateを使用して、現在表示するデータセットを管理します。
  • ボタンのクリックで状態を切り替え、異なるデータを表示。
  1. 柔軟なデータ表示
  • columnsは固定していますが、表示するデータセットに応じて内容を変化させることで汎用性を維持。
  1. 再利用性の向上
  • テーブルコンポーネント自体を変更せずに、異なるデータセットを簡単に表示できます。

動的データ活用のメリット

  • 効率的な開発：一つのコンポーネントで複数のユースケースに対応可能。
  • コードの一貫性：データ表示ロジックを親コンポーネントに集約でき、管理が容易。

次のセクションでは、テーブルの見た目を向上させるために、スタイリングの適用方法について解説します。

テーブルにスタイリングを適用する方法


テーブルコンポーネントに適切なスタイリングを加えることで、視認性を向上させ、ユーザー体験を改善することができます。このセクションでは、CSSやCSS-in-JSを使用してテーブルをカスタマイズする方法を解説します。

基本的なCSSを使ったスタイリング


以下は、基本的なテーブルスタイルのCSS例です。

/* styles.css */
table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background-color: #f4f4f4;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #f1f1f1;
}

このCSSを適用するには、コンポーネント内で外部CSSファイルをインポートします。

import './styles.css';

const Table = ({ columns, data }) => {
  return (
    <table>
      <thead>
        <tr>
          {columns.map((column, index) => (
            <th key={index}>{column.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {columns.map((column, colIndex) => (
              <td key={colIndex}>{row[column.accessor]}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

CSS-in-JSを使用したスタイリング


Reactのコンポーネント内で直接スタイルを記述したい場合、CSS-in-JSが便利です。

const styles = {
  table: {
    width: '100%',
    borderCollapse: 'collapse',
  },
  headerRow: {
    backgroundColor: '#f4f4f4',
  },
  cell: {
    border: '1px solid #ddd',
    padding: '10px',
    textAlign: 'left',
  },
  rowEven: {
    backgroundColor: '#f9f9f9',
  },
  rowHover: {
    '&:hover': {
      backgroundColor: '#f1f1f1',
    },
  },
};

const Table = ({ columns, data }) => {
  return (
    <table style={styles.table}>
      <thead style={styles.headerRow}>
        <tr>
          {columns.map((column, index) => (
            <th key={index} style={styles.cell}>{column.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row, rowIndex) => (
          <tr
            key={rowIndex}
            style={rowIndex % 2 === 0 ? styles.rowEven : {}}
          >
            {columns.map((column, colIndex) => (
              <td key={colIndex} style={styles.cell}>
                {row[column.accessor]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

スタイリングのポイント

  1. 視認性の向上
  • 奇数・偶数行の背景色を変えることで、視覚的な区別をつけます。
  • ホバー効果を加えることで、ユーザーの操作を視覚的にフィードバック。
  1. レスポンシブデザイン
  • 小さなデバイスでの表示を考慮し、テーブルをスクロール可能にするスタイルを追加できます。
table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}

カスタムテーマの適用


プロジェクト全体のデザインガイドラインに従ったスタイルを適用するには、スタイルプロパティをテーマ化し、CSS変数やテーマプロバイダーを使用する方法もあります。

次のセクションでは、テーブルにソート機能を追加し、インタラクティブな操作性を高める方法を解説します。

ソート機能の追加


テーブルにソート機能を追加すると、ユーザーがデータをカラムごとに並び替えることができるようになり、インタラクティブ性が向上します。このセクションでは、Reactを使用してソート機能を実装する方法を解説します。

ソート機能の基本設計

  1. ソート状態の管理
  • ソート対象のカラムと並び替えの方向（昇順または降順）を状態として保持します。
  1. クリックイベントの処理
  • ユーザーがヘッダーをクリックすることで、ソートの状態を変更します。
  1. データのソート
  • ソート状態に基づいてデータを動的に並び替えます。

コード例


以下のコードでは、基本的なソート機能をテーブルコンポーネントに追加します。

import React, { useState } from 'react';

const Table = ({ columns, data }) => {
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });

  const sortedData = React.useMemo(() => {
    if (!sortConfig.key) return data;

    const sorted = [...data].sort((a, b) => {
      if (a[sortConfig.key] < b[sortConfig.key]) {
        return sortConfig.direction === 'ascending' ? -1 : 1;
      }
      if (a[sortConfig.key] > b[sortConfig.key]) {
        return sortConfig.direction === 'ascending' ? 1 : -1;
      }
      return 0;
    });

    return sorted;
  }, [data, sortConfig]);

  const handleSort = (key) => {
    setSortConfig((prevConfig) => {
      if (prevConfig.key === key) {
        return {
          key,
          direction: prevConfig.direction === 'ascending' ? 'descending' : 'ascending',
        };
      }
      return { key, direction: 'ascending' };
    });
  };

  return (
    <table style={{ borderCollapse: 'collapse', width: '100%' }}>
      <thead>
        <tr>
          {columns.map((column) => (
            <th
              key={column.accessor}
              style={{ border: '1px solid #ddd', padding: '8px', cursor: 'pointer' }}
              onClick={() => handleSort(column.accessor)}
            >
              {column.header}
              {sortConfig.key === column.accessor &&
                (sortConfig.direction === 'ascending' ? ' ↑' : ' ↓')}
            </th>
          ))}
        </tr>
      </thead>
      <tbody>
        {sortedData.map((row, rowIndex) => (
          <tr key={rowIndex}>
            {columns.map((column) => (
              <td key={column.accessor} style={{ border: '1px solid #ddd', padding: '8px' }}>
                {row[column.accessor]}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;

コードの詳細

  1. ソート状態の管理
  • sortConfigに現在のソート対象と方向を保持。
  • 初期値はソートなし。
  1. クリックイベントによるソート変更
  • 列ヘッダーをクリックすると、対象カラムがソートされます。
  • 同じカラムを再度クリックすると、昇順・降順が切り替わります。
  1. データの並び替え
  • React.useMemoを使用して、ソート済みデータを効率的に計算します。

ソート機能のポイント

  • 視覚的なフィードバック
  • カラムヘッダーに矢印（↑/↓）を表示して、現在のソート状態を視覚的に示します。
  • パフォーマンスの考慮
  • React.useMemoでソート処理をキャッシュし、不要な計算を避けます。

応用例

  • 複数カラムのソート
  • 複数のカラムを組み合わせたソートロジックを実装することで、さらに高度な操作が可能になります。

次のセクションでは、ページネーション機能を実装し、大量のデータを効率的に表示する方法を解説します。

ページネーション機能の実装


大量のデータをテーブルに表示する場合、ページネーションを導入することで、見やすさや操作性が向上します。このセクションでは、Reactを使用してページネーション機能を実装する方法を解説します。

ページネーションの基本設計

  1. 現在のページ状態の管理
  • 現在のページ番号を状態として保持します。
  1. 表示データの分割
  • 全データをページ単位で分割し、現在のページに対応するデータのみを表示します。
  1. ページの切り替え
  • 前後のページに移動したり、特定のページを選択する操作を可能にします。

コード例


以下のコードでは、シンプルなページネーション機能をテーブルコンポーネントに追加します。

import React, { useState } from 'react';

const TableWithPagination = ({ columns, data, itemsPerPage }) => {
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(data.length / itemsPerPage);

  const currentData = React.useMemo(() => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
  }, [currentPage, itemsPerPage, data]);

  const handlePageChange = (page) => {
    if (page < 1 || page > totalPages) return;
    setCurrentPage(page);
  };

  return (
    <div>
      <table style={{ borderCollapse: 'collapse', width: '100%' }}>
        <thead>
          <tr>
            {columns.map((column) => (
              <th key={column.accessor} style={{ border: '1px solid #ddd', padding: '8px' }}>
                {column.header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {currentData.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {columns.map((column) => (
                <td key={column.accessor} style={{ border: '1px solid #ddd', padding: '8px' }}>
                  {row[column.accessor]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <div style={{ marginTop: '10px', textAlign: 'center' }}>
        <button onClick={() => handlePageChange(currentPage - 1)} disabled={currentPage === 1}>
          前
        </button>
        {Array.from({ length: totalPages }, (_, index) => (
          <button
            key={index + 1}
            onClick={() => handlePageChange(index + 1)}
            style={{
              margin: '0 5px',
              fontWeight: currentPage === index + 1 ? 'bold' : 'normal',
            }}
          >
            {index + 1}
          </button>
        ))}
        <button
          onClick={() => handlePageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
        >
          次
        </button>
      </div>
    </div>
  );
};

export default TableWithPagination;

コードの詳細

  1. 現在のページデータを取得
  • currentPageを状態として保持し、データのスライス処理で現在のページに対応するデータを取得します。
  1. ページボタンの動作
  • 前と次ボタンでページを移動。
  • 特定のページ番号をクリックすると、そのページに直接移動。
  1. ページボタンのスタイリング
  • 現在のページ番号は太字で強調し、どのページが選択されているかを視覚的に表示。

ページネーションのメリット

  • データの見やすさ
  • 一度に表示されるデータ量を制限することで、画面の混雑を回避。
  • パフォーマンスの向上
  • 必要なデータのみをレンダリングすることで、描画負荷を軽減。

応用例

  • 動的なアイテム数の変更
  • ページごとのアイテム数をユーザーが選択できるようにすると、柔軟性が増します。

次のセクションでは、汎用性と拡張性を意識したテーブルコンポーネントの設計について解説します。

テーブルの汎用化と拡張性の確保


汎用性と拡張性を備えたテーブルコンポーネントを設計することで、さまざまなユースケースに対応可能になります。このセクションでは、柔軟な設計を実現するためのベストプラクティスを紹介します。

汎用性を高めるための設計

動的な列と行の管理

  • 列定義の柔軟性
  • columnsを利用して、列の名前やデータキーを自由に変更可能にします。
  • 各列にスタイルやソート可否といった設定を追加することで、さらに詳細なカスタマイズが可能です。
  const columns = [
    { header: '名前', accessor: 'name', sortable: true },
    { header: '年齢', accessor: 'age', sortable: false },
  ];
  • 行データの動的操作
  • dataを通じて、外部APIから取得したデータや計算結果を直接テーブルに渡せます。

操作可能なテーブルの提供

  • ソート、ページネーション、フィルタリングといった機能を個別に有効化・無効化する設計を採用します。
  <Table 
    columns={columns} 
    data={data} 
    enableSorting={true} 
    enablePagination={true} 
    enableFiltering={false} 
  />

カスタムレンダラーのサポート

  • 特定の列にカスタム表示を提供するために、renderプロパティを使用します。
  const columns = [
    { header: '名前', accessor: 'name' },
    { header: '詳細', accessor: 'details', render: (row) => <a href={row.detailsLink}>詳細を見る</a> },
  ];

拡張性を高めるための工夫

コンポーネントの分割

  • テーブルコンポーネントを小さな部品に分割することで、再利用性を向上させます。
  • TableHeader: ヘッダー部分の管理
  • TableBody: 行データの描画
  • PaginationControls: ページネーションの管理

フックの活用

  • データ操作を簡略化するため、カスタムフックを作成します。
  const useSortableData = (data, config) => {
    // ソートロジックを含むフックの実装
  };

ライブラリの統合

  • 必要に応じて、React TableやMaterial-UIのようなライブラリを活用して機能を拡張できます。
  • 例：React Tableを使用したカラムグループの実装やレスポンシブ対応。

汎用性と拡張性を持つ設計のメリット

  • 再利用性の向上
  • 異なるプロジェクトでの利用が容易になります。
  • 変更への柔軟性
  • 要件が変わった場合でも、特定の機能を追加または変更するだけで対応可能です。
  • 保守性の向上
  • コードがモジュール化され、各部品が独立して動作するため、バグ修正や機能改善が容易になります。

次のセクションでは、外部ライブラリを活用した高度なテーブル機能の実装例を紹介します。

Reactライブラリとの統合例


Reactエコシステムには、テーブル機能を強化するためのライブラリが豊富に揃っています。このセクションでは、React TableとMaterial-UIを活用して、さらに高度なテーブル機能を実現する方法を解説します。

React Tableを使った拡張


React Tableは、軽量かつカスタマイズ性に優れたテーブルライブラリです。以下は基本的な使用例です。

npm install @tanstack/react-table
import React from 'react';
import { useTable } from '@tanstack/react-table';

const ReactTableExample = ({ data, columns }) => {
  const tableInstance = useTable({
    data,
    columns,
  });

  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;

  return (
    <table {...getTableProps()} style={{ width: '100%', border: '1px solid #ddd', borderCollapse: 'collapse' }}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()} style={{ padding: '10px', border: '1px solid #ddd' }}>
                {column.render('Header')}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td {...cell.getCellProps()} style={{ padding: '8px', border: '1px solid #ddd' }}>
                  {cell.render('Cell')}
                </td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default ReactTableExample;

React Tableの特徴

  • カラムの柔軟な定義: カスタムレンダラーや動的プロパティの追加が可能。
  • 仮想化対応: 大量のデータでもパフォーマンスを損なわずに表示できます。

Material-UIを使った高度なデザイン


Material-UIは、豊富なデザインコンポーネントを提供するライブラリです。以下は、Material-UIを使用してテーブルを作成する例です。

npm install @mui/material @emotion/react @emotion/styled
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@mui/material';

const MuiTableExample = ({ data }) => {
  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>名前</TableCell>
            <TableCell align="right">年齢</TableCell>
            <TableCell align="right">職業</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, index) => (
            <TableRow key={index}>
              <TableCell>{row.name}</TableCell>
              <TableCell align="right">{row.age}</TableCell>
              <TableCell align="right">{row.occupation}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default MuiTableExample;

Material-UIの特徴

  • 美しいデザイン: デフォルトで洗練されたスタイルが適用されます。
  • 機能の充実: カラムソート、フィルタリング、ページネーションなどを簡単に追加可能。

どちらを選ぶべきか？

  • React Table: 軽量で、細かいカスタマイズが必要な場合に最適。
  • Material-UI: 洗練されたデザインが必要で、すぐに使える機能を求める場合に最適。

次のセクションでは、これまでの内容を振り返り、記事全体のまとめを行います。

まとめ


本記事では、Reactを使用して再利用可能なテーブルコンポーネントを作成する方法を解説しました。基本的なテーブル構造の実装から、動的なデータ表示、スタイリング、ソート機能、ページネーション機能の追加、さらに汎用性と拡張性の確保に至るまで、段階的に実装方法を示しました。

最後に、React TableやMaterial-UIといったライブラリを利用することで、さらに高度なテーブル機能を容易に実現できる点も紹介しました。再利用可能なテーブルコンポーネントを設計することで、開発効率が向上し、メンテナンス性も大幅に向上します。今回の記事を通じて、プロジェクトのニーズに最適なテーブル設計ができるようになることを願っています。

React
テーブル React コンポーネント 再利用性

コメント

コメントする

目次