🚀 9-1. 書き換え作業を効率化する小技

✅ 要点まとめ

• クラスコンポーネント → Composition API への変換は 手順と仕組みを理解すれば怖くない
• 手作業でも早く正確にできる「小技」「習慣」をまとめる
• ツールに頼りすぎず、パターンを覚えるのが一番の近道
• 「1つずつ変換 → 動作確認」のリズムが大事。

🟢 小技①: まず小さなファイルから変換する

• いきなり大物コンポーネントを変換しない
• 1ファイルごとに「props, data, methods, computed, mounted」を変換してテスト
• 動作確認できたら次へ進む
• 💡 「変換成功チェックリスト」 を作っておくと安心

🟡 小技②: 変換テンプレートを作っておく

<!-- テンプレート例: setup基本形 -->
<script setup lang="ts">
const props = defineProps<{ step?: number }>();
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
const increment = () => { count.value += props.step ?? 1; };
onMounted(() => { console.log('mounted!'); });
</script>

🔖 これをコピーして使えば速い。

🟣 小技③: VSCode のスニペットを活用する

"vue3 setup template": {
  "prefix": "vue3setup",
  "body": [
    "<script setup lang=\\"ts\\">",
    "const props = defineProps<${1:Props}>();",
    "const emit = defineEmits<${2:Emits}>();",
    "const count = ref(0);",
    "onMounted(() => {",
    "  console.log('mounted!');",
    "});",
    "</script>"
  ],
  "description": "Vue 3 Composition API setup テンプレート"
}