Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TSKaigi Hokuriku 2025 フロントエンドアーキテクチャの設計方法論 Fea...
Search
Sakamoto Keisuke
November 22, 2025
0
240
TSKaigi Hokuriku 2025 フロントエンドアーキテクチャの設計方法論 Feature-Sliced Designの紹介
Sakamoto Keisuke
November 22, 2025
Tweet
Share
More Decks by Sakamoto Keisuke
See All by Sakamoto Keisuke
Agile Japan 2022 北陸サテライト 小さな変化から始めるアジャイル
motikoma
1
640
モブプロをやってみて「作業工程を分担する」という固定観念から脱出した話
motikoma
1
2.1k
アジャイルなチームへの道 - はじめの一歩 -
motikoma
1
3.8k
職能割りからプロダクト割りのチーム運営へ
motikoma
1
1.7k
新規プロダクト開発の流れ
motikoma
0
1.5k
成果を出す販売施策を立案するためのUXデザインワークショップ
motikoma
0
120
ユーザー中心設計を取り入れたアプリの開発
motikoma
0
1.3k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
How to train your dragon (web standard)
notwaldorf
97
6.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.6k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
659
61k
Into the Great Unknown - MozCon
thekraken
40
2.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Building an army of robots
kneath
306
46k
jQuery: Nuts, Bolts and Bling
dougneiner
65
8k
The Invisible Side of Design
smashingmag
302
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Transcript
坂本 圭佑 TSKaigi Hokuriku 2025 フロントエンドアーキテクチャの設計方法論 Feature-Sliced Designの紹介
自己紹介 1988年生まれ 富山県出身 UXリサーチャー,PMから ソフトウェアエンジニアに ジョブチェンジ 2024年10月~ プロダクトエンジニア 石川県からフルリモートワーク 自己紹介
坂本 圭佑 Sakamoto Keisuke リード プロダクトエンジニア
None
ロジックスのフロントエンド 例:運行管理領域の案件登録ドロワー 様々なリソース・タスクを元に構成されたカスタマイズ性の高い複雑なページ 案件に紐づく無数のリソースとタスク
発生していた課題 見通しが悪くて、影響範囲が読みづらい Containerコンポーネントとして API通信,状態管理,ビジネスロジックなど を集約 リソースとタスクの増加に伴い、 Containerコンポーネントが肥大化 案件登録 Container API通信,状態管理,データ加工
Presentational Presentational Presentational Presentational 肥大化 業務の複雑さがもたらすコード肥大化
アプローチの検討 これまでUIは機能単位で分解されていたが、データ取得はページ相当単位だった テクニカルアドバイザー 高橋さん Feature-Sliced Designが良さそうですよ 責務ごとに自己完結した機能コンポーネント志向へ 今後はページをドメイン単位のUIとデータ取得がまとまった機能コンポーネントに分解 機能コンポーネントを単一の責務ごとに定義し、低結合,高凝集にしていきたい
Feature-Sliced Design • コードを整理するためのルールと規約の集大成 • 目的はビジネス要件が絶えず変化する中で、プロジェクトを理解しやすく構造化 されたものにすること フロントエンドアーキテクチャの設計方法論
Feature-Sliced Design Layers, Slices, Segmentsという概念や依存の方向性を制限するためのルールが存在する ドメイン単位で分割 同じLayerの他のSliceを使用できない 下層のモジュール のみをインポート できる
FSD移行プロジェクトの推進 1. 検討委員会でリアーキテクチャ検討 • 検討委員会(テックリード with 高橋さん) • シンプルなページを元にサンプルコード作成 2.
一部のメンバーが試験的に採用 • 複雑なページに適用 • 論点を洗い出して検討委員会で対応を議論 3. プロダクトチーム全員に展開 • 雛形コードジェネレータやリンターによる環境整備 • SlackのFSD寺子屋チャンネルの開設で疑問を投稿しやすく • FSDドキュメント読み合わせ会を定期開催し認識を統一
FSDに移行した効果 ドメイン単位の低結合,高凝集な機能コンポーネントの実現 テスト容易性の向上 コードの見通しが良くなり、開発生産性が向上 ルールと規約に沿った軸のブレない議論が可能に 大規模フロントエンドプロジェクトにおける複雑性を効率的に管理 プロダクトと組織の成長に耐えられるスケーラブルなアーキテクチャへ進化
None
None