Proftime：授業負担のデジタルな計画と精算

大学における授業負担（デュプタート）の計画や精算は、いまだに紙やメールで行われることが多く、把握しづらく、エラーが起こりやすく、時間もかかります。この学生プロジェクトは、まさにその課題に取り組むものです。Proftime は、講義・授業負担・精算にまつわるプロセスを大学職員向けにデジタル化し、簡素化するWebアプリケーションです。

以下では、React、TanStack、Keycloak などを用いて、モジュール構造を持つスケーラブルなシステムをどのように構築したかを紹介します。

目標：Excel を減らし、見通しを良くする

主な対象は次の 2 つのユーザー層です。

• 教員：授業を計画し、授業負担を提出・精算する
• 学部長室：学部全体の計画、承認、負担軽減を把握・管理する

目標は、複雑な大学業務を簡素化する、直感的でモジュール化され、保守しやすく、安全なシステムを構築することでした。

技術基盤：モダンでモジュール化され、堅牢

本システムは、TypeScript を使った React フロントエンドと、バックエンドの Spring Boot REST API で構成されています。フロントエンドでは、主に次の技術を利用しました。

• TanStack Router & Query – 型安全なルーティングとデータ管理
• Shadcn UI – クリーンでカスタマイズ可能な UI
• React Hook Form + Zod – 型付きでバリデーション済みのフォーム
• i18next – 多言語対応
• Keycloak – 安全なログインとロールベースのアクセス制御

アーキテクチャはモジュール構造で、Docker ベースの開発環境と明確なコンポーネント・スキーマ管理を備えています。

UX と機能：効率的でアクセシブル

使いやすさに重点を置きました。

• サイドバー・ヘッダー・アクションバーを備えた明確な構造の UI
• ロールに応じた画面（教員と学部長室）
• インライン編集ができる再利用可能なテーブル
• バリデーションとアクセシビリティに対応したダイアログ・フォーム
• 最初のコミットからの多言語対応
• 見通しの良い、型付きのデータ構造とフィルタ処理

**RBAC（ロールベースアクセス制御）**により、利用者は自分に関係する情報だけを閲覧でき、明確なアクセス制御を実現しています。

品質とスケーラビリティ

システムはテスト性と拡張性を考慮して設計しました。

• モジュール構造の型付きコンポーネント
• データフローと UI に対する単体テストと統合テスト
• Zod による中央集約型の型・スキーマ定義
• ロジック・構造・スタイルの明確な分離

今後の予定：CI/CD の導入、エンドツーエンドテスト、WCAG に沿ったアクセシビリティの改善。

まとめ

Proftime は、時代遅れのメールベースのシステムを、計画・精算のプロセスをデジタル化し、目に見えて簡素化するアプリケーションに置き換えます。承認ワークフローやエクスポート、自動レポートといった今後の機能に向けた、しっかりとした土台にもなります。

得られた気づき：技術が実際のユーザーのニーズと結びついたとき、本当に役立つソフトウェアが生まれる。

注: Proftime は大学内部のプロジェクトのため、ソースコードやライブ環境は一般公開されていません（内部環境へのアクセス権も現在はありません）。上のスクリーンショットは実際に稼働していたシステムのものです。