「社内の集計作業をデスクトップアプリ化したい」「D3.jsでサンバーストチャートを実装してみたい」「Electronでオフライン動作するデータ管理ツールを作りたい」——そんな要望に応える記事です。本記事では、行・列ラベルを自由に設定して多次元データを入力・集計・可視化できるデータ集計システムの開発手順を、実際に動くデモを交えながら解説します。Electron 27.x + D3.js 7.x + JavaScript ES6+の構成で、Windows・Mac対応のスタンドアローンアプリとして配布できます。
どんな場面で使えるか
製造現場の不良品集計ツールとして、「不良理由×担当者×日付」などの多次元データを現場で入力し、サンバーストチャートで内訳を即座に可視化できます。インターネット接続不要なので工場や倉庫でも使えます。
営業・業務の日報管理ツールとして、行ラベルに「対応種別」、列ラベルに「顧客区分」を設定して担当者ごとの対応件数を集計できます。CSV出力でExcelへの連携もスムーズです。
受託開発案件として、「既存のExcel集計をアプリ化したい」という中小企業の需要は根強く、このサイトのようなデモを見せることで案件獲得につながります。業種を問わず横展開できる汎用性があります。
| 用途 | 行ラベル例 | 列ラベル例 |
|---|---|---|
| 製造現場の品質管理 | 不良理由 | 不良内容・工程 |
| 営業部門の活動記録 | 対応種別 | 顧客区分・担当者 |
| コールセンターの問合せ管理 | 問合せカテゴリ | 対応結果・オペレーター |
実際に動かしてみる（デモ）
以下は実際に動作するWebデモです。タブを切り替えてシステムの4つの画面（概要・設定・入力・集計）を確認できます。実際のElectronアプリではこれがオフラインで動作するデスクトップアプリになります。
データ集計システム
Electron製スタンドアローンアプリケーション
システムデモ
システム概要
本システムはElectronを使ったスタンドアローン型のデータ集計アプリケーションです。行・列のラベルを自由に設定でき、多次元データの入力・集計・可視化を一元管理できます。
- カスタマイズ可能な設定：行・列のラベル名を自由に変更（例：「理由」「不良内容」など）
- 多次元データ対応：担当者・日付・部署などの追加区分を設定し複雑な集計が可能
- リアルタイム集計：フィルター機能で条件を絞り込み、即座に集計結果を表示
- サンバーストチャート：D3.jsによる階層構造の可視化でデータの内訳を直感的に把握
- データ永続化：ローカルJSONファイルで全データを保存、オフライン環境でも動作
- CSV出力：集計結果をCSV形式でエクスポート可能
⚙️ 設定画面の機能
設定画面では、データ収集の枠組みを定義します。ラベルや区分を事前に設定することで、一貫性のあるデータ入力が可能になります。
主な設定項目
- 区分設定：データを分類するための追加軸を定義（担当者、日付、部署など）
- ラベル名称設定：「行」「列」という表現を業務に合わせて変更
- 行ラベル設定：データの縦軸項目を登録
- 列ラベル設定：データの横軸項目を登録
✏️ データ入力画面
設定したラベルを使って実際のデータを登録します。複数のエントリをまとめて登録することで、効率的にデータを蓄積できます。
入力フロー
- 設定した区分（担当者、日付など）を選択
- 行ラベルと列ラベルを選択
- 数値を入力（デフォルト：1）
- 「エントリ追加」ボタンで一時リストに追加
- 必要なデータをすべて追加したら「記録保存」でデータベースに保存
📈 集計分析画面
蓄積したデータを多角的に分析します。フィルター機能で条件を絞り込み、必要な視点でデータを可視化できます。
可視化機能
- サマリー統計：データ件数・合計値・平均値をカード形式で表示
- サンバーストチャート：D3.jsによる階層構造の円形グラフ
- 詳細テーブル：フィルタリングされたデータを一覧表示
- CSV出力：集計結果をCSVファイルとしてエクスポート
✨ システムの特徴
柔軟なカスタマイズ
行・列のラベル名を自由に設定可能。業務に合わせた命名で直感的な運用を実現します。
多次元データ対応
担当者・日付・部署などの区分を追加設定。複雑なデータ構造にも対応し多角的な分析が可能です。
スタンドアローン動作
Electronベースでネット接続不要。ローカルJSONファイルでデータ保存し、オフライン環境でも安全に運用できます。
サンバースト可視化
D3.jsによる階層型円形グラフで、データの内訳を一目で把握。インタラクティブな操作で詳細情報を表示します。
高度なフィルタリング
複数条件を組み合わせたフィルタリング。必要なデータだけを抽出しリアルタイムで集計結果を表示します。
データ編集・履歴管理
過去のレコードを編集・削除可能。履歴検索機能で特定のデータを素早く見つけられます。
サンバーストチャートとは
サンバーストチャートとはD3.jsで実装できる階層構造の円形グラフです。中心に親カテゴリ、外側に子カテゴリを放射状に配置することで、データの内訳を一目で把握できます。たとえば「不良件数」を中心に、外側に「不良理由別」、さらに外側に「担当者別」と階層化することで、「誰がどの理由で何件不良を起こしたか」が視覚的にわかります。
開発手順（5ステップ）
STEP 1：開発環境のセットアップ
Node.js（v18以上）とVS Codeをインストールしてプロジェクトを初期化します。
mkdir data-collection-system && cd data-collection-system && npm init -y
続いてElectronとelectron-builderをインストールします。
npm install electron --save-dev && npm install electron-builder --save-dev
D3.jsはCDNから読み込むか npm install d3 でローカルインストールします。package.jsonのmainフィールドに"main.js"を指定し、scriptsに"start": "electron ."と"build": "electron-builder"を追加します。
STEP 2：Electronメインプロセスの実装
main.jsでBrowserWindowを作成してindex.htmlを読み込みます。ウィンドウサイズ（幅1400×高さ900推奨）・タイトル・アイコンを設定します。ファイルの読み書きはNode.jsのfsモジュールをメインプロセスで処理し、ipcMainでレンダラープロセスとやり取りします。macOS対応のライフサイクル管理（window-all-closed・activateイベント）も実装します。本番環境ではcontextBridgeを使った安全なIPC通信を採用してください。
STEP 3：フロントエンドの実装
UIはタブ切り替え構成（概要・設定・入力・集計の4タブ）で実装します。設定画面では行ラベル・列ラベル・区分（担当者・日付など）をフォームで登録できるようにします。入力画面では選択式フォームで素早く数値を入力できる設計にします。ipcRendererでメインプロセスのファイル読み書き機能を呼び出し、データを永続化します。CSSはflexbox・grid・clamp()でモバイル対応させます。
STEP 4：D3.jsでサンバーストチャートを実装
D3.jsのpartitionレイアウトとarcジェネレーターを使ってサンバーストチャートを描画します。入力データを階層構造（d3.hierarchy()）に変換し、各セクターの面積がデータの値に比例するよう設定します。マウスオーバーでツールチップを表示し、クリックでドリルダウンできるインタラクティブ設計にすると完成度が上がります。チャートはSVGで描画するためウィンドウリサイズ時のviewBox調整も実装します。
STEP 5：データ永続化とビルド
データはJSONファイルでローカル保存します。app.getPath('userData')でOSごとの適切な保存先（Windows: AppData、Mac: Application Support）を取得します。設定データ・入力データそれぞれを別ファイルで管理し、起動時に読み込みます。ビルドはelectron-builderでWindows（.exe installer）・macOS（.dmg）向けにそれぞれ生成できます。npm run buildの1コマンドで両プラットフォーム向けの配布ファイルを作成できます。
拡張機能のアイデア
MVPが完成したら以下の機能追加で価値を高められます。クラウド同期（複数端末でのデータ共有）、折れ線グラフ・棒グラフなど多様なチャートタイプの追加、閾値超過時の通知機能、集計結果のPDF・Excelレポート自動生成、ロールベースのユーザー権限管理、大規模データ対応のためのSQLite連携などです。
開発コストの目安
Electron + D3.js + JavaScript ES6+の構成なら、基本機能を備えたMVPを10万円程度から開発できます。サーバー不要・月額費用なしで運用できるのがデスクトップアプリの強みです。
| フェーズ | 内容 | 費用目安 |
|---|---|---|
| フェーズ1（MVP） | ラベル設定・データ入力・集計・CSV出力 | 10万〜20万円 |
| フェーズ2（可視化強化） | サンバーストチャート・複数グラフ・フィルター | 10万〜20万円 |
| フェーズ3（機能拡張） | PDF出力・クラウド同期・権限管理 | 10万〜30万円 |
| Apple Developer登録 | macOS配布に必要（年額） | 年13,000円 |
| Windowsコード署名 | インストール警告を防ぐ（年額） | 年2万〜5万円 |
| 保守運用 | OS更新対応・機能追加（年額） | 年10万〜30万円 |
よくある質問
ElectronとTauriどちらがおすすめですか？
学習コストと開発速度ならElectronが有利です。Node.jsとWeb技術の知識で開発でき、npmのエコシステムをフル活用できます。アプリサイズを小さくしたい（Electronは100MB超、TauriはRustベースで数MB程度）・パフォーマンス重視という場合はTauriを検討してください。ただしTauriはRustの知識が必要で学習コストが上がります。
JSONファイル保存の限界はありますか？
数万件程度のデータまでは問題ありません。それ以上になると読み書きが遅くなるため、SQLite（better-sqlite3パッケージ）への移行を検討します。ElectronとSQLiteの相性は良く、移行コストも比較的低いです。
Windows・Mac両対応のビルドは1台のPCでできますか？
Windows向け（.exe）はWindowsマシンで、macOS向け（.dmg）はMacでビルドするのが基本です。electron-builderのクロスコンパイル機能でWindowsからMac向けビルドを試みることもできますが、完全な動作保証はできません。GitHub ActionsなどのCI/CDを使うと両プラットフォーム向けを自動ビルドできます。
まとめ
Electron + D3.js + JavaScriptの構成でデータ集計システムをMVP10万円程度から開発できます。サーバー不要でオフライン動作・ローカル保存という特性は、工場・倉庫・セキュリティ要件が厳しい現場での利用に適しています。デモで確認した通り、タブ切り替えUI・サンバーストチャート・CSV出力を組み合わせることで業務システムとして十分な完成度になります。
開発のご相談や見積もりはお気軽にお問い合わせください。要件定義からリリースまで一貫してサポートします。