TSKaigi Hokuriku 2025 フロントエンドアーキテクチャの設計方法論 Feature-Sliced Designの紹介

Transcript

1. 坂本 圭佑 TSKaigi Hokuriku 2025 フロントエンドアーキテクチャの設計方法論 Feature-Sliced Designの紹介
2. 自己紹介 1988年生まれ 富山県出身 UXリサーチャー,PMから ソフトウェアエンジニアに ジョブチェンジ 2024年10月~ プロダクトエンジニア 石川県からフルリモートワーク 自己紹介 坂本 圭佑 Sakamoto Keisuke リード プロダクトエンジニア
4. ロジックスのフロントエンド 例：運行管理領域の案件登録ドロワー 様々なリソース・タスクを元に構成されたカスタマイズ性の高い複雑なページ 案件に紐づく無数のリソースとタスク
5. 発生していた課題 見通しが悪くて、影響範囲が読みづらい Containerコンポーネントとして API通信,状態管理,ビジネスロジックなど を集約 リソースとタスクの増加に伴い、 Containerコンポーネントが肥大化 案件登録 Container API通信,状態管理,データ加工 Presentational Presentational Presentational Presentational 肥大化 業務の複雑さがもたらすコード肥大化
6. アプローチの検討 これまでUIは機能単位で分解されていたが、データ取得はページ相当単位だった テクニカルアドバイザー 高橋さん Feature-Sliced Designが良さそうですよ 責務ごとに自己完結した機能コンポーネント志向へ 今後はページをドメイン単位のUIとデータ取得がまとまった機能コンポーネントに分解 機能コンポーネントを単一の責務ごとに定義し、低結合,高凝集にしていきたい
7. Feature-Sliced Design • コードを整理するためのルールと規約の集大成 • 目的はビジネス要件が絶えず変化する中で、プロジェクトを理解しやすく構造化 されたものにすること フロントエンドアーキテクチャの設計方法論
8. Feature-Sliced Design Layers, Slices, Segmentsという概念や依存の方向性を制限するためのルールが存在する ドメイン単位で分割 同じLayerの他のSliceを使用できない 下層のモジュール のみをインポート できる
9. FSD移行プロジェクトの推進 1. 検討委員会でリアーキテクチャ検討 • 検討委員会（テックリード with 高橋さん） • シンプルなページを元にサンプルコード作成 2. 一部のメンバーが試験的に採用 • 複雑なページに適用 • 論点を洗い出して検討委員会で対応を議論 3. プロダクトチーム全員に展開 • 雛形コードジェネレータやリンターによる環境整備 • SlackのFSD寺子屋チャンネルの開設で疑問を投稿しやすく • FSDドキュメント読み合わせ会を定期開催し認識を統一
10. FSDに移行した効果 ドメイン単位の低結合,高凝集な機能コンポーネントの実現 テスト容易性の向上 コードの見通しが良くなり、開発生産性が向上 ルールと規約に沿った軸のブレない議論が可能に 大規模フロントエンドプロジェクトにおける複雑性を効率的に管理 プロダクトと組織の成長に耐えられるスケーラブルなアーキテクチャへ進化