第三章：超狂な勤怠記録Data Table（データテーブル）の実装

レストランオーナーがこの管理画面を開いた時、最初に見たいものは何でしょうか？派手なアニメーションではなく、**「今日は誰が出勤した？誰が遅刻した？何時に打刻した？」**です。このような構造化されたデータ表示は、業界では「データテーブル（Data Table）」と呼びます。

HTMLを学んだばかりの初心者なら、従来の<table>、<tr>、<td>タグを使って一行ずつコーディングしたくなるかもしれません。しかしこれは災いのもと！オーナーはすぐに「このテーブルを『打刻時間』で**ソート（Sorting）できる？データが多いのでページネーション（Pagination）**を追加できる？**検索ボックス（Search）**も欲しい」と要求してくるでしょう。

これをネイティブJavaScriptで実装しようとすると、丸3日かかるかもしれません。しかしVibe Codingの世界では、たった一言の指示でAIがモダンなUIと完全なインタラクティブ機能を備えた企業レベルのData Tableを生成してくれます。

🎯 本章の目標

Vibe Promptを使ってTailwind CSSスタイルの美しいData Tableコンポーネントを生成する方法を学ぶ
「モックデータ（Mock Data）」とは何か、API連携前にモックデータで画面を動かす必要性を理解する
「ステータスバッジ（Badge）」を実装し、遅刻者が一目で分かるようにする
リアルタイムテキスト検索とフィルタリング機能を簡単に追加する

📊 ステップ1：Vibeで高品質なData Tableを生成

フロントエンド開発では「まず画面を見て、その後データを接続する」のが一般的です。プロジェクトのsrc/components/フォルダに空のDataTable.tsxファイルを作成してください。

🔥【Vibe Prompt実践呪文】 React管理画面を開発中です。src/components/DataTable.tsxにデータテーブルコンポーネントを実装してください。 要件は以下の通り： 1. Tailwind CSSで非常に洗練された企業レベルのテーブルを設計：テーブル外枠に角丸（rounded-xl）と淡い影（shadow-sm）、ヘッダー（thead）の背景を濃い青（bg-slate-800）、文字色を白に設定 2. テーブル列は従業員名、打刻時間、打刻タイプ（出勤/退勤）、ステータス（正常/遅刻）、操作（編集ボタン）を含める 3. モックデータ配列（最低5件、遅刻者と正常者を含む）をコンポーネント内にReactのuseStateで保持 4. 「ステータス」列では条件付きレンダリング（Conditional Rendering）を実装：「正常」なら緑背景のBadge、「遅刻」なら赤背景のBadgeを表示

AIが生成するテーブルコードは驚くほど洗練され、高度にモジュール化されています。useStateの設定だけでなく、badgeの色判定ロジックも完璧に記述されます：

// 💡 AIが生成したステータスBadgeコンポーネント例（Reactのコンポーネント化力を示す）
const StatusBadge = ({ status }: { status: string }) => {
  const isLate = status === '遅刻';
  
  // Tailwindで動的に色を切り替え
  const badgeColor = isLate 
    ? 'bg-red-100 text-red-700 border-red-200' 
    : 'bg-green-100 text-green-700 border-green-200';

  return (
    <span className={`px-3 py-1 rounded-full text-xs font-bold border ${badgeColor}`}>
      {status}
    </span>
  );
}

このDataTableをメインページにレンダリングすると、市場にある多くのレガシーシステムよりも美しいインターフェースが完成します！

🔍 ステップ2：痛点を瞬殺 - リアルタイム検索（Search）とフィルタリング機能の追加

データが増えると、オーナーは必ず検索機能を要求します：「『王大明』が今週何回遅刻したか調べたい」。従来の開発では複雑な正規表現や文字列マッチングが必要ですが、Vibe Codingでは要件を明確に伝えるだけです。

🔥【Vibe Prompt実戦呪文】 先程のDataTable.tsxを修正し、検索機能を追加してください。 1. テーブル上部に洗練されたテキスト入力ボックス（Search Input）を追加、虫眼鏡アイコンがあると尚良し 2. ユーザー入力を記録するsearchTerm stateを新規作成 3. 検索ボックスに入力すると、テーブルデータ（mockData）が「従業員名」に入力文字列を含む結果で「リアルタイムにフィルタリング」され、テーブルが再レンダリングされるように

AIは2つの重要な処理を行います：

検索ボックスUIを作成し、onChangeイベントでsearchTermを更新

極めてエレガントなフィルタリングロジックを記述：

// 元データをフィルタリングして表示用データに変換
const filteredData = mockData.filter(item => 
  item.name.toLowerCase().includes(searchTerm.toLowerCase())
);

その後、AIはJSX内のmockData.map(...)をfilteredData.map(...)に置き換えます。

検索ボックスに文字を入力してみてください。一文字打つごとにテーブルデータが瞬時に絞り込まれ、Enterキーやサーバー読み込みを待つ必要がないことがわかります！これが**Client-side Filtering（クライアントサイドリアルタイムフィルタリング）**で、オーナーに非常にスムーズな操作体験を提供します。

💼 [ビジネス応用シーン] フロントエンド検索とバックエンド検索の使い分け

Reactで実装した「リアルタイム検索」は非常にクールですが、技術に詳しいクライアントからは「1万件の打刻データがある場合、フロントエンド検索で遅くなりませんか？」と質問されるかもしれません。

これは非常に価値のあるビジネス質問です。次のように回答できます：

「オーナー様、現在の設計はClient-side Filteringです。データ件数が1000件未満の場合、検索が瞬時に完了し遅延がないため、最良のユーザー体験を提供できます。しかし将来的に打刻記録が数万件に達する見込みの場合、**Server-side Search（バックエンド検索）**に切り替える必要があります。この場合、検索ボックスでEnterを押した後、FastAPIサーバーにAPIリクエストを送り、Supabaseデータベースから結果を取得して返します。APIの実装には追加費用がかかりますが、どちらの方式を採用しますか？」

アーキテクチャへの理解を示すことが、プロジェクトの報酬を上げる鍵となります。

✅ 本章のまとめ

これがフロントエンド開発で最も効率的なワークフロー（Workflow）です： まずMock DataでUIスタイル、検索ロジック、ボタンインタラクションをすべて確認し、クライアントに「動く画面」を見てもらう。 クライアントがOKを出したら、次章ではこれらのモックデータを取り外し、FastAPIバックエンドから取得した実際の打刻記録に置き換える方法を学びます！

よくある問題と解決策

| 問題 | 原因 | 解決方法 | |------|------|---------| | 期待通りの結果が出ない | パラメータ設定ミス | デフォルト値と境界条件を確認 | | 実行が遅い | アルゴリズムの効率 | より効率的なデータ構造を使用 | | メモリ不足 | データ量過多 | バッチ処理を検討 | | デバッグが困難 | ログ不足 | 詳細なログ出力を追加 |

さらに学ぶには

公式ドキュメントを読む
GitHubのオープンソース例を参照
コミュニティディスカッションに参加
コードを修正して結果の変化を観察