「ナースではたらこ」の開発・運用
【サービス概要】 「ナースではたらこ」は、ディップ株式会社が運営する看護師人材紹介サービスです。 専任のキャリア・アドバイザーが求職者ひとりひとりの希望に合った求人情報を紹介し、転職を支援するサービスとなっております。 【プロジェクト概要】 「ナースではたらこ」における求職者情報登録フォームのフロントエンド開発・運用・保守 【メンバー】 開発チーム 9名 企画チーム 3名 【技術】 TypeScript, React, Next.js, Storybook NestJS, Strapi, Jest AWS, Terraform 【経験した業務内容】 開発チームの実装メンバーとして、フロントエンド・バックエンドの開発をそれぞれ経験しました。 # フロントエンド開発 ・react-hook-formを利用したフォーム開発 ・Headless CMS (strapi)を活用した動的なUI開発 ・Zod Resolverを利用したバリデーションの実装 ・UIコンポーネントの新規開発 ・遅延レンダリングの採用など、パフォーマンス改善 ・ディレクトリ構成の見直し、処理の書き換えなどといったリファクタリング ・Jestによるテストケースの作成 ・Storybookの運用 ・Strapi (Headless CMSとの連携部分の開発 # バックエンド開発 ・TypeScript, NestJSによる新規APIの開発 ・Strapi (Headless CMS)のプラグイン / APIの開発・改修 ・Jestによるテストケースの作成 ・APIを動作させるためのAWSリソース(ECS, ALB, DynamoDB)作成 # DevOps ・ GitHub Actionsでのテスト自動化 ・Visual Regression Testの導入 ・Terraformでのコーディング・ディレクトリ設計 # モニタリング(New Relic) ・New Relic APM, Browser Agentの導入 ・ダッシュボード作成・運用 ・Core Web Vitalsの計測・改善活動 【実績・取り組み】 ① 新規開発 新規のUI・仕様の求職者情報登録フォームを一人で自走して開発・企画チームとの認識の擦り合わせ・リリースまで行いました。 企画チームと密にコミュニケーションを取りながら不具合を修正しつつ、要求通りの成果物を締切通りに完成させました。 ② Strapi (Headless CMS) との連携部分の開発・運用・保守 StrapiというHeadlessCMSで運用しているAPIの内容から、レンダリングするコンポーネントの種類・順序を動的に決定する仕組みの実装・運用・保守を行いました。 ③ 新規APIの開発 NestJSを用いた新規APIの開発を行いました。Service, Controller, Moduleの作成から、テストコードの記述、AWSによるリソース構築(ECS, ALB, DynamoDB, CloudWatch), Terraformによるコーディングまで担当しました。 ④ Visual Regression Testの導入 手動で行なっていたUIコンポーネントの差分確認を自動化するため、使用ツールの選定・インフラ設計・導入計画までを担当しました。 ツールとしてPlaywright, reg-suit, インフラとしてはAWS CodeBuild, S3, CloudFrontを採用しました。 導入した結果、リファクタリング時にUIの差分確認にかかる時間を10分程度から1分まで削減することができました。 また、リファクタリングを行う心理的障壁を下げることもでき、リファクタリング関連のPR作成数を月あたり0 -> 2まで増やすことができました。 ⑤ New Relicの導入・活用推進 アプリケーションのパフォーマンス可視化などといったSRE活動を推進するため、New Relicの導入を行いました。 アプリケーションモニタリングやNew Relicに関する知見が少ない中、チームの先輩や他のチームのテックリードの方などからノウハウを共有してもらいながら、手探りで導入・活用推進を行ってきました。 その結果、「サイト表示のパフォーマンス(Web Vitals)やリクエストの可用性・レイテンシなどを可視化した上で、メトリクスを元にチームでアクションを定期的に取る」といった活用体制の基盤を形成することができました。