セルデータ

ReoGrid Web では、高レベルの CellHandle API からパフォーマンス重視の低レベルメソッドまで、さまざまな方法でセルの値を読み書きできます。

Live Demo

CellHandle によるアクセス

worksheet.cell() で CellHandle を取得し、値を操作します。

const ws = grid.worksheet;

// A1 アドレスで指定
ws.cell('A1').value = 'Hello';

// 行・列インデックスで指定（0 始まり）
ws.cell(0, 1).value = 'World';

// 値の読み取り
const val = ws.cell('A1').value; // 'Hello'

チェーンメソッド

setValue() はチェーン可能です。setStyle() や setFormat() と組み合わせて使えます。

ws.cell('A1')
  .setValue('売上')
  .setStyle({ bold: true, backgroundColor: '#dbeafe' })
  .setFormat('#,##0');

低レベル API

パフォーマンスが重要な場合やループ内では、直接メソッドを使います。

// 値の設定
ws.setCellInput(0, 0, 'Hello');

// 値の読み取り
const raw = ws.getCellInput(0, 0);        // 入力値（文字列）
const num = ws.getCellNumericValue(0, 0);  // 数値として取得
const text = ws.getDisplayText(0, 0);      // 表示テキスト（フォーマット適用済み）

// 数値セルかどうか
const isNum = ws.isNumericCell(0, 0);

loadCells() による一括読み込み

loadCells() で複数セルを一度に設定できます。なお、loadCells() はシート全体の内容を置き換えます（既存のセルデータは先にすべてクリアされます）。既存データを残したまま一括設定したい場合は bulkSetCells() を使用してください。

ws.loadCells([
  { row: 0, column: 0, value: 'Name' },
  { row: 0, column: 1, value: 'Age' },
  { row: 1, column: 0, value: 'Alice' },
  { row: 1, column: 1, value: '30' },
]);

数式の入力

値が = で始まる場合、数式として解釈されます。

ws.cell('C1').value = '=A1+B1';
ws.cell('C2').value = '=SUM(A1:B10)';

数式の詳細は数式エンジンを参照してください。

全角数字で入力した数値

日本語入力（IME）がオンのとき、数値は全角数字で入力されます。v1.7.0 から、全角の数字（と＋－．）を半角にすると数値になる入力は、Excel と同じく半角で保存されます。「１２０」は 120、「－１２．５」は -12.5 としてセルに入るため、数式や表示形式でも数値として扱われます。「３階」のように全角数字を含むだけの文字列は、入力したとおりに保存されます。

対象はユーザーがセルに入力した値です。コードから設定した値（setCellInput・cell.value）は渡したとおりに保存されます。フォームでは、こうした数値は Enter 1 回で次の欄へ移動します。

パフォーマンスのヒント

大量のセルを更新する場合、描画を一時停止するとパフォーマンスが向上します。

ws.suspendRender();
try {
  for (let r = 0; r < 1000; r++) {
    ws.setCellInput(r, 0, `Row ${r}`);
    ws.setCellInput(r, 1, String(r * 100));
  }
} finally {
  ws.resumeRender(); // 描画を再開し、まとめて再描画
}

suspendRender() は変更ごとの Canvas 再描画を抑制します。更新が完了したら resumeRender() を呼び出して、すべての変更を一度に再描画します。

このページは役に立ちましたか？