フロントエンド専任がいないチームのNext.js移行と、その後/Renewal to Next.js for a team without a dedicated front-end developer, and what happened next

フロントエンドでの技術選定 —— 「みんなで」語り尽くそう！https://codmon.connpass.com/event/379236/

Transcript

1. 1 © SMS Co., Ltd. 株式会社エス・エム・エス 藤井 直人 フロントエンド専任がいないチームの Next.js移行と、その後
2. 2 © SMS Co., Ltd. 自己紹介 名前 藤井 直人 所属 株式会社エス・エム・エス プロダクト 　　　　　　　　　　　　　　　　　 　　　　　　　　　　　　　　　　という看護師向け人材紹介サービス 主な特徴 • SEO対策サイト • 求人情報の閲覧 • 求職者と求人情報のマッチング
3. 3 © SMS Co., Ltd. ナース専科転職のフロントエンドについて
4. 4 © SMS Co., Ltd. ナース専科転職のフロントエンドについて ナース専科転職は2024/8にフロントエンドの一部（主にSEO領域）を Laravel Blade→Next.jsに移行しました 使用技術 • Next.js（SSR・RSC） • React • TypeScript • GraphQL（Apollo Client） • Tailwind CSS
5. 5 © SMS Co., Ltd. ナース専科転職のフロントエンドについて 私はNext.js移行PJに途中で参画したのですが、 • Next.js運用経験者不在 • フロントエンド専任エンジニア不在（ほぼ全員バックエンドの方が得意） というチーム状況でした 技術選定について • 技術的関心（モチベーション・採用面）やSEOへの強みなどを加味してReact、Next.js • 厳密な型定義・必要なデータをコンポーネント単位で制御しやすいGraphQL などサービス構造との相性も踏まえた上で判断されていましたが、割と挑戦的なPJだと感じました...
6. 6 © SMS Co., Ltd. 課題の発生とその解消
7. 7 © SMS Co., Ltd. 課題の発生とその解消 その1　アーキテクチャ・コードの負債 Next.js移行PJは納期が決まっていたのもあり 開発者による書き方の違いはある程度許容して進行 • React・TypeScriptに慣れておらず、コードの書き方・フォルダの切り方が人によってばらついている • 他の人が作った箇所を改修しようとすると正確に工数が見積もれない • 負債起因の細かいバグが次々発生
8. 8 © SMS Co., Ltd. 課題の発生とその解消 リリース前からこうなるのは目に見えていたため、リリース後すぐに以下を実行 • サービスの特性にあったアーキテクチャ設計・コード規約を考案し、メンバーと認識合わせ • ビジネスサイドに技術的な負債を解消しないと保守性が著しく損なうことを説明 → 日常業務と並行して一定のリソースを負債解消にあてることを了承 • 一人で一ヶ月かけアーキテクチャの土台となる部分の修正・重要度の高いページを移行 • その後メンバーとペアプロ等を行い徐々に知見を浸透しながら移行 • トータル3ヶ月ほどで完全移行完了 • 改修難易度が大幅に下がり保守性向上
9. 9 © SMS Co., Ltd. 課題の発生とその解消 その2　表示速度・Core Web Vitalsの低下 フロントエンドの知見が足りないことなどに起因してコードが最適化されておらず 画面の表示速度・Core Web Vitals(LCP・INP・CLS)が低下 • Laravel Bladeで動いていた時に比べ表示速度が明らかに遅くユーザー体験を損なっていた • SEOへの影響も危惧され、他のSEO施策より最優先で対応することに
10. 10 © SMS Co., Ltd. 課題の発生とその解消 表示速度について • 同一ページで同じデータをserver・clientのそれぞれで取得している部分が多数存在していた →　Apollo Clientのキャッシュを活用できるよう全体設計を見直し、データを重複して取得しないよう修正 Core Web Vitalsについて • Lighthouse（Chrome拡張）、PageSpeed InsightsでCore Web Vitals低下の要因を分析・対応 →　Suspense、useEffect、Imageのpriority属性等を適切に扱いLCP画像の読み込み方法を修正 • Laravel Bladeで動いていた時と遜色ない表示速度まで改善 • パフォーマンス指標が改善し、他のSEO施策を回せる状態に
11. 11 © SMS Co., Ltd. 課題の発生とその解消 その3　バックエンドサーバーの負荷上昇 GraphQLでのAPI呼び出しがRSC（React Server Components）の各箇所で行われ、 リクエスト数が爆増したことによりバックエンドサーバーの負荷が上昇 • 昼休みなどリクエスト数が跳ねるタイミングでレスポンスが急に悪化することもしばしば • とある日のメール一斉配信のタイミングでサーバーが落ちてしまい緊急度上昇
12. 12 © SMS Co., Ltd. 課題の発生とその解消 キャッシュの導入 • CDNキャッシュ（CloundFront）、オンデマンドISR、クエリ取得結果をキャッシュ（Redis）等検討 →　導入コスト・実装コスト・保守性等を考えた結果Redisを導入 • バックエンドサーバーの負荷を大きく軽減 • ついでにキャッシュ導入ページの表示速度も上昇
13. 13 © SMS Co., Ltd. 課題の発生とその解消 対応前後のECSのCPU使用率 Redis導入 backend frontend
14. 14 © SMS Co., Ltd. 終わりに 以上、フロントエンド専任がいないチームのNext.js移行と、その後のお話しでした 振り返ってみて、今だったらAIを活用することで回避できた課題もたくさんあるなと改めて思いました 直近はAIエージェントに作ってもらうことを前提としたコード規約の見直しやドキュメント整備を進めています （まだ始めたてなので他のチームの事例が気になる） 各々が抱えている課題への取り組みについて色々お話しできれば幸いです🙋