reusability｜再利用性を意識したコード設計とレビュー観点

概要

reusability（再利用性）は、同じ処理を何度も書かなくても済むコード構造のことを指します。
レビューの場面では「この処理、別の場所でも使えそうだな」「この関数、用途が狭すぎないか？」といった観点で評価されます。

再利用性は「短く書く」ではなく、「目的に応じてどこでも使えるようにする」設計視点です。

再利用性の判断ポイント

観点 チェック項目
責務の明確化 関数やクラスに単一の目的があるか
引数の汎用性 依存関係や前提条件が限定的すぎないか
副作用の少なさ 外部状態に依存せず、純粋関数に近いか
出力の一貫性 同じ入力に対して同じ結果を返すか
抽象化の適切さ 共通処理が適切な単位で切り出されているか

具体例：before / after

Before（用途限定の処理）

function renderAdminUser(user) {
  return `<div>${user.adminName}</div>`;
}

After（役割を分離して再利用性を高める）

function renderUserName(user, labelKey = "name") {
  return `<div>${user[labelKey]}</div>`;
}

引数の抽象化で、複数のユースケースに対応可能になります。

会話例：再利用性を巡るレビュー

Reviewer: このロジック、他の画面でも同じような処理が出てきそうですね。
Author: 確かに。ユーティリティ関数に切り出してみます。
Reviewer: useEffect内の処理、他のコンポーネントにも応用できそうです。
Author: 共通hookに昇格させますね。

再利用性を高める設計手法

  • ユーティリティ関数やヘルパーの活用
  • カスタムhook（React）やサービス層（MVC）の分離
  • 汎用コンポーネント（UI部品）の整理と命名統一
  • DI（依存性注入）によるテスト容易性と再利用性の両立
// 再利用しやすいカスタムフックの例
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
}

関連用語

  • readability：再利用性を高めるには、まず読みやすさが前提となる
  • naming：名前が適切でないと再利用が進まない
  • responsibility：責務の分離が再利用可能性を左右する

実務視点まとめ

reusabilityは短期的には「手間」に見えることもありますが、チームの生産性とメンテナンスコストに大きく関わる設計思想です。
レビューの段階で「これ、他でも使える？」と問いかけることが、将来の負債を未然に防ぐ鍵になります。