# プロジェクト内容
**Excelで記入している安全衛生日誌をWeb化**
安全衛生日誌とは安全衛生打ち合わせなどを通じ、各協力会社の安全衛生責任者を集め翌日の作業内容の安全対策を記録し、統括安全衛生責任者が指示事項・確認事項を記載する書類のこと
引用: [https://greenfile.work/articles/2554](https://greenfile.work/articles/2554)
安全衛生日誌の例: [http://annzenshorui.com/entry15.html](http://annzenshorui.com/entry15.html)
# チーム構成
- プロジェクトオーナー: 1名
- 開発リーダー: 1名
- 開発メンバー: 6名(日本: 4, インドネシア: 2),
- インドネシアチームマネージャー: 1名
# 役割
- 開発リーダー
- フロントエンドの開発
- バックエンドの開発
- ライブラリ選定
- タスクの割り当て
- RDBのデータベース設計
- 全てのコードのコードレビュー
# 使用技術
## フロントエンド
- 言語：TypeScript
- ライブラリ/FW：Next.js 13.0.6, ,Mantine, Jotai, SWR, Zod
- Static Test：ESLint, Prettier
## バックエンド
- 言語：TypeScript
- ライブラリ/FW：Express, Swagger, Prisma, Mongoose
- Static Test：ESLint, Prettier
## インフラ
- FE: AWS Amplify
- BE: AWS ECS
## その他
- OS：Mac
- バージョン管理：Git
- タスク管理：Jira
- DB：MySQL(Amazon Aurora), MongoDB
- IDE：Visual Studio Code
# 業務内容
## フロントエンド
- 環境構築
- 入力フォーム：4画面
- フロントエンド、バックエンドの連携(useSWR, Axios)：9画面
## バックエンド
- 環境構築
- APIの実装
## インフラ
- AWS ECSの構築はインフラエンジニアに担当してもらったが、Lambdaにある既存のExpressアプリをECSに移行する作業は一緒に行った。
# 技術選定
## 言語
以下の点からフロントエンド、バックエンド共にTypeScript を採用することになった。
- 大人数での開発を見越して、型がついていること。
- 開発メンバー全員がJavaScriptでの開発経験があるため学習コストが低いこと。
## フロントエンド
以下3点からNext.jsを採用した。
- 日本チーム、インドネシアチームどちらもReact.jsを使ったプロジェクトの経験があるため。
- ファイルベースルーティングを使用してルーティングを簡単にしたかった。
- 工事を行う場所の通信環境が悪い場合も想定してSSRを簡単に実装できるようにしたかった。
- アーキテクチャー設計: bulletproof-reactを参考にした。
- 参考: [https://zenn.dev/t_keshi/articles/bulletproof-react-2022](https://zenn.dev/t_keshi/articles/bulletproof-react-2022)
## バックエンド
- 他のプロジェクトでも使用しているためExpressを採用した。
- アーキテクチャー設計: MVCを採用。
- ModelはRDBの場合は存在しないが、MongoDBの場合は存在する。
- Viewに関してはNext.js側で作成するため返すのはJSON形式のレスポンスのみ。
## インフラ
- 最初はAWS Lambdaを使用していたが以下の点からAWS ECSに切り替えた。
- 既にデプロイパッケージの容量が100MBを超えていたため、今後Lambdaの250MB制限によってライブラリの導入・選定に制約がかかる恐れがあった。
- Prismaを採用していることからRDBのテーブルが増えれば増えるほどデプロイパッケージが大きくなりLambdaの250MB制限に引っかかってしまう可能性があった。
[https://support.serverworks.co.jp/hc/ja/articles/6723055818393-Lambdaのデプロイパッケージの制限-解凍後サイズ-250MB-を回避する方法について教えてください](https://support.serverworks.co.jp/hc/ja/articles/6723055818393-Lambda%E3%81%AE%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%81%AE%E5%88%B6%E9%99%90-%E8%A7%A3%E5%87%8D%E5%BE%8C%E3%82%B5%E3%82%A4%E3%82%BA-250MB-%E3%82%92%E5%9B%9E%E9%81%BF%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E6%95%99%E3%81%88%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84)
# 取り組んだ課題と成果
- ExcelのWeb化にあたり入力フォームを分割して作成するとExcelのどの部分を入力しているのか分かりづらいという課題があった。そのためExcelのシートを入力フォームごとに色をつけて丸ごと表示するようにして、色ごとに遷移する入力フォームを変える提案をしたところ、先方から分かりやすいと好評だった。
- Excelのエクスポートに必要なデータが全て入力できるように、デザイナーと一緒に各入力フォームのデザインを考えた。その結果Excelのエクスポート機能に関して過不足なくデータを出力できた。
- チームメンバーが多いためコードレビューに時間がかかってしまうことが懸念された。ESlintの設定ファイルを作成することによって、コードに一貫性が出てコードレビューの時間を短縮することができた。