Vue.js チートシート

ディレクティブ (テンプレート構文)

HTML テンプレート内で DOM を操作するための特別な属性です。

ディレクティブ説明使用例
v-text要素の `textContent` を更新します。内部の既存コンテンツは上書きされます。<span v-text="message"></span>
v-html要素の `innerHTML` を更新します。XSS 脆弱性に注意が必要です。Vue テンプレート構文は処理されません。<div v-html="rawHtml"></div>
v-show条件に基づいて要素の CSS `display` プロパティを切り替えて表示/非表示を制御します。要素は常にレンダリングされます。<p v-show="isVisible">表示されています</p>
v-if条件に基づいて要素をレンダリングします。条件が false の場合、要素とその中のコンポーネント/ディレクティブは破棄されます。<div v-if="type === 'A'">タイプAです</div>
v-else-if`v-if` または `v-else-if` の後に続く条件ブロックです。先行する条件が false で、自身の条件が true の場合にレンダリングされます。<div v-else-if="type === 'B'">タイプBです</div>
v-else`v-if` または `v-else-if` の後に続くブロックです。先行する全ての条件が false の場合にレンダリングされます。<div v-else>その他のタイプです</div>
v-for配列やオブジェクトに基づいて要素またはテンプレートブロックを複数レンダリングします。
<ul> <li v-for="(item, index) in items" :key="item.id"> {{ index }} - {{ item.name }} </li>
</ul>
<div v-for="(value, key) in object" :key="key"> {{ key }}: {{ value }}
</div>
v-on (省略形: @)DOM イベントを購読し、イベント発生時に JavaScript コードを実行します。イベント修飾子やキー修飾子を利用できます。
<button @click="doSomething">クリック</button>
<input @keyup.enter="onSubmit">
<form @submit.prevent="onSubmit"></form>
v-bind (省略形: :)HTML 属性をコンポーネントのプロパティにリアクティブにバインドします。クラスやスタイルには特別な機能(配列やオブジェクト構文)があります。
<img :src="imageUrl">
<div :class="{ active: isActive }"></div>
<a :[attributeName]="url">リンク</a>
v-modelフォームの input 要素やコンポーネントで双方向バインディングを作成します。input の種類に応じて適切な方法で動作します。
<input v-model="message">
<textarea v-model="text"></textarea>
<input type="checkbox" v-model="checked">
<select v-model="selectedOption"></select>
v-slot (省略形: #)名前付きスロットや、子コンポーネントからデータを受け取るスコープ付きスロットを指定します。
<MyComponent> <template #header>ヘッダーコンテンツ</template> <template #default="{ item }">{{ item.name }}</template>
</MyComponent>
v-preこの要素とその子要素のコンパイルをスキップします。生の Mustache タグを表示する場合などに使用します。<span v-pre>{{ これはコンパイルされません }}</span>
v-once要素とコンポーネントを一度だけレンダリングし、以降の更新をスキップします。静的なコンテンツのパフォーマンス最適化に使用します。<span v-once>これは変更されません: {{ msg }}</span>
v-memo要素またはコンポーネントのサブツリーの更新をメモ化します。依存配列の値が変更された場合のみ再レンダリングします。パフォーマンス最適化用です。<div v-memo="[valueA, valueB]">...</div>
v-cloakVue インスタンスがコンパイルを完了するまで、この要素を非表示にします。未コンパイルのマスタッシュ構文が一瞬表示されるのを防ぎます。CSS ルールと組み合わせて使用します。
[v-cloak] { display: none; }
<div v-cloak>{{ message }}</div>

コンポーネント (Component)

UI を再利用可能な独立した部品に分割するための仕組みです。

概念/API説明例 (SFC – <script setup> 形式)
定義 (SFC).vue 拡張子を持つ単一ファイルコンポーネントで定義します。<template>, <script>, <style> ブロックで構成されます。
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template> <button @click="count++">Clicked {{ count }} times</button>
</template>
<style scoped>
button { color: red; }
</style>
登録 (ローカル)親コンポーネントの <script> ブロック内でインポートし、<template> 内で使用します。
<script setup>
import MyComponent from './MyComponent.vue'
</script>
<template> <MyComponent />
</template>
登録 (グローバル)アプリケーションインスタンスの .component() メソッドで登録します。アプリ全体で利用可能になります。 (通常 main.js などで設定)
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import GlobalComponent from './GlobalComponent.vue'
const app = createApp(App)
app.component('GlobalComponent', GlobalComponent) // グローバル登録
app.mount('#app')
プロパティ (Props)親コンポーネントから子コンポーネントへデータを渡すためのカスタム属性です。defineProps で定義します。
<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({ message: String, count: { type: Number, default: 0 }
})
</script>
<template> <p>{{ message }} - {{ count }}</p>
</template>
<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
<template> <ChildComponent message="こんにちは" :count="10" />
</template>
イベント (Emits)子コンポーネントから親コンポーネントへイベントを通じて通知やデータを送る仕組みです。defineEmits で発行可能なイベントを定義し、emit 関数でイベントを発行します。
<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['response'])
emit('response', '子からのメッセージ!')
</script>
<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'
function handleResponse(msg) { console.log(msg) // '子からのメッセージ!'
}
</script>
<template> <ChildComponent @response="handleResponse" />
</template>
スロット (Slots)親コンポーネントが子コンポーネントのテンプレートの一部にコンテンツを挿入できるようにする仕組みです。デフォルトスロット、名前付きスロット、スコープ付きスロットがあります。
<!-- ChildComponent.vue -->
<template> <div> <header><slot name="header">デフォルトヘッダー</slot></header> <main><slot>デフォルトコンテンツ</slot></main> <footer><slot name="footer" :text="footerText"></slot></footer> </div>
</template>
<script setup>
import { ref } from 'vue'
const footerText = ref('フッターデータ')
</script>
<!-- ParentComponent.vue -->
<script setup>
import ChildComponent from './ChildComponent.vue'
</script>
<template> <ChildComponent> <template #header><h1>カスタムヘッダー</h1></template> <p>メインコンテンツ</p> <template #footer="{ text }"><i>カスタムフッター: {{ text }}</i></template> </ChildComponent>
</template>
動的コンポーネント特別な <component> 要素と :is 属性を使って、実行時にコンポーネントを動的に切り替えます。
<script setup>
import { ref, shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'
const currentComp = shallowRef(CompA)
</script>
<template> <button @click="currentComp = CompA">A表示</button> <button @click="currentComp = CompB">B表示</button> <component :is="currentComp" />
</template>
<keep-alive>非アクティブなコンポーネントインスタンスを破棄する代わりにキャッシュします。動的コンポーネントやルータービューと組み合わせて使用します。
<keep-alive> <component :is="currentView" />
</keep-alive>
<Teleport>コンポーネントのテンプレートの一部を、コンポーネント階層外の DOM ノードに「テレポート」させます。モーダルや通知などに便利です。
<button @click="showModal = true">モーダル表示</button>
<Teleport to="body"> <div v-if="showModal" class="modal"> モーダルコンテンツ <button @click="showModal = false">閉じる</button> </div>
</Teleport>
<Suspense>非同期コンポーネントの依存関係が解決されるのを待つ間に、ローディング状態を表示します。実験的な機能です。
<Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>読み込み中...</div> </template>
</Suspense>

リアクティビティ & 状態管理 (Reactivity & State Management)

データの変更を検知し、自動的に DOM を更新する仕組みと、アプリケーション全体の状態を管理する手法です。

概念/API説明例 (Composition API)
refプリミティブ値(String, Number, Boolean など)をリアクティブな参照にラップします。値へのアクセス/変更には .value を使用します。
import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++
reactiveオブジェクトをリアクティブなプロキシに変換します。ネストされたプロパティもリアクティブになります。ref と異なり .value は不要です。
import { reactive } from 'vue'
const state = reactive({ count: 0, user: { name: 'Vue' } })
console.log(state.count) // 0
state.count++
state.user.name = 'User'
computedリアクティブな依存関係に基づいて算出される値を定義します。依存データが変更されると自動的に再計算されます。結果はキャッシュされます。
import { ref, computed } from 'vue'
const count = ref(1)
const doubleCount = computed(() => count.value * 2)
console.log(doubleCount.value) // 2
count.value = 2
console.log(doubleCount.value) // 4
watch特定のリアクティブなソース(ref, reactive オブジェクト, getter 関数, またはそれらの配列)を監視し、値が変更されたときにコールバック関数を実行します。
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => { console.log(`count changed from ${oldValue} to ${newValue}`)
})
count.value = 1 // ログが出力される
watchEffectリアクティブな依存関係を自動的に追跡し、依存関係が変更されると即座にコールバック関数を再実行します。初期実行も行われます。
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => { console.log(`現在のカウント: ${count.value}`) // 初期実行 + count 変更時に実行
})
count.value = 1
Pinia (状態管理)Vue の公式状態管理ライブラリ(Vuex の後継)。型安全で直感的な API を提供します。ストア(State, Getters, Actions)を定義して使用します。
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'Counter' }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++ }, },
})
// MyComponent.vue
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count, doubleCount } = storeToRefs(store) // リアクティビティ維持
const { increment } = store // アクションはそのまま使える
Provide / Inject祖先コンポーネントから子孫コンポーネントへ、階層の深さに関わらずデータを直接渡す仕組みです。「プロパティのバケツリレー」を避けるのに役立ちます。
// ParentComponent.vue
import { provide, ref } from 'vue'
const location = ref('北極')
provide('location', location) // 'location' というキーで提供
// ChildComponent.vue (階層はどこでも良い)
import { inject } from 'vue'
const location = inject('location') // 'location' キーで注入
console.log(location.value) // '北極'

ライフサイクルフック (Lifecycle Hooks)

コンポーネントインスタンスの特定の段階で実行される関数です。

フック (Composition API)フック (Options API)説明
(setup 内)beforeCreateインスタンスが初期化され、props が解決された後、リアクティブなデータなどがセットアップされる前に呼ばれます。Composition API の setup 関数内で直接記述されたコードに相当します。
(setup 内)createdリアクティブなデータ、算出プロパティ、メソッド、ウォッチャなどがセットアップされた後に呼ばれます。DOM マウントはまだ開始されていません。Composition API の setup 関数内で直接記述されたコードの多くがこの段階に相当します。
onBeforeMountbeforeMountコンポーネントが DOM にマウントされる直前に呼ばれます。初回レンダリングはまだ行われていません。
onMountedmountedコンポーネントが DOM にマウントされた後に呼ばれます。DOM へのアクセスが可能になります。子コンポーネント全てのマウントも保証されます。サーバーサイドレンダリングでは呼ばれません。
onBeforeUpdatebeforeUpdateリアクティブなデータの変更により、コンポーネントの DOM ツリーが更新される直前に呼ばれます。パッチ適用前の DOM 状態にアクセスできます。
onUpdatedupdatedリアクティブなデータの変更により、コンポーネントの DOM ツリーが更新された後に呼ばれます。
onBeforeUnmountbeforeUnmount (Vue 3) / beforeDestroy (Vue 2)コンポーネントインスタンスがアンマウントされる直前に呼ばれます。インスタンスはまだ完全に機能しています。
onUnmountedunmounted (Vue 3) / destroyed (Vue 2)コンポーネントインスタンスがアンマウントされた後に呼ばれます。イベントリスナ、ウォッチャ、子コンポーネントなどは全て解除/破棄されています。
onErrorCapturederrorCaptured任意の子孫コンポーネントからキャプチャされたエラー発生時に呼ばれます。エラー処理に使用できます。
onRenderTrackedrenderTracked(開発モードのみ) リアクティブな依存関係が仮想 DOM の再レンダリングによって追跡されたときに呼ばれます。デバッグ用です。
onRenderTriggeredrenderTriggered(開発モードのみ) リアクティブな依存関係が仮想 DOM の再レンダリングをトリガーしたときに呼ばれます。デバッグ用です。
onActivatedactivated<KeepAlive> 内のコンポーネントがキャッシュから挿入されたときに呼ばれます。
onDeactivateddeactivated<KeepAlive> 内のコンポーネントがキャッシュされ、削除されたときに呼ばれます。
// Composition API でのフック使用例
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => { console.log('Component Mounted!')
})
onUpdated(() => { console.log('Component Updated!')
})
onUnmounted(() => { console.log('Component Unmounted!')
})

シングルページアプリケーション (SPA) でのページ遷移を管理する公式ライブラリです。

概念/API説明
インストールnpm または yarn を使ってプロジェクトに追加します。npm install vue-router@4 (Vue 3)
ルーター設定createRouter でルーターインスタンスを作成し、ルート定義 (パスとコンポーネントのマッピング) と履歴モード (createWebHistory or createWebHashHistory) を指定します。通常 router/index.js などで設定します。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') } // 遅延読み込み
]
const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes
})
export default router
メインファイルへの統合作成したルーターインスタンスを Vue アプリケーションインスタンスに登録します。(通常 main.js)
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // ルーターをインポート
createApp(App).use(router).mount('#app') // .use(router) で登録
<router-link>宣言的なナビゲーションのためのコンポーネント。to プロパティでターゲットルートを指定します。デフォルトでは <a> タグとしてレンダリングされます。アクティブなリンクには自動的にクラスが付与されます。
<router-link to="/">ホーム</router-link>
<router-link :to="{ name: 'about' }">About</router-link>
<router-view>現在のルートにマッチしたコンポーネントを描画するためのプレースホルダーです。
<!-- App.vue など -->
<template> <header>共通ヘッダー</header> <main> <router-view /> <!-- ここにルートコンポーネントが描画される --> </main> <footer>共通フッター</footer>
</template>
プログラムナビゲーションJavaScript 内からルート遷移を行います。useRouter (Composition API) または this.$router (Options API) を使用します。
// Composition API
import { useRouter } from 'vue-router'
const router = useRouter()
function goToAbout() { router.push('/about') // router.push({ name: 'about' }) // router.replace('/about') // 履歴に残さない
}
// Options API
// methods: {
// goToAbout() {
// this.$router.push('/about')
// }
// }
ルートパラメータURL パスの一部を動的に変化させ、コンポーネントにデータを渡します (例: /users/:id)。useRoute (Composition API) または this.$route.params (Options API) でアクセスします。
// ルート定義
// { path: '/users/:id', name: 'user', component: UserView }
// UserView.vue (Composition API)
import { useRoute } from 'vue-router'
const route = useRoute()
const userId = route.params.id
// UserView.vue (Options API)
// computed: {
// userId() {
// return this.$route.params.id
// }
// }
ナビゲーションガードルート遷移の前、途中、後で実行されるフック関数。認証チェック、データ取得、遷移キャンセルなどに使用します。グローバルガード、ルートごとのガード、コンポーネント内のガードがあります。
// グローバルガード (router/index.js)
router.beforeEach((to, from, next) => { if (to.meta.requiresAuth && !isAuthenticated()) { next({ name: 'login' }) // ログインページへリダイレクト } else { next() // 遷移を許可 }
})
// コンポーネント内ガード (Composition API)
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave((to, from, next) => { const answer = window.confirm('本当に離れますか?変更が保存されていません。') if (!answer) return next(false) // 遷移をキャンセル next()
})
ネストされたルートコンポーネント内にさらに <router-view> を配置し、親子関係のあるルート構造を作成します。ルート定義の children プロパティで設定します。
// ルート定義
// {
// path: '/user/:id',
// component: UserLayout,
// children: [
// { path: '', component: UserProfile }, // /user/:id
// { path: 'posts', component: UserPosts } // /user/:id/posts
// ]
// }
// UserLayout.vue
// <template>
// <div>ユーザー情報</div>
// <router-view /> <!-- ここに UserProfile か UserPosts が表示される -->
// </template>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です