大規模アプリケーションをリアーキテクトした際の知見

https://dmm.connpass.com/event/367132/
Think ! FrontEnd by DMM #9 で登壇した内容です

# リンク類はこちらから
https://inside.dmm.com/articles/salon-neon/
https://inside.dmm.com/articles/salon-neon-stack/

Transcript

1. 大規模アプリをリアーキテクトし た際の知見 〜DMMオンラインサロン〜
2. 國分竜二 • 24新卒 • 最近の趣味はランニング • DMM.goという勉強会の運 営もやってます • 最近Tesla買いました
3. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
4. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
5. DMMオンラインサロンとは ~ オーナーの価値を届ける、会員制コミュニティ ~ • オンライン上で運営される会費制のクローズドなコミュニティ • 登録すれば誰でも参加できるオープンなSNSと異なり、同じ目的を持って対価を支払った熱量の高い人だけが参加する傾向にある • そのため、誹謗中傷や荒らしなどが発生しにくく、心理的安全性をもった交流が可能
6. DMMオンラインサロンとは
7. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
8. リアーキテクトの背景 salonLive コミュニティ 管理画面
9. リアーキテクトの背景 • 現状リアーキテクトが完了した部分 a. アカウント連携（ Ph1） b. neon構築（Ph2） c. 開設簡略化（Ph3） • これから対応する部分（リプレース元のシステムから脱却） a. ユーザー管理機能 b. 売上管理
 c. 支払管理
 d. お知らせ機能
 e. データ分析機能
10. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
11. 使用技術 ~フロントエンド ~ Next.js(app) URQL Panda-css Radix-ui React-hook-form Zod
12. お品書き • 自己紹介 • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
13. ステークホルダーとの調整 • デザイン壁打ち ◦ デザイナーがFigma上でデザインの 修正点や変更したい箇所などを修 正する ◦ 開発がそれに対して FBを行う
14. ステークホルダーとの調整 • デザインレビュー ◦ Figmaで作成されたデザインカンプを元に実装 する ◦ 実際の実装がFigmaと適合しているかを確認 してもらう ◦ 問題やデザイン崩れなどがあれば、修正対応
15. ステークホルダーとの調整 • PO（プロダクトオーナー）レビュー ◦ POに実装がUSMや仕様とあっているかを確 認してもらう
16. ステークホルダーとの調整 • スプリントレビュー ◦ スクラムで開発している ◦ 各ステークホルダーにレビューしてもらうため のイベント（スプリントレビュー ）があります ◦ 実際にデモ動画 や動かしているのを Discord の画面共有で見ていただいてレビューしてい ただくイベントです
17. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
18. やってみてどうだった ~２つのアプリ。３つの体験 ~ • dmmが管理する管理画面とオーナーさんがサロンを管理する管理画面の 2つのアプリ • オーナー管理画面の方ではスマホにも対応 オーナー管理 オーナー管理画面 SP DMM管理画面
19. やってみてどうだった ~２つのアプリ。３つの体験 ~ • リプレース前のプロダクトはスマホに対応していなかった ◦ オーナーさんからスマホ版にも対応して欲しいという要請があった • DMM管理画面は基本的に業務中に PCから動かすことが前提だったため SP対応なし
20. やってみてどうだった ~模倣ではない。再発明です ~ 全く同じものでリプレースではなく機能レベルで作り直し。 not レガシーミミック 現サービス 新サービス
21. やってみてどうだった ~模倣ではない。再発明です ~ フロントエンドをリプレースした経緯： • 既存のプロダクトはZendFrameworkのビューを利用していたり、 AngularJSという古いバージョンの Angularを用いていたりなど、改修するには重かった ◦ ZendFramework: v2.5を使用。現在では公式が後継の Laminasに以降を推奨*1 ◦ ※AngularJS: 2021年12月31日にサポート停止 • 開設のリードタイムが伸びていたこともあり、全面的にリアーキテクトという選択肢をとった *1 https://zendframework.github.io
22. やってみてどうだった ~100に迫る、新たな体験 ~ • 約100ページほどだったので物量が多かった ◦ オーナー管理画面 ▪ 50ページ ◦ DMM管理画面 ▪ 42ページ
23. やってみてどうだった ~100に迫る、新たな体験 ~ • 物量がかなり多かった • ただ、機能的にはにている部分も多かったため、工夫をして乗り切った 【工夫した点】 • Next.jsとTurboRepoを使用することによって効率的な開発を実現 ◦ キャッシュと並列処理を自動化 ◦ モノレポのビルド順序を最適化 ◦ 変更差分のみをビルド ◦ CI/CDでのキャッシュ共有 • モノレポ化することでコンポーネントやライブラリを共通化 • Panda-CSSを使ったCSSを効率的に書くことが出来た ◦ ブレイクポイント、デザインシステムなど
24. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
25. 今後の展望 • パフォーマンスを気にしないで作成している箇 所がある • 条件が複雑になってしまっており、保守が大変 ◦ 現状はあまり改修はないが、今後修正が入る 際に大変
26. 今後の展望 • パフォーマンスを気にしないで作成している箇 所がある • 条件が複雑になってしまっており、保守が大変 ◦ 現状はあまり改修はないが、今後修正が入る 際に大変
27. 今後の展望 • パフォーマンスを気にしないで作成している箇 所がある • 条件が複雑になってしまっており、保守が大 変 ◦ 現状はあまり改修はないが、今後修正が入 る際に大変 運営開始日時、運営終了日時がある場合でかつ通常プランでない時
28. お品書き • DMMオンラインサロンとは • リアーキテクトの背景 • 使用技術 • ステークホルダーとの調整 • やってみてどうだった • 今後の展望 • まとめ
29. まとめ • 3年間行ってきてシステム全体で見るとリアーキテクトの一部が完了した • 既存のプロダクトがまだまだ残ったままになっているので脱却を目指して進んでいきます 再掲
30. ご清聴いただきありがとうございました
31. Appendix リアーキテクトについて詳細に書いた記事等になります！ 興味があればぜひ！ https://inside.dmm.com/articles/salon-neon/ https://inside.dmm.com/articles/salon-neon-stack/