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

by Ryuji Kokubu

Slide 1

Slide 1 text

大規模アプリをリアーキテクトした際の知見〜DMMオンラインサロン〜

Slide 2

Slide 2 text

國分竜二 ● 24新卒 ● 最近の趣味はランニング ● DMM.goという勉強会の運営もやってます ● 最近Tesla買いました

Slide 3

Slide 3 text

お品書き ● DMMオンラインサロンとは ● リアーキテクトの背景 ● 使用技術 ● ステークホルダーとの調整 ● やってみてどうだった ● 今後の展望 ● まとめ

Slide 4

Slide 4 text

Slide 5

Slide 5 text

DMMオンラインサロンとは ~ オーナーの価値を届ける、会員制コミュニティ ~ ● オンライン上で運営される会費制のクローズドなコミュニティ ● 登録すれば誰でも参加できるオープンなSNSと異なり、同じ目的を持って対価を支払った熱量の高い人だけが参加する傾向にある ● そのため、誹謗中傷や荒らしなどが発生しにくく、心理的安全性をもった交流が可能

Slide 6

Slide 6 text

DMMオンラインサロンとは

Slide 7

Slide 7 text

Slide 8

Slide 8 text

リアーキテクトの背景 salonLive コミュニティ管理画面

Slide 9

Slide 9 text

リアーキテクトの背景 ● 現状リアーキテクトが完了した部分 a. アカウント連携（ Ph1） b. neon構築（Ph2） c. 開設簡略化（Ph3） ● これから対応する部分（リプレース元のシステムから脱却） a. ユーザー管理機能 b. 売上管理  c. 支払管理  d. お知らせ機能  e. データ分析機能

Slide 10

Slide 10 text

Slide 11

Slide 11 text

使用技術 ~フロントエンド ~ Next.js(app) URQL Panda-css Radix-ui React-hook-form Zod

Slide 12

Slide 12 text

お品書き ● 自己紹介 ● DMMオンラインサロンとは ● リアーキテクトの背景 ● 使用技術 ● ステークホルダーとの調整 ● やってみてどうだった ● 今後の展望 ● まとめ

Slide 13

Slide 13 text

ステークホルダーとの調整 ● デザイン壁打ち ○ デザイナーがFigma上でデザインの修正点や変更したい箇所などを修正する ○ 開発がそれに対して FBを行う

Slide 14

Slide 14 text

ステークホルダーとの調整 ● デザインレビュー ○ Figmaで作成されたデザインカンプを元に実装する ○ 実際の実装がFigmaと適合しているかを確認してもらう ○ 問題やデザイン崩れなどがあれば、修正対応

Slide 15

Slide 15 text

ステークホルダーとの調整 ● PO（プロダクトオーナー）レビュー ○ POに実装がUSMや仕様とあっているかを確認してもらう

Slide 16

Slide 16 text

ステークホルダーとの調整 ● スプリントレビュー ○ スクラムで開発している ○ 各ステークホルダーにレビューしてもらうためのイベント（スプリントレビュー）があります ○ 実際にデモ動画や動かしているのを Discord の画面共有で見ていただいてレビューしていただくイベントです

Slide 17

Slide 17 text

Slide 18

Slide 18 text

やってみてどうだった ~２つのアプリ。３つの体験 ~ ● dmmが管理する管理画面とオーナーさんがサロンを管理する管理画面の 2つのアプリ ● オーナー管理画面の方ではスマホにも対応オーナー管理オーナー管理画面 SP DMM管理画面

Slide 19

Slide 19 text

やってみてどうだった ~２つのアプリ。３つの体験 ~ ● リプレース前のプロダクトはスマホに対応していなかった ○ オーナーさんからスマホ版にも対応して欲しいという要請があった ● DMM管理画面は基本的に業務中に PCから動かすことが前提だったため SP対応なし

Slide 20

Slide 20 text

やってみてどうだった ~模倣ではない。再発明です ~ 全く同じものでリプレースではなく機能レベルで作り直し。 not レガシーミミック現サービス新サービス

Slide 21

Slide 21 text

やってみてどうだった ~模倣ではない。再発明です ~ フロントエンドをリプレースした経緯： ● 既存のプロダクトはZendFrameworkのビューを利用していたり、 AngularJSという古いバージョンの Angularを用いていたりなど、改修するには重かった ○ ZendFramework: v2.5を使用。現在では公式が後継の Laminasに以降を推奨*1 ○ ※AngularJS: 2021年12月31日にサポート停止 ● 開設のリードタイムが伸びていたこともあり、全面的にリアーキテクトという選択肢をとった *1 https://zendframework.github.io

Slide 22

Slide 22 text

やってみてどうだった ~100に迫る、新たな体験 ~ ● 約100ページほどだったので物量が多かった ○ オーナー管理画面 ■ 50ページ ○ DMM管理画面 ■ 42ページ

Slide 23

Slide 23 text

やってみてどうだった ~100に迫る、新たな体験 ~ ● 物量がかなり多かった ● ただ、機能的にはにている部分も多かったため、工夫をして乗り切った【工夫した点】 ● Next.jsとTurboRepoを使用することによって効率的な開発を実現 ○ キャッシュと並列処理を自動化 ○ モノレポのビルド順序を最適化 ○ 変更差分のみをビルド ○ CI/CDでのキャッシュ共有 ● モノレポ化することでコンポーネントやライブラリを共通化 ● Panda-CSSを使ったCSSを効率的に書くことが出来た ○ ブレイクポイント、デザインシステムなど

Slide 24

Slide 24 text

Slide 25

Slide 25 text

今後の展望 ● パフォーマンスを気にしないで作成している箇所がある ● 条件が複雑になってしまっており、保守が大変 ○ 現状はあまり改修はないが、今後修正が入る際に大変

Slide 26

Slide 26 text

Slide 27

Slide 27 text

今後の展望 ● パフォーマンスを気にしないで作成している箇所がある ● 条件が複雑になってしまっており、保守が大変 ○ 現状はあまり改修はないが、今後修正が入る際に大変運営開始日時、運営終了日時がある場合でかつ通常プランでない時

Slide 28

Slide 28 text

Slide 29

Slide 29 text

まとめ ● 3年間行ってきてシステム全体で見るとリアーキテクトの一部が完了した ● 既存のプロダクトがまだまだ残ったままになっているので脱却を目指して進んでいきます再掲

Slide 30

Slide 30 text

ご清聴いただきありがとうございました

Slide 31

Slide 31 text

Appendix リアーキテクトについて詳細に書いた記事等になります！興味があればぜひ！ https://inside.dmm.com/articles/salon-neon/ https://inside.dmm.com/articles/salon-neon-stack/