ReactJS - テーブル：入門ガイド

こんにちは、志を抱く開発者さんたち！今日は、ReactJSのテーブルについて深く掘り下げます。コンピュータサイエンスを多年間教えてきた経験から言えることは、テーブルはウェブ開発の默默の英雄です。アニメーションやモバイルファーストデザインほど派手ではありませんが、非常に便利です！それでは、腕をまくって始めましょう。

テーブルコンポーネントの理解

テーブルコンポーネントとは？

ReactJSでは、テーブルコンポーネントはデータを行と列で表示する方法です。デジタルスプレッドシートをウェブアプリケーションに埋め込むものと考えます。構造化された情報を明確かつ整理された方法で表示するのに最適です。

Reactテーブルの基本構造

簡単な例から始めましょう：

import React from 'react';

function SimpleTable() {
return (
<table>
<thead>
<tr>
<th>名前</th>
<th>年齢</th>
<th>都市</th>
</tr>
</thead>
<tbody>
<tr>
<td>ジョン・ドウ</td>
<td>30</td>
<td>ニューヨーク</td>
</tr>
<tr>
<td>ジェーン・スミス</td>
<td>25</td>
<td>ロンドン</td>
</tr>
</tbody>
</table>
);
}

export default SimpleTable;

この例では：

• <table> はテーブルの主要なコンテナです。
• <thead> はヘッダー行を含みます。
• <tbody> はデータ行を含みます。
• <tr> はテーブル行を表します。
• <th> はヘッダーセルに使用されます。
• <td> はデータセルに使用されます。

テーブルコンポーネントの適用

基本を理解したので、Reactのコンポーネント構造とpropsを使ってより動的なテーブルを作成しましょう。

import React from 'react';

function DynamicTable({ data }) {
return (
<table>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default DynamicTable;

このコンポーネントはより柔軟です：

• data propを受け取り、これはオブジェクトの配列です。
• 最初のデータオブジェクトのキーに基づいてヘッダーを動的に生成します。
• データ配列の各アイテムに対して行を作成します。

このコンポーネントを使うには：

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

function App() {
const tableData = [
{ name: "ジョン・ドウ", age: 30, city: "ニューヨーク" },
{ name: "ジェーン・スミス", age: 25, city: "ロンドン" },
{ name: "ボブ・ジョンソン", age: 35, city: "パリ" }
];

return (
<div>
<h1>ユーザーデータ</h1>
<DynamicTable data={tableData} />
</div>
);
}

export default App;

ダークバージョンとカラムストリピングの追加

テーブルを視覚的に魅力的で読みやすいものにするために、ダークバージョンとカラムストリピングを追加しましょう。

import React from 'react';
import './Table.css'; // スタイリング用ファイルを作成します

function EnhancedTable({ data, darkMode = false }) {
const tableClass = darkMode ? 'table dark' : 'table';

return (
<table className={tableClass}>
<thead>
<tr>
{Object.keys(data[0]).map((header) => (
<th key={header}>{header}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, index) => (
<tr key={index} className={index % 2 === 0 ? 'even' : 'odd'}>
{Object.values(row).map((cell, cellIndex) => (
<td key={cellIndex}>{cell}</td>
))}
</tr>
))}
</tbody>
</table>
);
}

export default EnhancedTable;

次に、テーブルをスタイルするためのCSSファイル（Table.css）を作成します：

.table {
border-collapse: collapse;
width: 100%;
}

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

.table th {
background-color: #f2f2f2;
font-weight: bold;
}

.table .even {
background-color: #f9f9f9;
}

.table.dark {
color: white;
background-color: #333;
}

.table.dark th {
background-color: #444;
}

.table.dark .even {
background-color: #2a2a2a;
}

.table.dark .odd {
background-color: #333;
}

このCSSは以下を提供します：

• 基本的なテーブルスタイルで、边とパディングがあります。
• 読みやすさを高めるために行の色を交互にします。
• ダークモード版のテーブル。

この強化されたテーブルを使うには：

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

function App() {
const tableData = [
{ name: "ジョン・ドウ", age: 30, city: "ニューヨーク" },
{ name: "ジェーン・スミス", age: 25, city: "ロンドン" },
{ name: "ボブ・ジョンソン", age: 35, city: "パリ" }
];

return (
<div>
<h1>ユーザーデータ（ライトモード）</h1>
<EnhancedTable data={tableData} />

<h1>ユーザーデータ（ダークモード）</h1>
<EnhancedTable data={tableData} darkMode={true} />
</div>
);
}

export default App;

結論

そして、みなさん！私たちは基本的な静的テーブルから動的でスタイリッシュで柔軟なテーブルコンポーネントまで旅をしました。忘れてはならないのは、テーブルはウェブ開発のスイスアーミーナイフのような存在です。シンプルに見えるかもしれませんが、正しく使えば非常に多様で強力です。

Reactの旅を続ける中で、データの表示方法を色々と試してみてください。テーブルは始まりに過ぎません！次はソートやフィルタリング、または編集可能なテーブルに挑戦するかもしれません。可能性は無限です！

codingを続け、好奇心を持ち続け、忘れてはならないのは、プログラミングの世界では、エラーメッセージはすべて新しい学習機会であることです。ハッピーコーディング！

Credits: Image by storyset