【要約】友人の会社の「既存の勤怠アプリが高すぎる」問題を、Firebase + Reactの完全無料なWebアプリを作って解決した話 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
従業員数10名程度の小規模な会社が、既存の勤怠管理SaaSの月額費用が高すぎるというコスト課題に直面した。解決にあたっては、以下の技術的・運用的制約が存在した。
- ・少人数の組織に対して、既存SaaSの契約コストが割高である。
- ・ネイティブアプリ開発では、ストア登録料などの維持費が発生する。
- ・提出先が指定する、複雑なExcelフォーマットでの出力が必須要件である。
// Approach
ランニングコストをゼロにするため、Firebaseの無料枠を活用したWebアプリ構成を採用した。開発効率と要件充足のために、以下の手法を講じた。
- ・React, Vite, shadcn/uiを用いて、高速なフロントエンド開発を実施。
- ・Figma AIを活用し、デザインから実装までの工数を大幅に削減。
- ・exceljsを用い、セル結合やシート分割を含む複雑なExcel出力機能を実装。
- ・Firestore Security Rulesにより、管理者と従業員の権限分離を徹底。
// Result
開発期間約1ヶ月で、サーバー代を完全に無料とした勤怠管理システムを構築した。小規模な現場のニーズに対し、以下の成果を得ている。
- ・Firebase Sparkプランの活用により、運用コストをゼロに抑えた。
- ・MVP開発により、直行直帰やGPS記録などの機能拡張を段階的に実現。
- ・開発環境（Dev）の分離不足という、運用上の重要な教訓を得た。
Senior Engineer Insight
> 小規模向けのサーバーレス構成として、コストと開発速度のバランスが極めて高い。Firebaseの無料枠を使い切る設計は賢明だが、本事例で露呈した「環境分離の欠如」は、実戦投入時には致命的なリスクとなる。本番環境への直接的な変更を避けるため、初期段階でFirebaseプロジェクトをDev/Prodで分けるべきである。スピード重視のMVP開発であっても、運用の安全性を担保するための最小限のインフラ整備は、コストを惜しむべきではない。