記事
React／Vue で Excel ライクなスプレッドシートを構築する — パフォーマンス、数式、xlsx ラウンドトリップ、ReoGrid Web のリリースノートまで。
-
· unvell teamJavaScriptスプレッドシートに「入力規則」を ― 不正なデータをセルの手前で止める
ドロップダウンリスト、数値・日付の範囲チェック、数式によるカスタム検証 ― フォームバリデーションのコードを1行も書かずに、不正な入力をタイプした瞬間に弾く。ReoGrid Web の Excel 互換データ検証を、受注入力シートの実コードで解説。入力時メッセージ・エラーアラート・xlsx ラウンドトリップまで。
#data-validation #spreadsheet #forms #data-entry #javascript #ui -
· unvell teamReoGrid Web v1.4 を発表 — ページレイアウト、印刷そのままの PDF エクスポート、そして Excel グレードのデータ機能
ReoGrid Web v1.4 はグリッドを「帳票ツール」に進化させます — 改ページプレビュー付きの Excel スタイルのページレイアウトと、プレビューと同一のページ割りで出力する自社オリジナルエンジンの PDF エクスポート。さらにピボットテーブル、テーブルスタイル、データの入力規則、レポートバインディング、セルコメント、名前付き範囲。公開 API に破壊的変更はありません。
#release #v1.4 #pdf #pivot #printing #spreadsheet -
· unvell teamAIでスプレッドシートを一括処理: xlsx → JSON → LLM
スプレッドシート全体にLLMを走らせる実践パイプライン。ブラウザでxlsxをJSONに変換し、行をClaudeに送って分類・クレンジングし、結果をグリッドに書き戻す。大量行にはBatch APIを使用。
#ai #llm #xlsx #json #automation #claude - · unvell team
ExcelからアプリへーxlsxからJSONで構造化データを取り出す
ユーザーがアップロードしたExcelファイルを、アプリが使える整ったJSONに変換する実践パターン。ヘッダー検出・型変換・複数シート・API/DBへの直接POSTまで。
#excel #xlsx #json #data #integration -
· unvell teamブラウザでXLSXをJSONに変換 — サーバー不要・アップロード不要
.xlsx ファイルを完全にクライアント側でJSONに変換。往復用のロスレスなReoGrid JSONか、アプリ向けの素のデータ行か。実用的なコードつき、ファイルはブラウザから出ません。
#excel #xlsx #json #javascript #import -
· unvell teamJavaScriptスプレッドシートで作る「信号機ダッシュボード」 ― 条件付き書式を実例で
在庫が少なければ赤、売上が目標超なら緑、キャンセル行は自動でフラグ ― セルを値に応じて色分けする処理を、スタイルのループを一切書かずに。ReoGrid Web の3種類の条件付き書式ルールを、値の変化に連動して再評価される在庫ダッシュボードの実コードで解説します。
#conditional-formatting #spreadsheet #dashboard #cell-styles #javascript #ui -
· unvell teamクロスシート数式で多拠点の売上サマリーを作る
ReoGrid Web 1.3 のマルチシート実践チュートリアル。3つの拠点シートを作り、すべてをクロスシート数式（='Tokyo'!E6 や =SUM(Osaka!B2:B5)）だけで集計するサマリーシートを構築します。どの拠点の数値を編集しても、サマリーがシートをまたいで再計算されます。
#tutorial #multi-sheet #formula #workbook #spreadsheet -
· unvell teamReoGrid Web v1.3 を発表 — マルチシートワークブックとクロスシート数式
ReoGrid Web v1.3 はグリッドを N 枚のワークシートからなるワークブックに進化させます — 標準のシートタブバー、シートごとの Undo、ワークブック全体の xlsx/JSON 入出力、そして =Sheet1!A1 のようなクロスシート数式参照。公開 API に破壊的変更はありません。
#release #v1.3 #multi-sheet #workbook #spreadsheet -
· unvell teamチェックボックス・ドロップダウン・進捗バー ― セルタイプで「動く勤怠管理表」をWebに作る
Excel業務シートの☑チェックや選択リストを、HTMLフォームで作り直さずWebへ。ReoGrid Web の組み込みセルタイプ8種（checkbox・dropdown・progress・rating・sparkline 等）で勤怠管理表を組み立てる実装ガイド。実コード付き。
#cell-types #checkbox #dropdown #spreadsheet #attendance #ui -
· unvell teamブラウザのスプレッドシートで 100 万行 — 100 万行をロードせずに
3週間前、私たちは「100万行はスコープ外」と書きました。考えを変えました。遅延ロード・データソースの紹介です — スクロールバーは 1,000,000 行を表しながら、グリッドが保持するのは実際に見えている数百行だけ。
#performance #big-data #lazy-loading #spreadsheet #javascript -
· unvell team脱・神Excel ― 方眼紙でつくった帳票を、作り直さずWebアプリにする
「神Excel」「方眼紙Excel」でつくった見積書・請求書などの帳票をWeb化する、2つの現実的な方法 ― 既存の .xlsx をそのまま読み込む／コードで組み立てる。結合セル・罫線・円書式・和暦まで、ブラウザだけで。実コード付き。
#excel #xlsx #forms #invoice #spreadsheet #merged-cells -
· unvell teamAngularでReoGridを使う — ラッパー不要のExcelライクなスプレッドシート
ReoGrid Web は React と Vue のラッパーを提供していますが、コアはフレームワーク非依存です。Angular アプリに、編集・数式・xlsx 読み込みを備えたキャンバスベースのスプレッドシートを約30行で組み込む方法を紹介します。
#angular #spreadsheet #data-grid #excel #typescript - · unvell team
JavaScript で Excel ファイルを読み書きする — インポート・エクスポート・JSON
.xlsx ファイルをブラウザに読み込み、グリッドを Excel に書き出し、xlsx と JSON を相互変換する方法 — すべてクライアントサイドで、スタイルと書式を保持したまま。ReoGrid Web の実用コード付き。
#excel #xlsx #import #export #json #javascript -
· unvell teamReoGrid .NET から ReoGrid Web へ — スプレッドシートをブラウザに持ち込む
WinForms や WPF で ReoGrid を使ったことがあるなら、Web 版はすぐ馴染みます。同じ Excel ライクなモデル、同じ xlsx 再現性が、React・Vue・バニラ JS で。何が引き継がれ、何が変わり、どう橋渡しするかを解説します。
#dotnet #winforms #wpf #migration #spreadsheet #web - · unvell team
ReoGrid Web vs Luckysheet vs x-spreadsheet — JavaScript スプレッドシートの選び方
キャンバス/スプレッドシート系の3つの JS ライブラリ — Luckysheet、x-spreadsheet、ReoGrid Web — を、描画方式・xlsx 再現性・メンテナンス・ライセンス・適したプロジェクトの観点で実用的に比較します。
#comparison #luckysheet #x-spreadsheet #spreadsheet #open-source #canvas -
· unvell teamReact で作るオンライン XLSX ビューア — ファイルはブラウザの外に出ない
「xlsx viewer online」で出てくるツールの多くは、あなたのスプレッドシートを自分の管理外のサーバーへアップロードします。ここで紹介するのは、.xlsx を完全にブラウザ内で開く React コンポーネント — 読み取り専用で、スタイル・結合・数式を保持。アップロードもバックエンドもアカウントも不要です。
#xlsx #excel #react #viewer #file-api -
· unvell team編集可能な数式付き Vue 製インボイスを約 60 行で構築する
実用的な Vue 3 製インボイスコンポーネント: 編集可能な数量と単価、数式による行小計の自動計算、SUM、税、合計 — すべてを 1 枚の Canvas バックエンドのスプレッドシートで実現。計算はリアルタイムに更新され、リアクティブな ref が合計値を Vue の UI へミラーします。xlsx エクスポートは 1 回の呼び出しで完結（Pro）。
#vue #tutorial #formula #invoice #spreadsheet -
· unvell teamWeb で Excel ライクな帳票を作る — ブラウザでも Excel の操作感は再現できる
帳票はもう Excel だけではありません。ReoGrid Web を使えば、既存の Excel ファイルをそのままブラウザに読み込んだり、ゼロからコードで構築したり、テンプレートに動的データを流し込んだりと、Web 上で Excel ライクな帳票体験を実現できます。
#tutorial #invoice #spreadsheet #excel #japanese -
· unvell teamReoGrid Web vs AG Grid vs Handsontable — 適切なグリッドの選び方
ReoGrid チームの視点から見た、JavaScript の主要 3 グリッドライブラリの率直な比較。それぞれがどこに向いているか、トレードオフは何か、そしてあなたのプロジェクトに本当に必要なのはどれかを判断するためのガイド。
#comparison #ag-grid #handsontable #spreadsheet #data-grid #react #vue -
· unvell team編集可能な数式付き React 製インボイスを約 60 行で構築する
実用的な React 製インボイスコンポーネント: 編集可能な数量と単価、数式による行小計の自動計算、SUM、税、合計 — すべてを 1 枚の Canvas バックエンドのスプレッドシートで実現。計算はリアルタイムに更新され、ユーザーは xlsx へエクスポート（Pro）できます。
#react #tutorial #formula #invoice #spreadsheet - · unvell team
ブラウザで本物の Excel ファイルをインポートする — アップロードもサーバーも不要
.xlsx ファイルを Web ページにドラッグし、セルのスタイル・結合・罫線・ウィンドウ枠固定・数式を保ったままスプレッドシート UI で描画する。バックエンドも SheetJS も進捗モーダルも不要 — 44 万セルのファイルを 3.7 秒でロードします。
#xlsx #excel #react #vue #file-api #performance - · unvell team
ブラウザで 10,000 行を描画する — ReoGrid Web が 60fps を維持する仕組み
Canvas ベースのスプレッドシートには DOM のボトルネックはありませんが、2D コンテキスト側で千の小さな出血が起きえます。本記事では、ReoGrid Web が行ごとの React 再調整も特殊な仮想化テクニックもなしに、10,000 行の密なシートをジャンクなく描画する方法を解説します。
#performance #canvas #react #vue #spreadsheet -
· unvell teamReoGrid Web v1.2 を発表 — React／Vue 向けの Excel グレードスプレッドシート
ReoGrid Web v1.2 には 109 個の組み込み数式、Excel スタイルの色分け参照編集、オートフィルハンドル、スクロール 1 フレームあたりの Canvas 呼び出し数を約 70% 削減した描画エンジンが含まれます。React／Vue 用ラッパー付きで約 100KB（min+gzip）の単一パッケージです。
#release #v1.2 #react #vue #spreadsheet