VBAカレンダーアプリのWeb化（総合実習）

1. プロジェクトの背景と目的

職業訓練校（ITスペシャリスト養成科）で制作した「Excel VBAによるカレンダーアプリ」は、デスクトップ環境で手軽に動作する反面、以下の課題を抱えていました：

• マルチデバイス非対応: スマートフォンやタブレットからの閲覧・入力ができない。
• データ共有の制約: ファイル単位での管理となり、複数人によるリアルタイム更新が難しい。
• UI/UXの限界: シート操作に依存するため、現代的なWebインターフェースに比べ操作感に制限がある。

これらの課題を解決し、「現場の業務効率化ツールをモダンWeb技術で再構築・進化させる」 ことを目的に、本総合実習プロジェクトを立ち上げました。

2. システムアーキテクチャ・技術選定

graph LR
    subgraph Client
        Browser["モダンブラウザ (PC / Mobile)"]
        UI["React + TypeScript (カレンダーUI)"]
    end
    subgraph Logic
        State["状態管理・日付計算ロジック"]
        Algo["祝日判定 O(1) ハッシュテーブル"]
    end
    subgraph Data
        Storage["永続化ストレージ (API / LocalStorage)"]
    end
    Browser --> UI
    UI --> State
    State --> Algo
    State --> Storage

• フロントエンド: TypeScript, React, Tailwind CSS
• アーキテクチャ選定理由:
  • 日付計算やイベント管理における「状態管理（State）」を整理して扱うため、型安全な TypeScript とコンポーネント指向の React を採用。
  • Javaの学習を通じて得たオブジェクト指向やクラス設計の考え方を、TypeScriptのデータモデル設計（EventModel, DateUtil等）の整理に活かしました。

3. 工夫した点と課題解決

① 祝日判定と月切替の高速アルゴリズム

VBAではセル参照で処理していた祝日マスタ照合を、クライアント側でSet（ハッシュテーブル）を用いて $O(1)$ の探索時間で判定するアルゴリズムへと最適化しました。

② レスポンシブなグリッドレイアウト

PC画面での月表示（7x5グリッド）から、スマートフォンでの縦スクロール週・アジェンダ表示へとシームレスに切り替わるCSS Grid設計を行いました。

4. 今後の展望

• ユーザー認証機能（OAuth）の導入
• バックエンドDB（Cloudflare D1 / Supabase等）との同期機能追加