概要
ロジックの再利用とは「共通関数にすること」ではない。
それは**“横断的に使われる処理を、意味と責務で切り出し、依存から切り離して拡張可能にする戦略的設計”**である。
Vueの Composables、Reactの Custom Hooks は、ただの「便利関数」ではなく、UI層とロジック層を分離し、アプリを構造的に再利用可能にするための設計装置である。
1. Composables / Hooks の定義と責務
// React
function useUserLoader(id) {
const [user, setUser] = useState(null);
useEffect(() => {
fetch(`/api/users/${id}`).then(res => res.json()).then(setUser);
}, [id]);
return user;
}
// Vue
export function useUserLoader(id) {
const user = ref(null);
onMounted(async () => {
user.value = await api.fetchUser(id);
});
return { user };
}
- ✅ 外部から 値や関数を受け取り、副作用や状態を内部で完結
- ✅ UIに依存せず、意味単位で再利用可能
2. 「再利用される」ではなく「再利用可能である」が設計基準
❌ UIと密結合 → 他のコンポーネントで使えない
✅ ロジックを抽象化 → UIに依存しないComposableに
export function useToggle(defaultValue = false) {
const state = ref(defaultValue);
const toggle = () => (state.value = !state.value);
return { state, toggle };
}
3. 横断的関心事（Cross-cutting Concerns）の分離設計
- ローディング制御 → useLoading
- エラーハンドリング → useError
- APIフェッチ汎用化 → useFetch
- モーダル開閉 → useModal
- ✅ どの画面にも関係する処理は 横断ユースケースとして切り出す
4. UIとの境界を明確に保つ
❌ useXxx の中で DOM に直接アクセス
✅ UIイベントは親で受け取り、Composableには状態とロジックのみを閉じ込める
- ✅ Composables / Hooks は ロジックレイヤーに留める
- ✅ 表示・入力との直接操作は UI側に残す
5. Composables / Hooks の構成粒度と依存戦略
- useUser → 小さすぎて曖昧
- useFetchUser → 責務明確
- usePaginatedUserList → 意味単位で再利用可能
- ✅ データ・副作用・UI操作が混ざらないよう設計
- ✅ API依存・状態依存は引数注入にすると柔軟性が高まる
6. テスト可能な構造を保つ（Pure & Injected）
export function useUserFetcher(apiClient) {
const user = ref(null);
const fetch = async (id) => {
user.value = await apiClient.fetchUser(id);
};
return { user, fetch };
}
- ✅ 外部依存（API）を注入可能に → テスト時はモックに置き換え
- ✅ Composables / Hooks を プレーンなロジックレイヤーとして扱う
設計判断フロー
① この処理は他でも使えるか？ → 目的単位でComposableに切り出す
② UIに依存していないか？ → DOM / props に密結合していないか確認
③ 状態管理・副作用・UI操作が1ファイルに混在していないか？
④ 外部依存を内部に閉じ込めていないか？ → 引数注入で柔軟化
⑤ Composable内の構造がテスト可能か？ → 外部に出す責務を定義
よくあるミスと対策
❌ Composable の中でUI状態まで握ってしまう
→ ✅ 状態はロジックに限定し、UI制御は外に出す
❌ 毎回似た処理を書いてコピペ地獄に
→ ✅ useFetch系や useToggle系など汎用Composableを整備
❌ Composableが肥大化して読めなくなる
→ ✅ 1関数1責務 + 機能単位でファイル分離
結語
ロジックの再利用とは「まとめること」ではない。
それは**“意味で分け、責務で切り出し、構造として再利用可能にする設計行為”**である。
- 状態・副作用をComposableに閉じ込め
- UIとロジックを明確に分離し
- 外部依存を注入構造で制御し
- 横断的なロジックを柔軟に再利用する
JavaScriptにおけるロジック再利用戦略とは、
“破綻せず拡張可能な構造を作り出す、責任と柔軟性のデザイン”である。