トーク

フロントエンド開発におけるコンポーネントの共通化や分割は、保守性や拡張性の観点で重要です。しかし、過度な共通化や粒度の細かすぎる分割は、可読性や変更容易性を損ない、結果として開発効率を下げてしまうこともあります。

本セッションでは、「機能的凝集」という観点から、コンポーネント設計の適切な粒度と分割の判断基準について実践的に紹介します。特に、ts-pattern や TypeScript のジェネリクス型を活用し、型の恩恵を受けながら機能的凝集を実現する手法にフォーカスします。

登壇者のチームでは、複数ロール・多機能を持つシステムにおいて、関心ごとや機能的責務が重なるコンポーネント群をどのように意味のある単位へ構造化するかについて議論・検証してきました。設計の選択肢が豊富だったプロジェクト立ち上げ期の経験をもとに、以下のようなパターンと改善例を紹介します：

• ロールごとに異なる画面構成
• 新規作成画面と編集画面などの類似ページ構成
• コンポーネント内部の部品単位での差分
• 表示アイテムの種類に応じたList構成の違い
• 差分が最小限の場合と複数箇所に波及する場合の対処法
• 差分の分岐ポイントがルーティングか、取得データかの違い

これらのパターンをもとに、論理的凝集から機能的凝集への改善プロセスを具体的なコード事例とともに紹介します。

本トークを通じて、機能的凝集を前提としたコンポーネント境界の設計判断を議論するための共通言語を提供し、プロジェクトごとの制約に応じた設計意思決定の一助となれば幸いです。