No.23
高齢者向け宅配弁当の検索・資料請求サービスのリニューアル開発・保守
- 期間
- 2021/1/4~2025/09/30 - (4年9ヶ月)
- クライアント
- 高齢社会向けSaaS提供企業 (東証プライム市場上場)
- 所属
- フリーランス 株式会社CHIYUU
全般
- プロジェクト名
- 高齢者向け宅配弁当の検索・資料請求サービスのリニューアル開発
- プロジェクト概要
- 非エンジニアのPMがFigmaでシステムの全体的なデザインを作成し、そこからアーキテクチャやテーブルなどの設計、開発、テストを作成。 エンジニア3名で1年以上かかった規模のプロダクト。プロダクトリリース後、他エンジニア離脱により、メインのエンジニアとして保守担当。
- クライアント
- 高齢社会向けSaaS提供企業(東証プライム市場上場)
- 所属
- フリーランス
- 期間
- 2021/1/4~現在(3年4ヶ月)
- チーム人数
- 4人
- 担当工程
- 要件定義 基本設計 詳細設計 実装 単体テスト 結合テスト 保守・運用
技術スタック
- 開発手法
- アジャイル開発(スクラム) ペアプログラミング
- アーキテクチャ
- MVC MVVM
FWの特性を活かしつつ、SOLID原則に則った疎結合・高凝集なクラス設計とし、単体テストをしやすくした
- Frontend
- HTML5/CSS3 JavaScript Vue.js TypeScript
- Backend
- Ruby Ruby on Rails
- Infra
- Docker Docker Compose AWS
- Middleware
- Nginx MySQL Redis
- DevOps
- GitHub Actions Sentry
- gem
- seed-fu cancancan rolify ransack cocoon paper_trail draper active_model_serializers aws-sdk kintone enumerize exception_notification rspec webpacker slim-rails
- npm
- cocoon popper.js PostCSS Prettier ESlint Stylelint webpacker axios autosize jquery floating-vue tiny-slider typescript vue vee-validate
- Other
- Webpack esbuild
やったこと
- 機能開発
- 非エンジニアによる画面構成図をもとに詳細設計、DB設計から新規開発、改修、テスト作成までおこなう。
- デザインをもとにサイト全体のHTMLコーディング
- 命名はBEMを採用。コンポーネントごと指向にて管理しやすい構成とした。
- パフォーマンス・チューニング
- - 実行計画を測定し適切なindexを貼ったりクエリをチューニングし対応。 - 重い処理によるメモリリーク改善
- E2Eテスト導入
- E2Eテストがなかったため導入。なるべく処理を適度なレイヤーで分け、責務ごとに疎結合にして処理ごとにユニットテストをかき、E2Eテストのボリュームを最低限にして導入。
- Github Actions整備
- Circle CIからGithub Actionsへの移行
- Vueリファクタリング
- 巨大SFCをComposition APIで責務ごとに処理を分割し、見通しよくした。
- Railsアップデート6->7
- 他のGemも更新しないといけなく、Gem更新によるデグレを防ぐためのテストを書いて対応した。
- フロントエンド環境整備
- - gemでjsを使用できるようにしていたが、esbuildやpropshaft、jsbundling-railsなどを導入し、nodeパッケージを使用するようにした。 - browserslistを参考にベンダープレフィックス付与やトランスパイルなどを行うようにも設定。
- Linter導入
- - フロントのrepoにlinterがなかったためESlintやPrettierなど導入。 - システム完了後に導入したためデグレ防止など大変だった。
- 保守業務
- - sentryアラートで検出したバグ修正や、SQLチューニングなどのパフォーマンス改善、改修依頼の要望に応じて対応。 - Docker環境の設計、構築 - GitHub ActionsでのCI/CD構築、修正 - コードレビュー及び品質チェック