「VanillaTask」構築記録 - 外部通信ゼロ・社内共有CSVをそのままDBにするBYOSタスク管理ツールの開発

プロジェクト概要

VanillaTask（バニラタスク）は、共有ファイルサーバ上の tasks.csv を疑似データベースとして直接読み書きする、完全クライアントサイド動作のBYOS（Bring Your Own Storage）型タスク管理Webアプリケーションです。

クラウドサーバー・外部DB・SaaSアカウント登録・外部通信を一切必要とせず、Windows標準機能とブラウザ標準機能（File System Access API）のみで完結。ドラッグ＆ドロップによるカンバンボード、柔軟なフィルタ・ソート、排他制御・自動バックアップを備え、Excel管理のストレスを解消します。

制作背景

SIerや受託開発、客先常駐（金融・公共・医療など）の現場では、以下のような厳しいセキュリティ・環境制約が存在します。

1. 外部SaaSの利用禁止: 顧客貸与PCや顧客ドメインのアカウントで、Notion、Trello、Jira、Backlog等の外部クラウドにサインアップすることが規程・監査上禁止されている。
2. アカウント発行のハードル: 新しいツールを導入するたびに顧客の申請フローやセキュリティ審査が必要となり、チーム単位での気軽なツール導入が極めて困難。
3. 共有Excel管理の破綻: 「誰かが開いていて読み取り専用になる」「誤操作で行がズレる」「先祖返りする」「カンバン操作ができない」といった日々のストレス。

その一方で、「プロジェクトメンバー向けに割り当てられた共有ファイルサーバ（NAS・共有フォルダ）」 には、日常的な作業用として全員に読み書き権限が付与されています。

そこで、「共有フォルダにCSVを1つ置くだけで、ブラウザからモダンなカンバンUIで直接編集できるツールがあれば、セキュリティ規程を100%遵守しながらExcelのストレスを根絶できるのではないか」と考え、開発をスタートしました。

技術スタック

フロントエンド

• フレームワーク: React 19
• ビルドツール: Vite 8
• 言語: JavaScript (ESModules)
• スタイリング: Vanilla CSS（CSSカスタムプロパティによるデザインシステム、Tailwind不使用）
• アイコン: Lucide React
• CSVパーサー: PapaParse（RFC 4180準拠、BOM対応、ヘッダーマッピング）
• ファイルアクセス: File System Access API（Chromium標準）

ローカル配信・ランタイム

• ローカルWebサーバー: Windows標準 PowerShell (System.Net.HttpListener)
• 起動ランタイム: 起動.bat（ダブルクリックでポート自動探索・ブラウザ自動起動）
• 外部依存: Node.jsやPythonのインストールすら不要（配布先クライアントPCはWindows標準機能のみで動作）

インフラ・運用

• 外部通信: 0バイト（完全オフライン・閉域網動作可能）
• 運用コスト: ¥0
• データベース: 共有フォルダ上の tasks.csv（バージョン番号ヘッダーによる楽観的排他制御）
• 同時編集保護: .tasks.lock（ファイルロック＆60秒ゴーストロック自動回収）

開発方法

AI（ペアプログラミング）を活用したAI駆動開発を採用しました。 大まかな開発プロセスは以下の通りです。

1. プロトタイプ検証: HTML/JS単一ファイルでFile System Access APIによるCSV読み書きのフィジビリティスタディ
2. 要件定義・設計書作成: コンセプト詳細、アーキテクチャ、機能仕様書、デザイン仕様書、境界値データセットのドキュメント化
3. 本番アプリケーション構築: Vite + React 19への刷新、Vanilla CSSによるプレミアムなUIコンポーネント実装
4. CRUD・永続化・排他制御の実装: 自動フェッチ、楽観的排他制御、ファイルロック、自動バックアップ機構の組み込み
5. テスト自動化 & 堅牢化: Node.js標準テストランナーによる境界値（21件）、異常系（13件）、サーバーセキュリティ（4件）の全38テスト実装

詰まったポイントと解決策

1. WindowsバッチとPowerShellの文字コード・改行エスケープ問題

• 問題: 配布用ワンクリック起動バッチ（起動.bat）を実行した際、日本語部分がShift-JIS/UTF-8の相違で文字化けし、さらにバッチ内の行継続キャレット（^）がPowerShell側で解釈エラー（The term '^' is not recognized...）を引き起こして起動に失敗。
• 解決策: 起動.bat のテキストをすべて英語ASCIIコードのみで書き直し文字コード問題を恒久的に排除。さらにPowerShellコマンドの渡し方を & { ... } のインラインスクリプトブロック形式へリファクタリングし、環境に依存せず100%安定して起動する構成に修正。

2. File System Access API と file:/// プロトコルの制約

• 問題: 静的HTMLを file:/// プロトコルで直接開くと、ブラウザのセキュリティサンドボックス（Origin制約）によりFile System Access APIが制限されたり、CORS制約でローカルアセットの読み込みが阻害される。
• 解決策: クライアントPCにNode.jsやPythonをインストールさせない要件を満たすため、Windows標準機能であるPowerShellの System.Net.HttpListener を使った超軽量ローカル静的Webサーバー（server.ps1）を内製。使用可能なポート（8080〜8090）を自動探索してHTTP配信する仕組みを構築。

3. CSVの更新内容が反映されない・リロードで消える同期不整合

• 問題: CSVファイルを空にしても画面にタスクが表示され続けたり、画面から追加したタスクがブラウザリロードで消えてしまう現象が発生。
• 解決策: 調査の結果、ソースコード内に残存していた初期フォールバック用サンプルデータへの依存と、更新時のCSV再取得パイプラインの欠落が原因と判明。モックデータを全廃し、初回マウント時・リロード時・「更新」ボタン押下時に必ずファイルシステム上の実体CSVをパースする単一データフローを確立。CRUD操作時もメモリ上のstate更新と同時にCSVファイルへ即座にフラッシュする永続化処理を徹底。

4. 複数人同時編集における「先祖返り」と上書き破損の防止

• 問題: 共有フォルダ上のCSVを複数人が同時に編集した際、後から保存したユーザーが他のユーザーの更新内容を無自覚に上書き・消失させてしまうリスク（ロストアップデート）。
• 解決策:
  1. 楽観的排他制御: CSVメタデータに version を保持し、読み込み時点より古いバージョンでの保存を検知した場合は「競合エラー」を表示して上書きを阻止。
  2. ファイルロック機構: 書き込み直前に .tasks.lock を生成し、他者の書き込みを一時ブロック。ブラウザクラッシュや放置に備え、60秒経過したロックは自動破棄（ゴーストロック回収）する仕組みを実装。
  3. 自動バックアップ: 保存成功時に直前のCSVを backup/tasks_YYYYMMDD_HHmmss.csv に自動退避する多重防御を構築。

5. 破損CSVへの耐性と自動テスト実行時の警告ノイズ

• 問題: ユーザーがExcel等で手動編集した際に「列数が足りない行」「余分なカンマがある行」が混入するとパースが破綻する懸念。また、その耐性テスト時にコンソールへ TooFewFields / TooManyFields の警告ログが直接流れ、テスト成功かどうかが分かりづらい。
• 解決策: PapaParseのパース結果に対して厳密なヘッダー検証と安全なフィールドフォールバック処理を実装。テストコード側では警告発生を内部スパイでキャプチャし、「壊れた行でも落ちずに安全に読み込めたこと」と「意図通り警告が検知されたこと」をアサートしつつ、テスト出力をクリーンに保つ設計へ改善。

今後の展望

• マルチシート / 複数CSV対応: プロジェクト別・スプリント別のCSVファイルをタブで瞬時に切り替えられる機能
• ガントチャート / タイムラインビュー: 期日・開始日データを活用した横断的スケジュールの可視化
• Excel（.xlsx）の直接読み書きサポート: CSVだけでなくExcelブック形式の直接オープン・保存
• 差分マージ（3-way merge）: 排他衝突が発生した際に、変更箇所の差分を視覚的にマージできるUI
• オフラインPWA（Progressive Web Apps）化: 完全インストール型Webアプリとしての配布形態の拡充