ブラウザ完結でCSVをExcel変換するツールを実装して分かった、実務上の課題と解決策
バックオフィス業務の現場では、システムからエクスポートしたCSVをExcelで開き直す作業が頻繁に発生します。しかし、標準のExcelでCSVを開くと、以下のような実務上の問題がつきまといます。
- 0落ち：電話番号や商品コードの先頭の「0」が数値とみなされ消えてしまう
- 文字化け：UTF-8とShift-JISの判定ミスで中身が読めない
- 不要な引用符：CSV内のダブルクォーテーションが残ってしまい、加工の手間が増える
✅ 解決策：完全クライアントサイドの変換ツールを自作
これらの課題を解決するため、外部サーバーに一切データを送信せず、ブラウザのメモリ上だけで完結する変換ツールを作成しました。
その際に工夫した技術的なポイントを紹介します。
1. サーバーレス・プライバシーへの配慮
業務データを扱う以上、オンラインのコンバーターにファイルをアップロードするのはセキュリティリスクが伴います。
本ツールでは、SheetJS (xlsx.js) を利用し、すべての処理をクライアントサイドで完結させています。
// FileReaderを使用してバイナリとして読み込む
const arrayBuffer = await new Promise(r => {
const fr = new FileReader();
fr.onload = (e) => r(e.target.result);
fr.readAsArrayBuffer(file);
});
2. 徹底的な「0落ち」対策
Excelの型推論（自動フォーマット）を無効化するため、すべてのセルに対して明示的に文字列型 (s) を指定するロジックを実装しました。
Object.keys(ws).forEach(cellAddr => {
if (cellAddr[0] === '!') return; // メタデータ（!ref等）はスキップ
let cell = ws[cellAddr];
if (cell && cell.v !== undefined) {
// セルの型を 's' (String) に固定
cell.t = 's';
let val = String(cell.v).trim();
// 引用符のクリーニング
if (val.startsWith('"') && val.endsWith('"')) {
val = val.substring(1, val.length - 1);
}
// エスケープされた二重引用符 "" を " に置換
cell.v = val.replace(/""/g, '"');
}
});
3. WordPress (SWELL) 環境でのスタイル干渉対策
自サイト（WordPress）の記事内にツールを埋め込む際、テーマが持つCSSがツールのUIに干渉してしまう問題が発生しました。
#wp-ignore-tool-area {
/* サイトテーマのCSS干渉を一旦リセット */
all: revert;
display: block;
max-width: 650px;
margin: 40px auto;
background: #ffffff;
border-radius: 40px;
padding: 40px;
box-sizing: border-box;
}
4. UI設計のこだわり
バックオフィス業務はマルチタスクが多いため、PCだけでなくスマートフォンでもサッと操作できるレスポンシブ設計にこだわっています。
- ドラッグ＆ドロップ領域を広く確保
- マルチファイル処理：複数のCSVを一度に読み込み、1つのExcelファイルに複数シートでまとめる機能を実装
📝 まとめ
高度なアルゴリズムを使っているわけではありませんが、「現場で本当に困る仕様」をJavaScriptで一つずつ潰していく作業は、非常に実用的なアプローチだと感じています。
こちらで実際に動作を確認できます。 CSV to Excel コンバーター - うしろぽっけ