https://web.reogrid.net/jp/articles React／Vue で Excel ライクなスプレッドシートを構築するための記事。 ja https://web.reogrid.net/jp/articles/form-mode-javascript-spreadsheet https://web.reogrid.net/jp/articles/form-mode-javascript-spreadsheet 業務アプリでは、スプレッドシートを「表計算」ではなく「フォーム」として使う場面がよくあります。レイアウトは固定、入力欄は数か所、それ以外は保護。フォームモードを使えば、そうしたシートがフォームらしく振る舞います。Enter / Tab で入力欄を順に移動し、1 クリックで入力が始まり、プレースホルダーで書式を案内し、ドロップダウンもキーボードで選べます。経費精算書のフルコード、独自のタブ順、入力値の取り出しまで解説します。 Sat, 26 Sep 2026 00:00:00 GMT form-mode forms data-entry keyboard javascript spreadsheet https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-6 https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-6 ReoGrid Web v1.6 で、フローティング画像が編集可能になり、そして初めて「保存しても消えない」ようになりました。挿入・ドラッグ・リサイズができ、xlsx を往復します。さらに Ctrl+クリックによる複数範囲の選択、縦書きと文字回転、保護シートをキーボードだけで埋められるフォームモード、Excel の「N ページに収める」、そして極細 PDF の解消。公開 API に破壊的変更はありません。 Thu, 10 Sep 2026 00:00:00 GMT release v1.6 images forms pdf spreadsheet https://web.reogrid.net/jp/articles/paste-from-excel-javascript-spreadsheet https://web.reogrid.net/jp/articles/paste-from-excel-javascript-spreadsheet 業務アプリで一番速い取り込み経路は、たいてい誰も設計していない Ctrl+V です。表計算ソフトがクリップボードに何を書き出しているのか、そのうち何が ReoGrid Web まで届くのか、そして「届いているのに見た目が違う」2つの列と、その後始末までを実コードで。 Tue, 08 Sep 2026 00:00:00 GMT clipboard excel copy-paste javascript spreadsheet https://web.reogrid.net/jp/articles/vlookup-sumifs-javascript-spreadsheet https://web.reogrid.net/jp/articles/vlookup-sumifs-javascript-spreadsheet 商品コードから単価を引き、区分ごとに集計する受注明細表をブラウザで組み立てる。VLOOKUP と XLOOKUP の違い、マスタに無いコードの扱い（if_not_found・IFNA・IFERROR）、SUMIF / SUMIFS / COUNTIFS の criteria 記法と引数順の落とし穴、そして ReoGrid Web に「無い」2つの参照関数まで。 Sun, 06 Sep 2026 00:00:00 GMT formula vlookup xlookup sumifs javascript spreadsheet https://web.reogrid.net/jp/articles/japanese-era-dates-in-javascript-spreadsheet https://web.reogrid.net/jp/articles/japanese-era-dates-in-javascript-spreadsheet 官公庁・金融の帳票は「令和1年」では通りません。求められるのは「令和元年」です。ReoGrid Web で Excel の表示形式（書式コード）をどう使うか ― 元号トークン g/gg/ggg と e/ee、[$-ja-JP-x-gannen] ロケールタグ、和名・英名のカラーブラケット、条件付きセクション、そして経理が期待する ▲ 表記まで。 Wed, 02 Sep 2026 00:00:00 GMT number-format japanese wareki date localization javascript https://web.reogrid.net/jp/articles/generate-pdf-invoices-in-the-browser https://web.reogrid.net/jp/articles/generate-pdf-invoices-in-the-browser PDF帳票のパイプラインを丸ごとブラウザの中で完結させる方法。{{token}} セルで帳票を一度設計し、プレーンなデータオブジェクトをバインドして明細行を件数ぶん展開、saveAsPdf でベクターPDFとして出力。改ページ、ページヘッダー・フッター、行ごとの数式、そして1枚のテンプレートから100通を作るバッチ処理まで。 Mon, 31 Aug 2026 00:00:00 GMT report-binding pdf invoice template printing javascript https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-5 https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-5 ReoGrid Web v1.5 は「毎日の操作」を埋めるリリースです。Ctrl/Cmd+F の Excel スタイル検索と置換、範囲・行・列のドラッグ移動、Excel の書式コードで書けるページヘッダー／フッター、そしてロケールを指定するだけで適切な CJK フォントを埋め込む PDF エクスポート。公開 API に破壊的変更はありません。 Sat, 08 Aug 2026 00:00:00 GMT release v1.5 find-replace pdf printing spreadsheet https://web.reogrid.net/jp/articles/pivot-table-javascript-spreadsheet https://web.reogrid.net/jp/articles/pivot-table-javascript-spreadsheet 数百行の生データを、データの変更に追随して再計算されるクロス集計表に。createPivot 一発で行・列・集計を宣言し、ハンドルの update / refresh / remove でコードから操作。地域×商品の売上を使った完全な実例と、フィルター・総計・Lite 対 Pro の境界線まで。 Fri, 17 Jul 2026 00:00:00 GMT pivot-table aggregation data-analysis data-table spreadsheet javascript https://web.reogrid.net/jp/articles/sort-filter-javascript-spreadsheet https://web.reogrid.net/jp/articles/sort-filter-javascript-spreadsheet ブラウザのデータ表に、Excel 風の列の並べ替えとヘッダードロップダウンのフィルターを追加。createAutoFilter 一発でユーザーにドロップダウンを、getColumnValues / setColumnFilter で同じフィルターをコードから操作。表示行数のライブ表示付きの実例と、並べ替え対フィルター・Lite 対 Pro の勘どころまで。 Fri, 10 Jul 2026 00:00:00 GMT sort filter auto-filter data-table spreadsheet javascript https://web.reogrid.net/jp/articles/data-validation-javascript-spreadsheet https://web.reogrid.net/jp/articles/data-validation-javascript-spreadsheet ドロップダウンリスト、数値・日付の範囲チェック、数式によるカスタム検証 ― フォームバリデーションのコードを1行も書かずに、不正な入力をタイプした瞬間に弾く。ReoGrid Web の Excel 互換データ検証を、受注入力シートの実コードで解説。入力時メッセージ・エラーアラート・xlsx ラウンドトリップまで。 Tue, 07 Jul 2026 00:00:00 GMT data-validation spreadsheet forms data-entry javascript ui https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-4 https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-4 ReoGrid Web v1.4 はグリッドを「帳票ツール」に進化させます — 改ページプレビュー付きの Excel スタイルのページレイアウトと、プレビューと同一のページ割りで出力する自社オリジナルエンジンの PDF エクスポート。さらにピボットテーブル、テーブルスタイル、データの入力規則、レポートバインディング、セルコメント、名前付き範囲。公開 API に破壊的変更はありません。 Wed, 01 Jul 2026 00:00:00 GMT release v1.4 pdf pivot printing spreadsheet https://web.reogrid.net/jp/articles/ai-batch-process-spreadsheet-data https://web.reogrid.net/jp/articles/ai-batch-process-spreadsheet-data スプレッドシート全体にLLMを走らせる実践パイプライン。ブラウザでxlsxをJSONに変換し、行をClaudeに送って分類・クレンジングし、結果をグリッドに書き戻す。大量行にはBatch APIを使用。 Sat, 27 Jun 2026 00:00:00 GMT ai llm xlsx json automation claude https://web.reogrid.net/jp/articles/extract-excel-data-as-json https://web.reogrid.net/jp/articles/extract-excel-data-as-json ユーザーがアップロードしたExcelファイルを、アプリが使える整ったJSONに変換する実践パターン。ヘッダー検出・型変換・複数シート・API/DBへの直接POSTまで。 Sat, 27 Jun 2026 00:00:00 GMT excel xlsx json data integration https://web.reogrid.net/jp/articles/xlsx-to-json-in-the-browser https://web.reogrid.net/jp/articles/xlsx-to-json-in-the-browser .xlsx ファイルを完全にクライアント側でJSONに変換。往復用のロスレスなReoGrid JSONか、アプリ向けの素のデータ行か。実用的なコードつき、ファイルはブラウザから出ません。 Sat, 27 Jun 2026 00:00:00 GMT excel xlsx json javascript import https://web.reogrid.net/jp/articles/conditional-formatting-javascript-spreadsheet https://web.reogrid.net/jp/articles/conditional-formatting-javascript-spreadsheet 在庫が少なければ赤、売上が目標超なら緑、キャンセル行は自動でフラグ ― セルを値に応じて色分けする処理を、スタイルのループを一切書かずに。ReoGrid Web の3種類の条件付き書式ルールを、値の変化に連動して再評価される在庫ダッシュボードの実コードで解説します。 Sun, 21 Jun 2026 00:00:00 GMT conditional-formatting spreadsheet dashboard cell-styles javascript ui https://web.reogrid.net/jp/articles/cross-sheet-formulas-sales-summary https://web.reogrid.net/jp/articles/cross-sheet-formulas-sales-summary ReoGrid Web 1.3 のマルチシート実践チュートリアル。3つの拠点シートを作り、すべてをクロスシート数式（='Tokyo'!E6 や =SUM(Osaka!B2:B5)）だけで集計するサマリーシートを構築します。どの拠点の数値を編集しても、サマリーがシートをまたいで再計算されます。 Wed, 17 Jun 2026 00:00:00 GMT tutorial multi-sheet formula workbook spreadsheet https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-3 https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-3 ReoGrid Web v1.3 はグリッドを N 枚のワークシートからなるワークブックに進化させます — 標準のシートタブバー、シートごとの Undo、ワークブック全体の xlsx/JSON 入出力、そして =Sheet1!A1 のようなクロスシート数式参照。公開 API に破壊的変更はありません。 Thu, 11 Jun 2026 00:00:00 GMT release v1.3 multi-sheet workbook spreadsheet https://web.reogrid.net/jp/articles/cell-types-checkbox-dropdown-progress https://web.reogrid.net/jp/articles/cell-types-checkbox-dropdown-progress Excel業務シートの☑チェックや選択リストを、HTMLフォームで作り直さずWebへ。ReoGrid Web の組み込みセルタイプ8種（checkbox・dropdown・progress・rating・sparkline 等）で勤怠管理表を組み立てる実装ガイド。実コード付き。 Sat, 06 Jun 2026 00:00:00 GMT cell-types checkbox dropdown spreadsheet attendance ui https://web.reogrid.net/jp/articles/million-rows-spreadsheet-lazy-loading https://web.reogrid.net/jp/articles/million-rows-spreadsheet-lazy-loading 3週間前、私たちは「100万行はスコープ外」と書きました。考えを変えました。遅延ロード・データソースの紹介です — スクロールバーは 1,000,000 行を表しながら、グリッドが保持するのは実際に見えている数百行だけ。 Sat, 06 Jun 2026 00:00:00 GMT performance big-data lazy-loading spreadsheet javascript https://web.reogrid.net/jp/articles/excel-layout-forms-to-web https://web.reogrid.net/jp/articles/excel-layout-forms-to-web 「神Excel」「方眼紙Excel」でつくった見積書・請求書などの帳票をWeb化する、2つの現実的な方法 ― 既存の .xlsx をそのまま読み込む／コードで組み立てる。結合セル・罫線・円書式・和暦まで、ブラウザだけで。実コード付き。 Thu, 04 Jun 2026 00:00:00 GMT excel xlsx forms invoice spreadsheet merged-cells https://web.reogrid.net/jp/articles/angular-spreadsheet-grid https://web.reogrid.net/jp/articles/angular-spreadsheet-grid ReoGrid Web は React と Vue のラッパーを提供していますが、コアはフレームワーク非依存です。Angular アプリに、編集・数式・xlsx 読み込みを備えたキャンバスベースのスプレッドシートを約30行で組み込む方法を紹介します。 Wed, 03 Jun 2026 00:00:00 GMT angular spreadsheet data-grid excel typescript https://web.reogrid.net/jp/articles/excel-import-export-javascript https://web.reogrid.net/jp/articles/excel-import-export-javascript .xlsx ファイルをブラウザに読み込み、グリッドを Excel に書き出し、xlsx と JSON を相互変換する方法 — すべてクライアントサイドで、スタイルと書式を保持したまま。ReoGrid Web の実用コード付き。 Wed, 03 Jun 2026 00:00:00 GMT excel xlsx import export json javascript https://web.reogrid.net/jp/articles/reogrid-dotnet-to-web https://web.reogrid.net/jp/articles/reogrid-dotnet-to-web WinForms や WPF で ReoGrid を使ったことがあるなら、Web 版はすぐ馴染みます。同じ Excel ライクなモデル、同じ xlsx 再現性が、React・Vue・バニラ JS で。何が引き継がれ、何が変わり、どう橋渡しするかを解説します。 Wed, 03 Jun 2026 00:00:00 GMT dotnet winforms wpf migration spreadsheet web https://web.reogrid.net/jp/articles/reogrid-vs-luckysheet-x-spreadsheet https://web.reogrid.net/jp/articles/reogrid-vs-luckysheet-x-spreadsheet キャンバス/スプレッドシート系の3つの JS ライブラリ — Luckysheet、x-spreadsheet、ReoGrid Web — を、描画方式・xlsx 再現性・メンテナンス・ライセンス・適したプロジェクトの観点で実用的に比較します。 Wed, 03 Jun 2026 00:00:00 GMT comparison luckysheet x-spreadsheet spreadsheet open-source canvas https://web.reogrid.net/jp/articles/online-xlsx-viewer-react https://web.reogrid.net/jp/articles/online-xlsx-viewer-react 「xlsx viewer online」で出てくるツールの多くは、あなたのスプレッドシートを自分の管理外のサーバーへアップロードします。ここで紹介するのは、.xlsx を完全にブラウザ内で開く React コンポーネント — 読み取り専用で、スタイル・結合・数式を保持。アップロードもバックエンドもアカウントも不要です。 Mon, 01 Jun 2026 00:00:00 GMT xlsx excel react viewer file-api https://web.reogrid.net/jp/articles/vue-invoice-with-editable-formulas https://web.reogrid.net/jp/articles/vue-invoice-with-editable-formulas 実用的な Vue 3 製インボイスコンポーネント: 編集可能な数量と単価、数式による行小計の自動計算、SUM、税、合計 — すべてを 1 枚の Canvas バックエンドのスプレッドシートで実現。計算はリアルタイムに更新され、リアクティブな ref が合計値を Vue の UI へミラーします。xlsx エクスポートは 1 回の呼び出しで完結（Pro）。 Fri, 29 May 2026 00:00:00 GMT vue tutorial formula invoice spreadsheet https://web.reogrid.net/jp/articles/excel-like-forms-on-the-web https://web.reogrid.net/jp/articles/excel-like-forms-on-the-web 帳票はもう Excel だけではありません。ReoGrid Web を使えば、既存の Excel ファイルをそのままブラウザに読み込んだり、ゼロからコードで構築したり、テンプレートに動的データを流し込んだりと、Web 上で Excel ライクな帳票体験を実現できます。 Tue, 26 May 2026 00:00:00 GMT tutorial invoice spreadsheet excel japanese https://web.reogrid.net/jp/articles/reogrid-web-vs-ag-grid-handsontable https://web.reogrid.net/jp/articles/reogrid-web-vs-ag-grid-handsontable ReoGrid チームの視点から見た、JavaScript の主要 3 グリッドライブラリの率直な比較。それぞれがどこに向いているか、トレードオフは何か、そしてあなたのプロジェクトに本当に必要なのはどれかを判断するためのガイド。 Mon, 18 May 2026 00:00:00 GMT comparison ag-grid handsontable spreadsheet data-grid react vue https://web.reogrid.net/jp/articles/react-invoice-with-editable-formulas https://web.reogrid.net/jp/articles/react-invoice-with-editable-formulas 実用的な React 製インボイスコンポーネント: 編集可能な数量と単価、数式による行小計の自動計算、SUM、税、合計 — すべてを 1 枚の Canvas バックエンドのスプレッドシートで実現。計算はリアルタイムに更新され、ユーザーは xlsx へエクスポート（Pro）できます。 Sun, 17 May 2026 00:00:00 GMT react tutorial formula invoice spreadsheet https://web.reogrid.net/jp/articles/load-xlsx-in-browser-no-server https://web.reogrid.net/jp/articles/load-xlsx-in-browser-no-server .xlsx ファイルを Web ページにドラッグし、セルのスタイル・結合・罫線・ウィンドウ枠固定・数式を保ったままスプレッドシート UI で描画する。バックエンドも SheetJS も進捗モーダルも不要 — 44 万セルのファイルを 3.7 秒でロードします。 Sat, 16 May 2026 00:00:00 GMT xlsx excel react vue file-api performance https://web.reogrid.net/jp/articles/canvas-spreadsheet-10000-rows-60fps https://web.reogrid.net/jp/articles/canvas-spreadsheet-10000-rows-60fps Canvas ベースのスプレッドシートには DOM のボトルネックはありませんが、2D コンテキスト側で千の小さな出血が起きえます。本記事では、ReoGrid Web が行ごとの React 再調整も特殊な仮想化テクニックもなしに、10,000 行の密なシートをジャンクなく描画する方法を解説します。 Fri, 15 May 2026 00:00:00 GMT performance canvas react vue spreadsheet https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-2 https://web.reogrid.net/jp/articles/introducing-reogrid-web-v1-2 ReoGrid Web v1.2 には 109 個の組み込み数式、Excel スタイルの色分け参照編集、オートフィルハンドル、スクロール 1 フレームあたりの Canvas 呼び出し数を約 70% 削減した描画エンジンが含まれます。React／Vue 用ラッパー付きで約 100KB（min+gzip）の単一パッケージです。 Thu, 14 May 2026 00:00:00 GMT release v1.2 react vue spreadsheet