第2章：移行前のコード全体像

2.1 コンポーネントファイル（親子関係あり、v-model、watch、Vuexのstate・getter利用あり）

ここでは、変換前のコンポーネントファイルの構成と、具体的なコード例を示します。

ここで紹介するコードは、後の章で**Composition API + <script setup lang="ts">**形式へリファクタリングしていきます。

■ ファイル構成（例）

src/
├── components/
│   ├── ParentComponent.vue
│   └── ChildComponent.vue

■ ParentComponent.vue（変換前）

// ファイル名: ParentComponent.vue
<template>
  <div>
    <p>現在のテキスト長: {{ textLength }}</p>
    <p>現在のルート名: {{ currentRouteName }}</p>
    <ChildComponent v-model="childValue" />
    <button @click="changeText">テキスト更新</button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import ChildComponent from './ChildComponent.vue';

// vuexモジュールを名前空間付きで呼び出す
const SampleModule = namespace('sampleModule');

@Component({
  components: {
    ChildComponent,
  },
})
export default class ParentComponent extends Vue {
  // v-modelでバインドされるデータ
  private childValue: string = '初期値';

  // Vuexからstateを読み込み
  @SampleModule.State('text') private text!: string;

  // Vuexからgetterを読み込み
  @SampleModule.Getter('textLength') private textLength!: number;
  @SampleModule.Getter('currentRouteName') private currentRouteName!: string;

  // Vuexのactionを読み込み
  @SampleModule.Action('updateText') private updateText!: (text: string) => Promise<void>;

  // v-modelで受け取った値の変化を監視
  @Watch('childValue')
  onChildValueChanged(newVal: string, oldVal: string) {
    console.log('Child value changed:', newVal, oldVal);
  }

  // テキストを更新するメソッド
  changeText() {
    this.updateText(this.childValue);
  }
}
</script>

■ ChildComponent.vue（変換前）

// ファイル名: ChildComponent.vue
<template>
  <input :value="value" @input="onInput" />
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';

@Component
export default class ChildComponent extends Vue {
  // 親から渡されるv-modelの値
  @Prop({ type: String, default: '' }) private value!: string;

  // 入力イベントを発火して親に通知
  @Emit('input')
  onInput(event: Event) {
    return (event.target as HTMLInputElement).value;
  }
}
</script>

■ このコードで注目すべきポイント

項目	内容
親子関係	`ParentComponent → ChildComponent`
v-modelの仕組み	`value`と`input`イベントの組み合わせ
watchの利用	`@Watch`デコレーターで`childValue`を監視
Vuex stateの利用	`@State('text')`で取得
Vuex getterの利用	`@Getter('textLength')`, `@Getter('currentRouteName')`で取得
Vuex actionの利用	`@Action('updateText')`で呼び出し

✅ このように、**Vuexモジュール（state, getter, action）とコンポーネント（v-model, watch）**が密接に連携しているのが、この変換前コードの特徴です。

✅ Composition APIへの移行では、これらの依存関係を正しく整理しながら書き換えていきます。