8.2 コンポーザブル関数の分離と再利用

■ 要点まとめ

コンポーネント内部で完結していたロジックを外部関数に切り出す
コンポーザブル関数（Composable）にまとめて再利用可能にする
状態（state）、ロジック（method）、副作用（watch）を分類する
型定義も一緒に分離して型安全を高める

■ なぜコンポーザブル関数を作るのか？

理由	説明
DRY原則を守るため	同じロジックを何度もコピペしない
保守性を上げるため	ロジック修正が1ヶ所で済む
テストしやすくするため	関数単位で単体テストできる
再利用性を高めるため	別コンポーネントでも使える
スッキリしたコンポーネントにするため	見た目とロジックを分離できる

■ 作り方の基本ステップ

ロジックを探す
- watch、computed、methodsの中にロジックが眠っている
共通化できるものを抜き出す
- データ処理、API呼び出し、バリデーションなど
新しい関数（composable）にまとめる
- src/composables/配下にファイルを作る
型定義も付ける
- 引数や戻り値に型を付けて安全に
コンポーネントから呼び出す
- importして、必要な部分だけ使う

■ ✅ Before（コンポーネントにロジックが直書き）

// ファイル名: ParentComponent.vue
<script setup lang="ts">
import { ref, watch } from 'vue';

const text = ref('');
const isValid = ref(true);

watch(text, (newText) => {
  isValid.value = newText.length <= 10;
});
</script>