【ITニュース解説】Building a Zero-Server In-Browser Spreadsheet (XLSX/CSV) Editor with WebAssembly & Web Workers

ウェブ上でスプレッドシートファイル、特にMicrosoft ExcelのXLSXやCSVファイルを扱う際、これまで多くのシステムは高価なサーバーインフラに依存してきた。ユーザーが数メガバイトのファイルをHTTPS経由でサーバーにアップロードし、そのサーバー上でメモリを多く消費する「サーバーレスコンテナ」と呼ばれる環境が起動される。そこではLibreOfficeやPythonのPandasといったツールが用いられ、セルのXMLデータを解析し、整形されたテーブルデータがユーザーのブラウザに送り返されていた。このような従来の「クライアント・サーバーアーキテクチャ」は、いくつかの大きな課題を抱えていた。

第一に、「サーバーの計算能力とメモリの枯渇」という問題がある。例えば、10万行の複雑なExcelファイルを処理する際、XMLツリー構造をデータに変換（デシリアライズ）する過程で500MB以上のRAMを容易に消費してしまうことがある。これはサーバーのメモリ不足（OOM: Out Of Memory）によるシステムクラッシュを引き起こし、予測不能なサーバー利用料金の増加にもつながる可能性がある。

第二に、「データプライバシーとコンプライアンスのリスク」である。金融業界のチーム、会計士、企業の設立者などは、機密性の高い顧客リスト、収益モデル、または監査データなどの企業秘密を、第三者のクラウドサーバーにアップロードすることに対して大きなリスクを感じている。これらの情報が外部に流出する可能性や、データの所在に関する規制（コンプライアンス）の問題が懸念される。

第三に、「ネットワーク遅延」である。ファイルをアップロードし、サーバーで変換処理が行われ、その結果がダウンロードされるまで待つ時間は、リアルタイムでの生産性を著しく損なう。特に大容量のファイルやネットワーク環境が不安定な場合、この遅延はさらに顕著になる。

これらのボトルネックを解消するため、UCDREAMSのエンジニアリングチームは「UCDREAMS Sheet Editor」を開発した。これは完全に無料で提供され、ユーザーのブラウザ内で完結するスプレッドシートエディタである。このエディタは、XLSXファイルやCSVファイルの解析、編集、数式の再計算、そしてエクスポートといった全ての処理を、サーバーへのアップロードなしにユーザーのデバイス上で行う。これにより、上記のボトルネックが全て解消される。

この「ゼロサーバー」型のスプレッドシートを実現するためのアーキテクチャは、主に「Web Workers（ウェブワーカー）」、「バイナリバッファストリーミング」、そして「仮想化されたDOMグリッド」という技術に基づいている。

まず、XLSXファイルの構造とブラウザ内での解析について説明する。XLSXファイルは単なる一枚のバイナリデータではなく、実はZIP形式で圧縮されたアーカイブファイルであり、その中には階層構造を持つ複数のXMLファイルが含まれている。例えば、workbook.xmlがブック全体の情報を、sharedStrings.xmlが重複する文字列データを、styles.xmlが書式設定を、そしてsheet1.xmlなどが各シートのセル座標や数式に関する情報をそれぞれ保持している。

この複雑なファイルをブラウザ内で解析する際、ユーザーインターフェース（UI）を制御する「メインスレッド」が処理でブロックされてしまうと、画面が一時的に固まったり、操作への応答が悪くなったりする。これを避けるため、UCDREAMS Sheet Editorでは、ファイル解凍やXMLファイルの解析といった時間のかかる処理を、別のバックグラウンドスレッドで動作する「Web Worker」にオフロードしている。

具体的には、Web Worker内でfflateのようなライブラリを使ってZIPアーカイブをメモリ上で解凍し、その中からsharedStrings.xmlやsheet1.xmlなどの必要なXMLファイルを取り出す。そして、それらのXMLを解析して、文字列データやセルの座標、数式などを抽出する。この処理が完了した後、解析されたデータをメインスレッドに渡す必要があるが、ここでも効率が重視されている。「ゼロコピーArrayBuffer転送（Transferable Objects）」という技術を使うことで、大量のバイナリデータをコピーせずに、メインスレッドとWeb Worker間で所有権を移転できる。これにより、大きなExcelファイルであってもメインスレッドがフリーズすることなく、120ミリ秒以下の短時間で解析が完了する。

次に、スプレッドシートの高速な表示とスクロール（60 FPS）を実現する方法である。例えば、1000行50列のスプレッドシートは、合計50,000個ものセルを持つことになる。もしこれら全てのセルをHTMLの<td>要素として描画すると、ブラウザの「DOM（Document Object Model）」ツリーが膨大な数のノードで過負荷となり、パフォーマンスが著しく低下してしまう。これは「Google Interaction to Next Paint（INP）」のようなユーザー体験指標にも悪影響を与え、スクロールがカクカクするといった問題が生じる。

この問題を解決するために採用されているのが、「DOM仮想化（Bidirectional Windowing）」という技術である。これは、画面に現在表示されている部分（「ビューポート」と呼ばれる）のセルだけを実際に描画するというアプローチである。例えば、一度に表示されるのが40行15列だとすれば、同時に描画されるDOMノードは約600個に制限される。ユーザーが上下左右にスクロールすると、表示領域に合わせて必要なセルが動的に計算され、描画される。このとき、セルの位置は軽量なキャンバスレイヤー上でtransform: translate3d(x, y, 0)というCSSプロパティを使って、絶対位置のオフセットが更新される。これにより、ファイルが500行であれ50,000行であれ、常に滑らかな60 FPSのスクロールと即座の応答時間が保証される。

UCDREAMS Sheet Editorは、これらの先進的な技術を組み合わせることで、ユーザーが登録や広告、サーバーへのデータ保存なしに、ExcelやCSVファイルをブラウザ内で直接編集できる環境を無料で提供している。UCDREAMSは他にも、WebRTCを用いた大容量ファイル共有ツール「FileShareOnline」や、クライアントサイドでAIによる背景除去を行う「Remove BG HD」、Web Audioを用いたノイズ除去ツールなど、様々な無料のクライアントサイドユーティリティを公開しており、高性能なウェブアプリケーション開発の専門知識を持っている。彼らの提供するソリューションは、サーバー依存の課題を克服し、ユーザーデバイス上での高速かつセキュアな処理を実現する、現代のウェブアプリケーション開発における一つの方向性を示していると言える。