ID:42197さん

# 概要 - 有機野菜認定機関の業務アプリ開発 野菜や食品に有機食品と表記するためには国の認可が必要となります。 有機食品のJAS規格に適合した生産が行われていることを認証機関が検査し、 その結果、認証された事業者のみが有機JASマークを貼ることができます。 その認証機関からの依頼で、社内DX化するため業務アプリケーションの開発をしました。 ### 機能 - 帳票作成機能 申請があった農家様や国に提出するPDFを作成する機能 - 検査員スケジュール管理機能 農家様の有機野菜がJAS規格に適合してるか、実際に畑や田んぼへ行き検査する検査員がいます。 その検査員のスケジュールを管理する機能です - 広報資料送付先管理機能 見込み顧客や既存の農家様へ送付する広報資料があります。 その資料を管理する機能と、宅配業者へ送付するcsv作成機能があります。 # 担当 - プロジェクトマネージャー - フロントエンドエンジニア - バックエンドエンジニア PMとして見積もり作成や予算交渉・開発メンバーへのタスクの割り振りを担当しました。 開発者として要件定義・仕様決め・デザイン・設計・開発を担当しました。 # 使用技術 - Go - APIフレームワーク: echo - ORマッパー: gorm - TypeScript - フレームワーク: Next.js, react-hook-form, yup, react-pdf, SWR, axios等 - Docker - GCP(Cloud Run) - Firebase(Auth) - MySQL - REST API - Github # 課題 以下のような課題点があり、このプロジェクトに至った。 - 現状のエクセルや紙で二重チェックを行う業務フローは非効率な点が多く、抜本的に変えたいと考えたため - 今後顧客が増え業務が忙しくなることが予想されたため - 新たな事務員を募集し、固定費を増やすより業務アプリ導入した方がコストパーフォーマンスがよいと判断したため # 取り組み / 工夫した点 - Userテーブルから、各属性を管理 農家様（農家様テーブル）や、広報資料送付先（送付先テーブル）、検査員（検査員テーブル）等、存在しますが、それぞれ完全に切り分けられてる訳ではなく兼任もありえます。 例えば、検査員が副業で農業をやっている場合は検査員かつ農家様となります。 そのため、検査員テーブルや農業様テーブル等に外部キーuserIDカラムを設定し、同じuserIDとする設計にしました。 userテーブルとuserIDをキーにし外部結合することで、そのuserIDがどう兼任してるかわかるようになります。 - reactのベストプラクティスであるbulletproof-reactをNext.jsに導入 従来は、react atomic designに沿ってコンポーネントのディレクトリ構成を設計していましたが、 切り分けが難しいと考え、また根本的に色々と設計思想を見直す必要があると開発初期段階で感じました。 色々調査した結果、bulletproof-reactが良いと判断し導入しました。 bulletproof-react : https://github.com/alan2207/bulletproof-react - react-dndを導入 検査員のスケジュール管理機能にて、react-dndを導入。 drag and dropはreact-beautiful-dndが1番メジャーで、当初はそれを導入することを検討しましたが、 ライブラリが全くメンテナンスされておらず、今後の保守・改修の点で問題があると判断しreact-dndを導入することに決めました。 検査員のボードをドラッグアンドドロップすると、useStateでドロップ先を検知しサーバーに送信する仕様で実装しました。 - react-pdfでプレビュー機能を実装 画面左側の入力フォームに入力すると、画面右側のプレビューPDF画面にて入力した値が表示される仕様 1文字入力するたびに、PDFが再レンダリングされるため少し重たい処理になっていました。 入力遅延機能を導入し、1文字目入力し数秒か経過し何文字か入力した後にPDFを再レンダリングすることで処理の軽量化を実現しました。