Vue Macrosとコミュニティ提案
vue-macrosライブラリ、実験的なdefineModel、defineOptions、setupSFCの提案
「Vue Macrosとコミュニティ提案」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
script setupのコンパイラーマクロ
<script setup>では、Vueがコンパイラーマクロを提供します。definePropsやdefineEmitsなどの関数は、ランタイムでインポートされるのではなく、コンパイル時に処理されます。Vue 3.4以降ではさらに多くのマクロが追加され、コミュニティのvue-macrosプロジェクトでは、より多くのマクロが試されています。
vue-macros：実験の場
vue-macrosは、Vueコアに先行して（またはコアの範囲を超えて）実験的なマクロを提供するコミュニティライブラリです。成功したアイデアがコアに取り入れられることもあり、defineModelも安定版になる前はここから始まりました。
// vite.config
import VueMacros from 'unplugin-vue-macros/vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [VueMacros({ plugins: { vue: vue() } })]
})defineModel：従来の方法
defineModelが登場する前は、コンポーネントでv-modelを実装するために、modelValueプロパティを宣言し、update:modelValueを手動でemitする必要がありました。冗長で、ミスも起こりやすい方法です。
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) {
emit('update:modelValue', e.target.value)
}
</script>defineModel：Vue 3.4で安定版に
defineModelはVue 3.4で安定版になりました。プロパティと更新イベントに自動的に接続された、書き込み可能なrefを返します。読み取ると値を取得でき、代入すると更新イベントが発行されます。
<script setup>
const model = defineModel()
// model.value reads modelValue
// model.value = x emits update:modelValue
</script>
<template>
<input v-model="model" />
</template>名前付き・型付きdefineModel
defineModelは名前付きモデル（v-model:title）と、definePropsと同様にrequiredや型などのオプションに対応しています。
<script setup>
const title = defineModel('title', { type: String, required: true })
const count = defineModel('count', { default: 0 })
</script>複数のv-modelを簡単に扱う
名前付きモデルを使うと、コンポーネントから複数の双方向バインディングをすっきり公開できます。以前は、多数のプロパティとemitの組み合わせが必要でした。
<!-- parent -->
<UserForm v-model:name="name" v-model:email="email" />
<!-- UserForm script setup -->
<!-- const name = defineModel('name') -->
<!-- const email = defineModel('email') -->defineOptions
defineOptions（Vue 3.3で安定版）は、nameやinheritAttrsなどのコンポーネントオプションを<script setup>内で直接設定できるようにします。これにより、2つ目の<script>ブロックが不要になります。
<script setup>
defineOptions({
name: 'UserCard',
inheritAttrs: false
})
</script>nameとinheritAttrsが重要な理由
コンポーネントのnameは、devtoolsや再帰利用、<KeepAlive>のinclude/excludeで役立ちます。inheritAttrs: falseを指定すると属性の自動フォールスルーを停止でき、v-bind="$attrs"によって特定の内部要素にattrsを配置できます。
<script setup>
defineOptions({ inheritAttrs: false })
</script>
<template>
<div class="wrapper">
<input v-bind="$attrs" />
</div>
</template>その他の注目すべきマクロ
Vueには、親のrefからアクセスできる内容を制御するdefineExpose、スロットに型を付けるdefineSlots、型ベースのプロパティにデフォルト値を設定するwithDefaultsもあります。これらを知っておくと、<script setup>のツールキットを一通り使いこなせます。
<script setup lang="ts">
const props = withDefaults(
defineProps<{ size?: 'sm' | 'lg' }>(),
{ size: 'sm' }
)
defineExpose({ focus })
</script>実験的か安定版か：慎重に選ぶ
コアに含まれる安定版マクロ（defineModel、defineOptions）は本番環境でも安全に使用できます。vue-macrosの実験的な機能はプロトタイピングや早期導入に役立ちますが、APIが変更される可能性があります。本番アプリに組み込む際は慎重に扱ってください。
コミュニティの提案を追う
新しいアイデアはRFCやvue-macrosに登場します。これらを追うことで、フレームワークが今後どの方向に進むのかを予測しやすくなり、機能が安定する前にフィードバックを届けられます。
理解度チェック
Vueマクロについての理解度を確認しましょう。
まとめ
マクロと提案について学びました。
vue-macrosは実験的なマクロを提供し、その一部はコアに取り入れられています- defineModel（3.4で安定版）はコンポーネントの
v-modelを簡潔にします - 名前付き・型付きモデルによって、複数の双方向バインディングをすっきり定義できます
- defineOptionsは
<script setup>内でnameとinheritAttrsを設定します - 本番環境では安定版マクロを優先し、実験的な機能は慎重に扱います
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 42
- レッスン
- 156
よくある質問
「Vue Macrosとコミュニティ提案」レッスンは無料ですか？
はい。「Vue Macrosとコミュニティ提案」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「Vue Macrosとコミュニティ提案」で何を学びますか？
vue-macrosライブラリ、実験的なdefineModel、defineOptions、setupSFCの提案 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Vue Macrosとコミュニティ提案」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vue Vapor Mode：コンパイル時最適化
- Viteエコシステム：プラグインとツール
- Vue Macrosとコミュニティ提案
- 2025年以降に適したVueスタックの選び方