JavaScript で Excel ファイルを読み書きする — インポート・エクスポート・JSON

Web アプリで Excel ファイルを扱う方法は大きく2つあります。1つはサーバーサイド: ファイルをバックエンドへ送り、ライブラリで解析し、データを返す。もう1つはクライアントサイド: ブラウザで直接読み書きし、サーバーに一切触れさせない。

ReoGrid Web は後者を行います。しかもヘッドレスなパーサと違い、ファイルを編集可能なグリッドとして描画し、セルスタイル・結合セル・罫線・表示形式をラウンドトリップを通して保持します。この記事では、実際に必要になる4つの操作を扱います。インポート、エクスポート、xlsx→JSON、JSON→グリッドです。

インポート: .xlsx ファイルを読み込む

xlsx のインポートは無料の Lite ティアと Pro の両方で動作します。バイト列の出どころに応じて4つのエントリポイントがあります。

import { createReogrid } from '@reogrid/lite';

const { worksheet } = createReogrid('#grid');

// ユーザーが選んだファイルから
await worksheet.loadFromFile(file);            // File オブジェクト

// サーバー上の URL から
await worksheet.loadFromUrl('/data/report.xlsx');

// 生のバイト列から（fetch のレスポンスやドラッグ＆ドロップなど）
await worksheet.loadFromBuffer(arrayBuffer);   // ArrayBuffer | Uint8Array

最も一般的なのはファイル入力を繋ぐケースです。

const input = document.querySelector<HTMLInputElement>('#file')!;
input.addEventListener('change', async (e) => {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (file) await worksheet.loadFromFile(file);
});

loadFromFile は、セル・スタイル・結合・罫線・表示形式・画像がすべて適用された後に解決します。つまり await すればグリッドの準備が整った状態です。すべてがブラウザ内で動くため、ファイルはユーザーの端末から外に出ません（プライバシーに最適 — まさにこれが無料オンライン XLSX ビューアの仕組みです）。

エクスポート: グリッドを .xlsx で保存する

エクスポートは Pro の機能です。最もシンプルな形はブラウザのダウンロードをトリガーします。

import { createReogrid } from '@reogrid/pro';

const { worksheet } = createReogrid('#grid');
// ...グリッドを構築・編集...

worksheet.saveAsXlsx({
  filename: 'report.xlsx',
  sheetName: 'Q1 2026',
});

書き出されるもの: セルの値、数式（Excel がすぐ数値を表示できるようキャッシュ済み結果付き）、スタイル、表示形式、結合セル、罫線、行/列のサイズ、条件付き書式、埋め込み画像。loadXlsx → saveAsXlsx のラウンドトリップはこれらすべてを保持します。

ダウンロードせずにエクスポート

ダウンロードではなく xlsx のバイト列が欲しいとき — アップロード、フォーム添付、保存のため — スナップショットから構築します。

import { buildXlsxFromSnapshot } from '@reogrid/pro';

const snapshot = worksheet.getExportSnapshot();
const bytes: Uint8Array = buildXlsxFromSnapshot(snapshot, 'Sheet1');

await fetch('/api/upload', {
  method: 'POST',
  headers: { 'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
  body: bytes,
});

xlsx → JSON

しばしば欲しいのはファイルではなくデータです。xlsx を読み込んだ後（あるいはグリッドを構築した後）、worksheet.cell(row, col).value でセル値を読み、必要な形に組み立てます。

await worksheet.loadFromFile(file);

const HEADER_ROW = 0;
const COLS = 3;            // シートが使う列数
const rows: Record<string, string>[] = [];

// ヘッダーを読む
const headers: string[] = [];
for (let c = 0; c < COLS; c++) {
  headers.push(worksheet.cell(HEADER_ROW, c).value ?? `col${c}`);
}

// 先頭セルが空になるまでデータ行を読む
for (let r = HEADER_ROW + 1; ; r++) {
  const first = worksheet.cell(r, 0).value;
  if (first == null || first === '') break;
  const obj: Record<string, string> = {};
  for (let c = 0; c < COLS; c++) {
    obj[headers[c]] = worksheet.cell(r, c).value ?? '';
  }
  rows.push(obj);
}

console.log(JSON.stringify(rows, null, 2));

これで、アップロードされた任意のスプレッドシートから、サーバー往復なしできれいなオブジェクト配列が得られます。

JSON → グリッド

逆方向 — オブジェクト配列をグリッドにする — はワンパスの書き込みです。（性能の詳細は一括読み込みレシピを参照。）

const data = [
  { product: 'Widget', price: 9.99, qty: 40 },
  { product: 'Gadget', price: 24.5, qty: 12 },
];

const columns = ['product', 'price', 'qty'] as const;

columns.forEach((key, c) =>
  worksheet.cell(0, c).setValue(key).setStyle({ bold: true }),
);
data.forEach((row, r) =>
  columns.forEach((key, c) => worksheet.cell(r + 1, c).setValue(String(row[key]))),
);

ここから saveAsXlsx() を呼べば、JSON をそのままダウンロード可能な Excel ファイルにできます — 「テーブルを Excel に書き出す」機能が2ステップで実現します。

CSV は？

CSV はただのテキストなので、重いライブラリは不要です。インポート時は文字列を分割してグリッドへ、エクスポート時は .value セルを読んでカンマ区切り文字列にする — JSON の節と同じセル読み取りループです。本物の Excel 機能（複数シート、スタイル、数式、書式）が必要なら xlsx を、平坦なテキスト行だけなら セル API 経由の CSV で十分です。

Lite と Pro

つまりブラウザで Excel を読むのは無料、書くのが Pro の境界線です。

まとめ

ブラウザで Excel I/O を行えば、ファイルはユーザーの端末に留まり、サーバー往復がなくなり、そして ReoGrid なら盲目的な解析ではなく編集可能で忠実なスプレッドシートのビューが得られます。XLSX 入出力ドキュメントから始め、読み込み・保存のレシピを入手するか、ライブデモをお試しください。