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


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

3 （C）PharmaX Inc. 2024 All Rights Reserve 発表の流れ


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


5 （C）PharmaX Inc. 2024 All Rights Reserve YOJOプロダクトの簡単な説明

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


（C）PharmaX Inc. 2024 All Rights Reserve 7 ソフトウェアに閉じないプロダクト開発
 独自の薬局オペレーションシステムを構築し、最適化されたオンライン薬局を実現 
 × 自社薬局をプロトタイプラボ化 
 ソフトウェア オペレーション リモート 薬剤師組織 薬局業務を効率化す るオペレーションシス テム 質の高い患者さま対応 のためのオンライン特 化組織 対人業務の質を高め るための対物業務効 率化 「ソフトウェア×オペレーション×薬剤師組織」を プロダクトとして開発

（C）PharmaX Inc. 2024 All Rights Reserve 8 患者向けチャットシステムと薬剤師向け管理システム
 患者とのスムーズなコミュニケーション 薬剤師向け管理システム チャット形式での診断・相談・購入 患者向けチャットシステム

9 （C）PharmaX Inc. 2024 All Rights Reserve AppRouter移行への
 取り組み


（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 （C）PharmaX Inc. 2024 All Rights Reserve 活用できている機能


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


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


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


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


（C）PharmaX Inc. 2024 All Rights Reserve 16 Server Components
 ● 初期データはなるべくServerComponentで取得 するように修正 ● useEffectを使って、データフェッチする処理がなく なり、可読性、メンテナンス性が向上した ● 初期レンダリングの速度があがり、ユーザー体験 が向上した

（C）PharmaX Inc. 2024 All Rights Reserve 17 【余談】Server Components 活用にあたって
 苦労したこと
 【認証の管理方法の変更】
 ● 管理画面は、もともとFirebase Authによる認証を採用していた 
 ● PagesRouter時は、Firebase SDK経由でトークン管理していたため、基本は全てクライアントから のデータフェッチ
 ● AppRouter移行にあたり、Server Componentを活用できない問題を解消するため認証方法の移 行を検討
 ● トークンの管理をサーバー側へ移行 
 ● 認証機構全体が変更されたことにより、影響範囲が広く、苦労した 


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


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


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


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


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


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