[MUI][React][TypeScript]Windowsの指定したローカルフォルダにCSVファイルを作成したい

Question

実現したいこと

下記【環境】下の開発において、
ある画面で【CSV出力】ボタンを押すと、CSVデータを指定されたフォルダに規則的なファイル名（日付時間等含）のCSVファイルを保存（新規作成）する機能を実現させたいです。

前提

【環境】
・WindowsPC
・Node：8.19.3
・MUI（Material UI）5.11.7
・React　18.2.0
・Typescript　4.9.5

上記環境で開発を行っております。
尚、このCSVファイルの中身はMUIのDataGridで表示されているデータを出力する形ではなく、
DataGridで選ばれた行に関する別（DB)テーブルよりデータ取得した内容になります。

まず単純なファイルでのファイル出力でつまずいております。

試してみたこと

様々試しましたが代表的には２パターンを試しました。

①　下記の場合（Webシステムを使ったダウンロード）、
Windowsの「ダウンロードフォルダ」固定でダウンロードされてしまい、
要件を満たしませんでした。

※関数内の処理のみ記載
const blob = new Blob(['テスト用文字'],{type:"text/plain"});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'filename.txt';
link.click();

②　JavaScriptでファイルを作成するスタイル。

　import fs from 'fs';

 　※関数内で
    fs.writeFileSync('test.txt', 'Hello!');

他の方法でもfsを使うと、下記のエラーが発生してしまいます。

Module not found: Error: Can't resolve 'fs' in 'ソースファイルの位置'。

Reactでは'fs'は使えない？？

上記のような状況で、WindowsPC内の指定フォルダに、ファイルを出力（作成）することが可能なのか？
どのような形で実現ができるのか？教えて頂けますと幸いです。

よろしくお願いいたします。

Comments

[y_waiwai]

fsってのはなんのことでしょうか

Answer 1

React で実行されるのはクライアントサイドのコードです。そのため、直接 Windows PC 上の指定フォルダにファイルを保存することはできません。しかし、ユーザーがダウンロードフォルダを選択できるようにすることで、要件を満たすことができるかもしれません。

一つの解決策としては、Electron を使ってデスクトップアプリケーションに変換することが考えられます。これにより、Node.js の機能（fs モジュールなど）を直接使用して、指定されたフォルダにファイルを保存できます。

ただし、Electron を使用せずに現在の環境で実装する場合は、次のようにしてみてください。

1. サーバーサイドのエンドポイントを作成し、クライアントサイドからそのエンドポイントにデータを送信します
2. サーバーサイドで、受信したデータを CSV ファイルに変換し、指定されたフォルダに保存します
3. ファイルが保存されたら、サーバーからクライアントに通知し、クライアントはその結果を表示します

サーバーサイドに Node.js を使用している場合は、以下のようなコードを実装して、上記手順を実現できます。

まず、Express を使ってサーバーサイドの API エンドポイントを作成します。

const express = require('express');
const fs = require('fs');
const app = express();
app.use(express.json());

app.post('/save-csv', (req, res) => {
  const data = req.body.data;
  const filename = 'output-' + new Date().toISOString() + '.csv';
  const filePath = '指定されたフォルダのパス/' + filename;

  // dataをCSV形式に変換する処理を実装

  fs.writeFileSync(filePath, data);
  res.json({ message: 'CSVファイルが正常に保存されました' });
});

app.listen(3001, () => {
  console.log('Server is running on port 3001');
});

次に、クライアントサイドで、API エンドポイントにデータを送信する関数を実装します。

async function saveCSVData(data) {
  const response = await fetch('http://localhost:3001/save-csv', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ data: data })
  });

  const result = await response.json();
  alert(result.message);
}

これで、React からサーバーサイドの API エンドポイントにデータを送信し、サーバーサイドで CSV ファイルを生成し、指定されたフォルダに保存できます。ファイルが正常に保存されたら、サーバーからクライアントに通知が送られ、アプリケーション上でその結果を表示できます。

ただし、この方法ではクライアントサイドとサーバーサイドの間でデータのやり取りが発生し、インターネット環境が必要になります。また、セキュリティ上の問題がある場合がありますので、適切な認証や権限管理を行いましょう。

最後に、クライアント側で CSV 出力ボタンを押したときに saveCSVData 関数が呼び出されるように、ボタンのイベントハンドラを設定します。

import React from 'react';

function App() {
  // CSV データを生成する関数を実装します。
  // この例ではダミーデータを使っています。
  function generateCSVData() {
    const data = [
      ['header1', 'header2', 'header3'],
      ['row1-1', 'row1-2', 'row1-3'],
      ['row2-1', 'row2-2', 'row2-3']
    ];
    return data.map(row => row.join(',')).join('\n');
  }

  async function handleExportCSV() {
    const csvData = generateCSVData();
    await saveCSVData(csvData);
  }

  return (
    <div>
      {/* 他のコンポーネントがここに表示されます */}
      <button onClick={handleExportCSV}>CSV出力</button>
    </div>
  );
}

export default App;

このように実装することで、クライアントサイドからサーバーサイドへのデータの送信、サーバーサイドでの CSV ファイルの生成と保存、そしてサーバーからクライアントへの通知を行うことができます。ただし、この方法はクライアントとサーバーの両方を設定する必要があり、状況によってはセキュリティ上の問題も考慮する必要があります。