現場の電卓

建設業の実務で必要になる専門計算を、スマートフォンやPCからすぐに使えるWebアプリケーション。

背景と課題

建設業では電圧降下、風荷重、配管サイズ、土量換算など、工種ごとに異なる専門計算が日常的に発生する。多くの技術者はExcelの自作シートや紙の早見表で対応しているが、現場で使うには不便。既存のアプリは特定の工種に特化しており、横断的に使えるものがなかった。

解決アプローチ

工種横断の計算ツール群

電気（電圧降下・管路占積率・ブレーカー選定など）、構造（風荷重・鉄骨重量）、土木（土量換算・型枠・鉄筋重量）、空調（換気計算・湿り空気線図）、測量（面積換算・座標計算・勾配）、事務（単位換算・工数計算・年号変換）、通信（dBm/W変換）、現場管理（足場概算・WBGT）など、複数カテゴリにわたる計算ツールを収録。継続的に追加中。

オフライン対応

Service Workerによるプリキャッシュで、電波の届かない地下や山間部の現場でも動作。一度アクセスすれば、以降はネットワーク不要。

URL状態同期

計算の入力値をURLクエリパラメータに同期。計算結果をそのままURLで共有でき、同僚への「この条件で計算して」という伝達が簡単になる。

PDF出力

全ツールでPDF帳票を出力可能。計算条件・結果・QRコードを含むA4帳票を生成し、報告書への添付や記録保存に対応。

技術的な意思決定

Next.js Static Export を採用。サーバー不要の完全静的サイトとして配信し、CDNのエッジキャッシュだけで高速に動作。計算ロジックはすべてクライアントサイドで実行するため、サーバーコストがゼロ。

Zustand で状態管理。レイアウト・設定・ユーザーデータ（お気に関心・履歴）をストアで管理し、localStorageに永続化。URLパラメータとの二重同期により、リロードしても入力値が失われない。

Decimal.js を計算エンジンに採用。IEEE 754の浮動小数点誤差が許容できない工学計算で、任意精度演算を実現。

Serwist（Service Worker） でオフライン対応。HTMLやJSチャンクをプリキャッシュし、Google Fontsや静的アセットはランタイムキャッシュで対応。

技術スタック

• フロントエンド: Next.js 16, TypeScript, Tailwind CSS, Zustand
• 計算: Decimal.js
• PDF生成: @react-pdf/renderer
• グラフ: Recharts
• オフライン: Serwist (Service Worker)
• SEO: JSON-LD構造化データ, next-sitemap
• 分析: Google Analytics 4
• 配信: 静的エクスポート (CDN配信)