移行して半年、 YOJOではどのくらいApp Routerを活用できているのか

Frontend Night: App Router本番運用企業が語る！Next.js新機能活用法
の発表資料になります。

https://yojo.connpass.com/event/317401/

Transcript

1. 2024.05.29 Frontend Night 移行して半年、
 YOJOではどのくらいApp Routerを 活用できているのか

2. （C）PharmaX Inc. 2024 All Rights Reserve 2 自己紹介 X@hakotensan Akira Morooka PharmaX株式会社 好きなもの: ボルダリング、漫画 YOJO事業部 アプリケーションエンジニア
3. 3 （C）PharmaX Inc. 2024 All Rights Reserve 発表の流れ

4. （C）PharmaX Inc. 2024 All Rights Reserve 4 • YOJOプロダクトの簡単な説明
 • AppRouter移行への取り組み
 • 活用できている機能
 • 活用できていない機能
 • まとめ
 本日の発表の流れ

5. 5 （C）PharmaX Inc. 2024 All Rights Reserve YOJOプロダクトの簡単な説明
6. （C）PharmaX Inc. 2024 All Rights Reserve 6 医療アドバイザーに体調 のことをいつでも気軽に相 談できる 相談型医療体験 30種類以上の漢方薬からあ なたに合ったものを月毎に 提案 パーソナライズ漢方薬 定期的に漢方をお届けし、 一人ひとりに寄り添うかか りつけ医療を提供 継続的なかかりつけ 一生涯にわたって寄り添うかかりつけ漢方薬局「YOJO」

7. （C）PharmaX Inc. 2024 All Rights Reserve 7 ソフトウェアに閉じないプロダクト開発
 独自の薬局オペレーションシステムを構築し、最適化されたオンライン薬局を実現 
 × 自社薬局をプロトタイプラボ化 
 ソフトウェア オペレーション リモート 薬剤師組織 薬局業務を効率化す るオペレーションシス テム 質の高い患者さま対応 のためのオンライン特 化組織 対人業務の質を高め るための対物業務効 率化 「ソフトウェア×オペレーション×薬剤師組織」を プロダクトとして開発
8. （C）PharmaX Inc. 2024 All Rights Reserve 8 患者向けチャットシステムと薬剤師向け管理システム
 患者とのスムーズなコミュニケーション 薬剤師向け管理システム チャット形式での診断・相談・購入 患者向けチャットシステム
9. 9 （C）PharmaX Inc. 2024 All Rights Reserve AppRouter移行への
 取り組み

10. （C）PharmaX Inc. 2024 All Rights Reserve 10 AppRouter移行への取り組み
 ③ほぼ移行完了
 ②AppRouterの運用開始
 ①導入の準備
 ・Lintの整理
 ・ライブラリのアップデート
 ・アーキテクチャの整備
 ・デザインライブラリの再検討 
 ・おおむねAppRouterへ移行完了 
 2023/09 2023/12 ・旧画面の移行作業
 ・旧API処理の移行作業
 2024/05 • 薬剤師管理アプリケーションは、元々はSPAに近い形で運用されていた 
 • 2023年9月より徐々にAppRouter移行の計画を開始 
 • 2024年からAppRouterの一部を運用開始(現在まで約半年程度運用) 
 • 2024年5月現在、画面の9割程度が移行完了している状態 

11. 11 （C）PharmaX Inc. 2024 All Rights Reserve 活用できている機能

12. （C）PharmaX Inc. 2024 All Rights Reserve 12 コロケーション(Colocation)
 NextJSのルーティングファイル 
 アプリケーションのコンポーネントファイル 
 • appディレクトリ直下にプロジェクトのコンポーネントを配置することで、構造がシンプルになった 
 • 各画面のコンポーネントを見るだけで、全体の構成が一目で把握できるようになり、メンテナンス 性が向上した

13. （C）PharmaX Inc. 2024 All Rights Reserve 13 Route Groups
 認証が必要なページ
 認証が必要ないページ
 • 認証の有無やコンテキストの有無によって、柔軟なコンポーネント整理ができるようになっ た
 • 例) 認証が必要なページをグルーピング 

14. （C）PharmaX Inc. 2024 All Rights Reserve 14 Parallel Route ①
 • 画面のコンポーネント設計がシンプルになり、疎結合なコンポーネント管理が可能になった 
 • 分割レンダリングにより、初期レンダリング速度が改善した 

15. （C）PharmaX Inc. 2024 All Rights Reserve 15 Parallel Route ②
 • コード上も可読性が上がり、コンポーネントの中身に集中できるようになった 

16. （C）PharmaX Inc. 2024 All Rights Reserve 16 Server Components
 • 初期データはなるべくServerComponentで取得 するように修正 • useEffectを使って、データフェッチする処理がなく なり、可読性、メンテナンス性が向上した • 初期レンダリングの速度があがり、ユーザー体験 が向上した
17. （C）PharmaX Inc. 2024 All Rights Reserve 17 【余談】Server Components 活用にあたって
 苦労したこと
 【認証の管理方法の変更】
 • 管理画面は、もともとFirebase Authによる認証を採用していた 
 • PagesRouter時は、Firebase SDK経由でトークン管理していたため、基本は全てクライアントから のデータフェッチ
 • AppRouter移行にあたり、Server Componentを活用できない問題を解消するため認証方法の移 行を検討
 • トークンの管理をサーバー側へ移行 
 • 認証機構全体が変更されたことにより、影響範囲が広く、苦労した 

18. 18 （C）PharmaX Inc. 2024 All Rights Reserve 活用できていない機能

19. （C）PharmaX Inc. 2024 All Rights Reserve 19 Server Action
 【現状】
 • 一部のサーバー機能(セッション管理など)に実験的に使用 
 • YOJO管理画面の場合formを使った箇所がそれほど多くない 
 • Route Handlerに処理を集約したい事情があり、上手く使い分けできていない 
 【うまく活用できていないポイント】

20. （C）PharmaX Inc. 2024 All Rights Reserve 20 ストリーミングの活用
 【現状】
 • Suspenseを使ったコンポーネント分割はそこまでできていなく、ストリーミングを完全に活用しき れてはいない
 • Recoilなど状態管理が必要な箇所も多く、まだSuspense対応のComponentに細分化できてない 箇所が多い
 • もともとSPA + RESTという構成で、データ取得を細かく細分化できていない 
 【うまく活用できていないポイント】

21. 21 （C）PharmaX Inc. 2024 All Rights Reserve まとめ

22. （C）PharmaX Inc. 2024 All Rights Reserve 22 まとめ
 • 最も活用しているのは、ルーティング機能 
 (コロケーション、Route Groups、Parallel Route) 
 • Server Componentに合わせてサーバレンダリングを開始したことで、データ取得が簡潔にな り、メンテナンス性、パフォーマンスが上がった 
 • 元々のアーキテクチャの依存から完全に脱却できてはおらず、Server Action、ストリーミングな ど、React/NextJSの新機能はフルで活用はできていない 
 • 今後はAppRouterに合わせたリアーキテクチャも検討 

23. 23 （C）PharmaX Inc. 2024 All Rights Reserve ありがとうございました！