SaaSのフロントエンドの個別実装と共通実装を切り分ける / dividing SaaS front end into individual and common parts

2022年2月22日に開催された「SaaSにおけるフロントエンドの技術戦略 | SaaS.tech #6」でLTした資料です。
https://saas-tech.connpass.com/event/273276/

Transcript

1. © 2023 Finatext Holdings Ltd. SaaSのフロントエンドの 個別実装と共通実装を切り分ける 浅井 匠
2. © 2023 Finatext Holdings Ltd. 1. Finatextが開発しているサービスについて 2. 抱えていた課題 3. 試していること 4. まとめ 1 本日の流れ
3. © 2023 Finatext Holdings Ltd. サービス Finatextで開発している証券システム 2 外部システム(市場等) 証券ビジネスプラットフォーム (BaaS) 株・投信等の売買 証券口座管理 (残高・入出金等) 認証 Goal Navi へきしん ゴールナビ 岩井コスモ ゴールナビ JAM WRAP Smart Manager 米国ETFラップ お買い物投資 コレカブ
4. © 2023 Finatext Holdings Ltd. 3 一任運用サービスのSaaS部分（Digital Wealth Management） 投資一任管理 口座管理 エンドユーザ パートナー 運用会社 岩井コスモ 証券 碧海 信用金庫 ニッセイ アセット マネジメント 楽天証券 Japan Asset Management スマート プラス GCI アセット・ マネジメント FINANCIAL STANDARD FINANCIAL STANDARD Digital Wealth Management / BaaS ニッセイ アセット マネジメント
5. © 2023 Finatext Holdings Ltd. 課題 • 同じロジックで似た別の画面 • 同じ画面で似た別のロジック • 同じようなロジックで同じような画面 が複数発生していくので、効率よく開発したい 4 個別のカスタマイズを実装した時に 他への影響を可能な限り小さくしたい pnpm workspaceを使って課題の解決に取り組んでいる
6. © 2023 Finatext Holdings Ltd. pnpm 高速、かつディスク容量効率が良いパッケージマネージャー https://pnpm.io/ja workspace npm 7系から追加された、monorepoでの作業を簡単に行うための機能 https://docs.npmjs.com/cli/v9/using-npm/workspaces https://classic.yarnpkg.com/lang/en/docs/workspaces pnpm workspace pnpm には、モノリポジトリ（別名、マルチプロジェクトリポジトリ、またはモノリシックリポジ トリ）のサポートが組み込まれています。 ワークスペースを作成して、単一のリポジトリ内で複数のプロジェクトを統合できます。 https://pnpm.io/ja/workspaces 単語説明 5
7. © 2023 Finatext Holdings Ltd. pnpm workspaceだと、ライブラリへの依存をpackageの中に閉じやすかったから pnpm workspaceを選んだ理由 6 例: yarn workspaceだと packages - package A ← axiosをinstallしてる - package B ← axiosをinstallしていない のような構成の時に、package Bの中で import axios from 'axios' ができてしまう
8. © 2023 Finatext Holdings Ltd. 7 試していること 投資一任管理 口座管理 エンドユーザ パートナー 運用会社 岩井コスモ 証券 碧海 信用金庫 ニッセイ アセット マネジメント 楽天証券 Japan Asset Management スマート プラス GCI アセット・ マネジメント FINANCIAL STANDARD FINANCIAL STANDARD Digital Wealth Management / BaaS ニッセイ アセット マネジメント 今までの単位 今試している単位
9. © 2023 Finatext Holdings Ltd. pnpm --filter @dwm-front/ixx-app build:dev:partner1 pnpm --filter @dwm-front/ixx-app build:dev:partner2 pnpm --filter @dwm-front/jxx-app build:dev:partnerA pnpm --filter @dwm-front/jxx-app build:dev:partnerB pnpm --filter @dwm-front/jxx-app build:dev:partnerC ディレクトリ構成 + 実行コマンド 8
10. © 2023 Finatext Holdings Ltd. 構成イメージ 9 サービスAのエンドユーザ向け画面1 サービスAの営業員向け画面 サービスA(applications/ixx) サービスB(applications/jxx) サービスC APIとの接続部分(packages/infra) 共通で使う画面パーツ(packages/component) サービスA内で共通で使う画面パーツ サービスB内で共通で使う画面パーツ util(packages/util) サービスAのエンドユーザ向け画面2 各サービスのフロント(applications) package群(packages)
11. © 2023 Finatext Holdings Ltd. 実装サンプル export const HomeContainer = () => ( <Container urlPrefix={""} /> ) export const HomeContainer = () => { const { customerId } = useParams<{ customerId: string }>() if (!customerId) { throw new Error("url is invalid" ) } return ( <Container urlPrefix={`/customers/${customerId}`} /> ) } 10 - エンドユーザ向けのHome 画面 - 営業員が代理入力中の Home画面 では、若干url構造が異なるので その部分を切り出せるようにし てる例
12. © 2023 Finatext Holdings Ltd. まとめ 11 • 同じロジックで似た別の画面 • 同じ画面で似た別のロジック • 同じようなロジックで同じような画面 が複数発生していくので、効率よく開発したい 個別のカスタマイズを実装した時に 他への影響を可能な限り小さくしたい 同じpackageを使い回すのが簡単にできる 分かりやすいロジックであれば、親から渡す 感じで対応できる 個別実装部分をpackageの外に切り出せれ ば、影響範囲はそこに閉じれる
13. © 2023 Finatext Holdings Ltd. 12 Finatextグループは仲間を募集中です！ CTO/CISO 田島悟史 (@s_tajima) エンジニアが成長できる 環境づくりに力を入れています。 詳しくは採用Notion をご覧ください⇒