勤怠管理Webアプリを作った

小規模・中規模組織向けのサーバーレス勤怠管理システムを作ってみた。

Googleアカウント認証を前提。

Firebase（ファイアベース：Googleが提供するWebアプリ開発向けサービス）上で完結する構成。

今回はホスティング先もFirebaseにしてみた。

GitHubでソースコードを公開しています。

https://github.com/tadano-akira/kintai-app

気合い入れたら1日で完成した。

仕様案だけは仕事帰りの電車のなかで、AIと壁打ちして2日（合計2時間）くらいで作成。

細かい詰めや、UI/UXの仕上げはできてないけど、一通り必要最低限な機能はできた。

技術スタック

技術スタックは以下。

項目	技術
フロントエンド	React + TypeScript
UIライブラリ	Material UI（MUI）
認証	Firebase Authentication（ファイアベース・オーセンティケーション：ユーザー認証を行うサービス）／Google Sign-In
データベース	Cloud Firestore（クラウド・ファイアストア：クラウド上にデータを保存するデータベース）
サーバーサイド	Cloud Functions for Firebase（クラウド・ファンクションズ・フォー・ファイアベース：サーバー側の処理を実行するサービス）／Node.js 20
ホスティング	Firebase Hosting（ファイアベース・ホスティング：Webアプリをインターネット上に公開するサービス）
CI/CD	GitHub Actions

ユーザーロール

ユーザーロールは2種類。

ロール	主な機能
staff	出退勤打刻・修正申請・休暇申請・自分の勤怠確認・有給残数確認
admin	全社員勤怠確認・申請承認・CSV出力・月次締め・有給付与管理

一般利用者と管理者で、利用できる機能を分けている。

システム構成

システム全体の構成はこんな感じ。

React + TypeScript
  │
  ├── Firebase Authentication
  │     Google Sign-In
  │
  ├── Cloud Firestore
  │     勤怠データを保存・管理
  │
  ├── Cloud Functions
  │     サーバー側の処理を実行
  │     （asia-northeast1：東京リージョン）
  │
  │     clockIn
  │     clockOut
  │     申請承認
  │     月次締め
  │     CSV出力
  │     など
  │
  └── Firebase Hosting
        Webアプリをインターネット上に公開

Firebaseを使うことで、自分でサーバーを構築・管理せずに、認証、データ保存、サーバー側の処理、Webアプリの公開までまとめて構成できる。

小規模・中規模向けのシステムなら、こういうサーバーレス構成はかなり楽だと思う。