重複コードを許容する
開発者として、複数のページやコンポーネントにわたる重複コードを1つのHookやコンポーネントに共通化することがよくあります。 重複コードを1つのコンポーネントやHookに共通化することで、良いコードの特徴の1つである凝集度を高め、共に修正が必要なコードを一度に修正することができます。
しかし、不要な結合度が生じることで、共通コンポーネントやHookを修正する際に影響を受けるコードの範囲が広がり、逆に修正が難しくなることもあります。
最初は似たような動作すると考えて共通化したコードが、後にページごとに異なる特異な仕様が生じて、次第に複雑化する可能性があります。 同時に、共通コードを修正するたびに、そのコードに依存するコードを一つ一つ適切にテストしなければならず、逆にコード修正が難しくなることもあります。
📝 コード例
次のように、点検情報を引数として受け取り、点検中であれば点検のボトムシートを開き、ユーザーが通知を受け取ることに同意した場合はそれをログに記録し、現在の画面を閉じるHookを見てみましょう。
export const useOpenMaintenanceBottomSheet = () => {
const maintenanceBottomSheet = useMaintenanceBottomSheet();
const logger = useLogger();
return async (maintainingInfo: TelecomMaintenanceInfo) => {
logger.log("点検のボトムシートを開く");
const result = await maintenanceBottomSheet.open(maintainingInfo);
if (result) {
logger.log("点検のボトムシートの通知を受け取るをクリック");
}
closeView();
};
};このコードは複数のページで繰り返し使用されたため、共通のHookとして分離されました。
👃 コードの不吉な臭いを嗅いでみる
結合度
このHookは複数のページで繰り返し見られるロジックであるため、共通化されました。しかし、将来生じる可能性のあるさまざまなコード変更を考慮する必要があります。
- もしページごとにロギングする値が異なる場合は？
- もしあるページでは点検ボトムシートを閉じても画面を閉じる必要がない場合は？
- ボトムシートで表示されるテキストや画像を異なるものにする必要がある場合は？
このHookはこうしたコード変更に柔軟に対応するために、複雑に引数を受け取る必要があるでしょう。 また、このHookの実装を修正するたびに、このHookを使用しているすべてのページが正常に動作するかどうかをテストしなければなりません。
✏️ リファクタリングしてみる
一見すると繰り返しのように見えるコードでも、重複コードを許可することが良い方向性である場合があります。
チームメンバーと積極的にコミュニケーションを取りながら、点検ボトムシートの動作を正確に理解する必要があります。 もしページでロギングする値が同じで、点検ボトムシートの動作や見た目が同じであり、今後もそうであるならば、共通化することでコードの凝集度を高めることができます。
しかし、ページごとに動作が異なる可能性がある場合は、共通化せずに重複コードを許可する方が良い選択肢となるでしょう。