第十章：上司が最も愛する機能 - Excel (CSV) レポートのエクスポート

勤怠管理システムのバックエンドとして、どれだけ美しいグラフを作成しても、最終的に上司や人事から必ずこう言われます： 「これ、給与計算用にExcelにエクスポートできますか？」

エクスポート機能を実装できなければ、これまでの努力は無駄になります。この章では、たった1つのパッケージを使って3分でこの「神聖な任務」を完了する方法を教えます。

🎯 本章の目標

1. CSVフォーマットの仕組みを理解する
2. react-csvパッケージで簡単にエクスポートボタンを実装する
3. テーブルに「レポートエクスポート」機能を追加する

---

📄 CSVとは？

CSV (Comma-Separated Values) は非常に古いですが、極めて汎用性の高いテキスト形式です。 各行が1つのデータレコードを表し、各フィールドは「カンマ」で区切られます。

名前,打刻時間,状態
王大明,2026-06-27 09:00,正常
李小美,2026-06-27 09:15,遅刻

このファイルの拡張子は.csvですが、世界中のExcelで問題なく開くことができます！これが、複雑なExcelジェネレーターの代わりに「CSVエクスポート」を実装する理由です。

---

🚀 ステップ1：AIにエクスポートボタンを作成してもらう

[!TIP] Vibe Prompt (AIにコピーして送信)： 私のバックエンドには打刻記録の配列(records)があります。Excelで開けるようにデータをCSVにエクスポートするボタンが必要です。 1. react-csvのnpmインストールコマンドを教えてください。 2. DataTableコンポーネントに<CSVLink>を追加してください。 3. CSVのヘッダー行(headers)を定義し、ボタンを目立つ緑色(Tailwind)で「レポートをダウンロード」と表示してください。 4. ダウンロードファイル名は「今月の打刻記録.csv」に設定してください。

AIの回答に、その簡単さに驚くでしょう：

1. パッケージのインストール：

npm install react-csv

2. ボタンの実装：

import { CSVLink } from "react-csv";

// データベースから取得した記録と仮定
const data = [
  { name: "王大明", time: "2026-06-27 09:00", status: "正常" },
  { name: "李小美", time: "2026-06-27 09:15", status: "遅刻" }
];

// ヘッダーを定義、keyと表示名(label)を指定
const headers = [
  { label: "従業員名", key: "name" },
  { label: "打刻時間", key: "time" },
  { label: "出勤状態", key: "status" }
];

export default function DataTable() {
  return (
    <div>
      <div className="flex justify-between items-center mb-4">
        <h2 className="text-xl font-bold">打刻記録表</h2>
        
        {/* 魔法はここに！ */}
        <CSVLink 
          data={data} 
          headers={headers} 
          filename="今月の打刻記録.csv"
          className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg flex items-center"
        >
          ⬇️ Excelレポートをダウンロード
        </CSVLink>
      </div>
      
      {/* 以下はあなたのテーブル */}
      <table>...</table>
    </div>
  );
}


---

🎉 コース総まとめ (Course 3 修了)

おめでとう！Line Punch Web (勤怠管理バックエンドシステム) 実戦プロジェクト全10章が完了しました！

あなたは以下を学びました：

1. Vite + React の基盤構築とLayout設計
2. Mock DataとData Table(テーブル)の実装
3. API連携(Axios)と厄介なCORSエラーの解決
4. RechartsビジネスチャートとZustand状態管理
5. React Hook FormによるフォームバリデーションとCSVレポートエクスポート

これは多くの初級エンジニアのスキルを超えています。あなたは現在「企業内管理システム(ERP/CRM)」の外注案件を単独で請け負う能力を備えています。 この成果を楽しんでください。次のプロジェクトでお会いしましょう！