🟢 2-2. <script setup> の基本構造

🟢 2-2. `<script setup>` の基本構造

✅ 要点まとめ

<script setup> は Composition API を一番シンプルに書く方法。
setup() 関数を書く必要がない → すべてトップレベルに記述する。
ref, reactive, computed, watch を自由に使える。
defineProps() と defineEmits() で props と emit を定義する。
this は一切使わない → 変数を直接扱う。

🟡 最小の具体例コード

<!-- ファイル名: MyComponent.vue -->
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup lang="ts">
// props を受け取る（今回は使ってない例）
const props = defineProps<{}>();

// count を reactive な変数（ref）として宣言
const count = ref(0);

// increment 関数を定義
const increment = () => {
  count.value++;
};

// ライフサイクルフック（mounted の代わり）
onMounted(() => {
  console.log('Component mounted!');
});
</script>

🟢 ポイント解説

要素	書き方	説明
Props	`defineProps<>()`	型安全に props を受け取れる
Reactive Data	`const count = ref(0)`	`ref` を使う（`this` は使わない）
Methods	関数として定義	`const increment = () => {}`
Lifecycle Hooks	`onMounted(() => {})`	クラスの `mounted()` の代わり

🎯 イメージしやすい例え（t）

<script setup> は「机の上に必要な道具だけ並べて作業する」イメージ。

使うものはすぐ手が届く場所にあって、this で探し回る必要がない。

次の「2-3. props, data, computed, methods の変換」に進めますか？