給与台帳Webアプリ

開発期間:2025年5月~7月末
使用技術:HTML, CSS, JavaScript, Java, MySQL
開発形態:チーム開発(チームリーダー)

概要

本アプリは、学生をターゲットとした給与台帳Webアプリケーションです。 ユーザーはアルバイト終了後に勤務情報を記録するだけで、過去のアルバイト履歴や月ごとの収入、これまでの総収入を数値およびグラフで可視化できます。

これまでの総収入を振り返ることで達成感を得られ、アルバイトに対するモチベーション向上に繋がるのではないかと考え、本アプリを企画しました。

開発担当画面(アカウント新規登録画面)

開発担当画面(アカウント新規登録画面)

開発担当画面(シフト履歴一覧画面)

開発担当画面(シフト履歴一覧画面)

課題解決型実習

本アプリは、大学の講義「課題解決型実習」において、実践的なWebアプリケーション開発として企画・設計・開発・テスト・発表までを一貫して行いました。

私はチームリーダー兼Webアプリケーション開発経験者として、設計書・テスト仕様書の作成および外部企業様とのレビュー対応を担当しました。 また、命名規則や設計方針の整理・共有を行い、開発フェーズではメンバーが実装したプログラムの統合作業や技術的なサポート、エラー対応を行いました。

チーム開発では、ページ単位・機能単位での役割分担を行い、各ページの実装難易度に応じて作業量を調整しました。 特定のメンバーや、経験者である私自身に実装負荷が集中しないよう配慮し、チーム全体で開発を進められる体制を構築しました。

テスト工程においても、各メンバーが自身の担当箇所に責任を持って実装していたため、問題発生時には迅速な共有と即時対応が可能な開発環境となっていました。

授業の最終発表では、産学連携企業様より「ベストシステム賞」を受賞しました。 また、研究室内の相互発表においても「ベストシステム賞」および「ベストプレゼン賞」を受賞しました。

普段は個人開発が中心ですが、本実習を通してチーム開発ならではの難しさと面白さを実感しました。 特に、外部企業の方から実務に近い視点でレビューを受けられたことは、非常に貴重な経験となりました。

設計書

画面設計書

画面設計書(シフト履歴一覧画面)

画面設計書(シフト履歴一覧画面)

画面設計にあたっては、Excelを用いて全画面のレイアウトイメージを作成し、画面ごとに項目定義および機能定義を明確化しました。

単に画面を作成するのではなく、「どの情報を優先的に表示すべきか」「操作回数を最小限に抑えられるか」といった点を意識し、ユーザーが直感的に操作できる配置を検討しました。

データベース設計書(ER図)

ER図

ER図

データベース設計では、ER図を用いてエンティティ間の関係性を整理しました。ER図についてもExcelで作成し、1対Nのリレーションシップを矢印で明示しています。

テスト仕様書

テスト仕様書

テスト仕様書

開発が当初の予定よりも早期に完了したため、動作確認にとどまらず、テスト仕様書を作成してテストを実施しました。

テスト項目には正常系・異常系の確認に加え、入力値チェックや不正操作への対応など、以前に独学で学んだ知識を活かしてセキュリティ面を意識した観点も取り入れました。

発表資料

テスト仕様書

テスト仕様書

発表はポスターセッション形式で行われました。

学内での発表であったため、Webアプリケーション開発の経験がない学生にも内容が伝わるよう、システムの概要や機能を中心に分かりやすく解説する構成で資料を作成しました。

特に、役割を列挙するだけでなく、内容が直感的に伝わるよう簡潔で砕けた説明も心がけました。また、思わず目を引くフリー素材を使用するなど、見入ってもらえるような工夫を行いました。