React プロジェクトで Excel ワークシートを柔軟に管理：追加・削除・移動

Excel ドキュメント処理のシーンにおいて、ワークシートの追加・削除・変更は最も基本的かつ頻繁に使用される操作の一つです。テンプレートに基づいて新しいデータシートを迅速に生成する場合や、冗長なコンテンツをクリーンアップする場合、ドキュメント構造を調整する場合など、ワークシートの柔軟な管理は欠かせません。本記事では、React アプリケーションで Excel ワークシートの追加、削除、移動を実現する方法を紹介します。WebAssembly 技術に基づき、バックエンドサービスに依存せずにブラウザ上で直接これらの操作を実行できます。

環境準備

このソリューションは、スタンドアロンの JavaScript Excel 処理ライブラリを通じて実装されており、Microsoft Office をインストールする必要がなく、ブラウザ環境での導入に適しています。まず、React プロジェクトに依存関係をインストールします：

npm i spire.xls

インストール完了後、Spire.Xls.Base.js と Spire.Xls.Base.wasm ファイルをプロジェクトの public ディレクトリに配置します。React コンポーネントで動的ロードを通じて WebAssembly モジュールを初期化することで、API を使用できるようになります。

ワークシートの追加

ワークブックに新しいワークシートを追加することは、日常開発における高頻度の要件です。例えば、月次レポートテンプレートに基づいて翌月のレポートコピーを迅速に作成する際に、新しいデータを格納するための空白のワークシートを追加する必要があります。

このライブラリは Worksheets.Add() メソッドを提供しており、ワークブックの末尾に新しいワークシートを追加し、名前を付けることができます。追加後は、通常のワークシートと同様にセルにデータを書き込むことができ、最後にワークブックを保存します。

const startProcessing = async () => {
  // Spire.XLS WASM モジュールを取得
  const xlsModule = window.wasmModule?.spirexls;
  if (!xlsModule) {
    alert('モジュールが準備できていません');
    return;
  }

  // フォントと Excel ファイルをVFSにロード
  await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
  const inputFileName = 'AddWorksheet.xlsx';
  await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

  // ワークブックインスタンスを作成しファイルをロード
  const workbook = new xlsModule.Workbook();
  workbook.LoadFromFile({ fileName: inputFileName });

  // 新しいワークシートを追加し "新增表" と命名
  const sheet = workbook.Worksheets.Add("新規シート");
  sheet.Range.get("C5").Text = "これは新しく追加されたワークシートです。";

  // 列幅を自動調整
  sheet.AllocatedRange.AutoFitColumns();

  // ワークブックを保存
  const outputFileName = "AddWorksheet_output.xlsx";
  workbook.SaveToFile({ fileName: outputFileName });

  // リソースを解放
  workbook.Dispose();

  // VFS から出力ファイルを読み取り、Blob にカプセル化してダウンロードをトリガー
  const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
  const blob = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = outputFileName;
  a.click();
  URL.revokeObjectURL(url);
};

Add メソッドを使用すると、新しいワークシートはデフォルトで既存のすべてのワークシートの後に追加されます。特定の位置にワークシートを挿入する必要がある場合は、Insert 関連メソッドを組み合わせて実装できます。

ワークシートの削除

ワークブックに不要になったり期限切れのワークシートが含まれている場合、削除操作によってドキュメントを整理整頓できます。このライブラリは、ワークシート名による削除とインデックス位置による削除の 2 つの方法を提供しています。

名前による削除はより直感的で、どのワークシートを削除するか明確に分かっている場合に適しています：

const startProcessing = async () => {
  const xlsModule = window.wasmModule?.spirexls;
  if (!xlsModule) {
    alert('モジュールが準備できていません');
    return;
  }

  await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
  const inputFileName = 'RemoveWorksheet.xlsx';
  await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

  const workbook = new xlsModule.Workbook();
  workbook.LoadFromFile({ fileName: inputFileName });

  // ワークシート名を指定して削除
  const sheet = workbook.Worksheets.get("Sheet2");
  workbook.Worksheets.Remove(sheet);

  // インデックスによる削除（コメントアウト部分）
  // workbook.Worksheets.RemoveAt(1);

  const outputFileName = "RemoveWorksheet_output.xlsx";
  workbook.SaveToFile({ fileName: outputFileName });
  workbook.Dispose();

  const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
  const blob = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = outputFileName;
  a.click();
  URL.revokeObjectURL(url);
};

名前による削除では、指定した名前がワークブック内の実際の名前と完全に一致する必要があることに注意してください（大文字と小文字を区別します）。名前が一致しない場合、操作は対象のワークシートを特定できません。削除前にワークシート名を走査して確認できます：

for (let i = 0; i < workbook.Worksheets.Count; i++) {
  console.log(workbook.Worksheets.get(i).Name);
}

ワークシートの移動と順序変更

ワークシートの順序を調整することは、ドキュメント構成における一般的な要件です。例えば、サマリーシートを先頭に移動したり、関連するワークシートをまとめたりする場合があります。このライブラリは MoveWorksheet メソッドを通じてこの機能を実現し、指定したワークシートを目標のインデックス位置に移動します。

const startProcessing = async () => {
  const xlsModule = window.wasmModule?.spirexls;
  if (!xlsModule) {
    alert('モジュールが準備できていません');
    return;
  }

  await window.spire.FetchFileToVFS('simsun.ttc', '/Library/Fonts/', `${process.env.PUBLIC_URL}/font/`);
  const inputFileName = 'Sample.xlsx';
  await window.spire.FetchFileToVFS(inputFileName, '', `${process.env.PUBLIC_URL}/data/`);

  const workbook = new xlsModule.Workbook();
  workbook.LoadFromFile({ fileName: inputFileName });

  // 最初のワークシートを取得し、インデックス 1 に移動
  const sheet = workbook.Worksheets.get(0);
  sheet.MoveWorksheet(1);

  const outputFileName = "MoveWorksheet_output.xlsx";
  workbook.SaveToFile({ fileName: outputFileName });
  workbook.Dispose();

  const modifiedFileArray = window.dotnetRuntime.Module.FS.readFile(outputFileName);
  const blob = new Blob([modifiedFileArray], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = outputFileName;
  a.click();
  URL.revokeObjectURL(url);
};

目標インデックスは0からカウントされ、MoveWorksheet(0) は先頭への移動、MoveWorksheet(workbook.Worksheets.Count - 1) は最後尾への移動を意味します。移動後、既存のワークシートの位置は自動的に調整されます。

仮想ファイルシステムについて

上記の操作における入力ファイルと出力ファイルは、すべて仮想ファイルシステム（VFS）を通じて管理されます。FetchFileToVFS() メソッドはフォントファイルと Excel ファイルを WebAssembly のメモリファイルシステムにロードし、SaveToFile() で生成された出力ファイルもこのメモリシステムに保存されます。ブラウザのダウンロードをトリガーするには、このメモリシステムからデータを読み取り、Blob オブジェクトに変換する必要があります。

各 Workbook インスタンスは操作完了後に Dispose() メソッドを呼び出してメモリリソースを解放することを推奨します。これにより、ブラウザのメモリ使用量が過剰に増加することを防げます。

まとめ

WebAssembly ベースの Excel 処理ソリューションを通じて、React アプリケーションでワークシートの追加、削除、移動をブラウザ上で完全に実行でき、バックエンドサービスは不要です。これらの基本操作は、ほとんどの Excel ドキュメント管理ニーズをカバーするのに十分です。開発者は実際のビジネスシナリオに応じて、サンプルコードを適応・拡張することができます。