script setup入門
がsetup()にコンパイルされる仕組み、自動インポート、テンプレートで利用できるトップレベルバインディングについて学習します。
「script setup入門」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
より簡潔なComposition API
<script setup>は、Composition APIのコンパイル時構文糖衣です。定型コードを減らすため、単一ファイルコンポーネントをリアクティブな変数を使う通常のJavaScriptのように記述できます。
setup() から script setup へ
従来の形式では、export default、setup()関数、明示的なreturnが必要です。<script setup>を使った形式と比較してみましょう。
<!-- classic -->
<script>
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
}
}
</script>script setup 版
<script setup>では、ラッパーオブジェクトもreturn文も必要ありません。トップレベルの変数は自動的にテンプレートへ公開されます。
<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>明示的な Return は不要
コンパイラーは、変数、関数、インポートなど、トップレベルにあるすべてのバインディングをテンプレートで利用可能なものとして扱います。記述量が減り、何かをreturnし忘れる心配もありません。
トップレベルの関数も利用可能
トップレベルで関数を定義し、テンプレートから直接バインドできます。returnする必要はありません。
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>インポートしたコンポーネントは自動登録
従来のAPIでは、componentsオプションにコンポーネントを列挙する必要がありました。<script setup>では、コンポーネントをインポートするだけでテンプレートから使用できます。
<script setup>
import BaseButton from './BaseButton.vue'
</script>
<template>
<BaseButton />
</template>内部では setup() にコンパイルされる
内部では、コンパイラーが<script setup>を通常のsetup()関数に変換します。記述方法がより簡潔になるだけで、動作もパフォーマンスも同じです。
lang ts で TypeScript を追加
タグにlang="ts"を追加すると、TypeScriptを有効にできます。これにより、変数に型を付けたり、コンパイラーマクロでジェネリックを使ったり、完全な型推論を利用したりできます。
<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>コンパイラーマクロ
<script setup>内では、defineProps、defineEmits、defineExposeなどの特別なコンパイラーマクロを使用できます。これらはインポートする必要がなく、コンパイラーが認識します。今後のレッスンでそれぞれを詳しく学びます。
通常の script ブロックとの併用
カスタムコンポーネント名のように、モジュールスコープで一度だけ実行するオプションが必要になることがあります。その場合は、<script setup>と並べて通常の<script>ブロックを追加できます。
<script>
export default { name: 'MyComponent' }
</script>
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>チームが script setup を好む理由
- 定型コードが少ない — ラッパーオブジェクトもreturnも不要です。
- コンポーネントが自動登録されます。
- コンパイル時の解析により、実行時のパフォーマンスが向上します。
- TypeScriptを優れた形でサポートします。
Vue 3の単一ファイルコンポーネントで推奨される書き方です。
クイックチェック
script setupについての理解を確認してください。
まとめ
<script setup>の基本を学びました。
setup()に対するコンパイル時の構文糖衣です。- 明示的なreturnは不要で、トップレベルのバインディングが自動的に公開されます。
- インポートしたコンポーネントは自動的に登録されます。
- TypeScriptを使う場合は
lang="ts"を追加します。 definePropsなどのコンパイラーマクロは、インポートなしで使用できます。
よくある質問
「script setup入門」レッスンは無料ですか？
はい。「script setup入門」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「script setup入門」で何を学びますか？
がsetup()にコンパイルされる仕組み、自動インポート、テンプレートで利用できるトップレベルバインディングについて学習します。 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「script setup入門」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。