プログラミングにおける凝集度と結合度の考え方があるらしい
凝集度
凝集度（ぎょうしゅうど、コヒージョン、cohesion）とは、情報工学においてモジュール内のソースコードが特定の機能を提供すべく如何に協調しているかを表す度合いである。IPAが実施する情報処理技術者試験では、強度(きょうど、ストレングス、strength)という言葉が使われる。凝集度は順序尺度の一種であり、「凝集度が高い」とか「凝集度が低い」といった言い方で使われる。凝集度の高いモジュールは、堅牢性、信頼性、再利用性、読みやすさなどの点で好ましく、凝集度の低いモジュールは保守/評価/再利用/読解が難しいため好ましくないとされる。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
結合度
コンピュータープログラマにとっては、既存のソフトウェア製品に対して 無い機能の追加、対応していないデータへの対応といった事柄に対応する場面がある。この際、全ての既存のソフトウェア製品の内部（より具体的にはソースコード）の各機能各データに対して、どのデータはどこで利用されまたどこで利用されていないか確実に判断できるよう整理、分割が行き届いている状態を結合度が低いと表現する。結合度は低いほど好ましい。逆に結合度が高いとは、例えば1つのデータの持ち方の変更が 部品の関連性を伝って波及し（遠く離れた、と感じる）意図しなかった箇所での不具合を招く。1つの変更に対して 広範囲かつ複数の散在した箇所の部品の動作を改造する必要が出てくることがある。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
なるほど
凝集度は高くて結合度が低いと余分なファイルを見に行く必要がないからメンテナンスが行いやすくなる。
フロントだとこで考えれば良いのか
例 : ブログ投稿サイト 記事群のファイル(article) プロフィール群のファイル(profile) 登録・ログイン群のファイル(member)
- 3つの群でディレクトリを分けて見るとかすると凝集度は高まりそう。
- 結合度を下げるためには、トップに近いコンポーネントは共通のコンポーネントを使いすぎないように意識する。
- TypeScriptでの型定義も群ごとに分けた方が良さそう。
- CSS記述だけのコンポーネントなら問題はなさそうで、propsで値や関数が渡ってきてるコンポーネントは結合度が高くなりすぎないように意識する。
DRY原則に乗っ取りすぎると結合度は高くなる。
だから、群単位で結合度と凝集度を意識しながらコードを書くことが必要。
DRYには気をつけつつも...。