Vue

概要

Vue 3 は、テンプレート構文と Composition API を使って UI を組み立てる JavaScript フレームワークです。このチートシートでは、リアクティビティ、テンプレート、ライフサイクル、props / emit、Composables、Router、Pinia、フォームをまとめます。

最初に覚える最小セット

Vue では、テンプレート内は自動アンラップされますが、script 内の ref は .value が必要です。props は読み取り専用で、子から親へ変更を伝える場合は emit を使います。

リアクティビティ基礎

<script setup>
import { ref, reactive, computed } from 'vue'

const count = ref(0)
const user = reactive({
 name: 'Alice',
 age: 25
})

const doubled = computed(() => count.value * 2)

function increment() {
 count.value++
}
</script>

<template>
 <p>{{ count }} - {{ doubled }}</p>
 <button @click="increment">+1</button>
 <p>{{ user.name }} ({{ user.age }})</p>
</template>

テンプレート構文

<template>
 <img :src="imageUrl" :alt="title">
 <button @click="handleClick">Click</button>
 
 <div v-if="isVisible">表示中</div>
 <div v-else>非表示</div>

 <ul>
 <li v-for="item in items" :key="item.id">
 {{ item.name }}
 </li>
 </ul>

 <input v-model="text" type="text">
</template>

ライフサイクルフック

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const count = ref(0)
let timer = null

onMounted(() => {
 console.log('Component mounted')
 timer = setInterval(() => {
 count.value++
 }, 1000)
})

onUnmounted(() => {
 console.log('Component unmounted')
 clearInterval(timer)
})
</script>

コンポーネント Props と Emit

<!-- Child.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
 title: String,
 count: {
 type: Number,
 default: 0
 }
})

const emit = defineEmits(['increment', 'decrement'])

function handleClick() {
 emit('increment', props.count + 1)
}
</script>

<template>
 <h2>{{ title }}</h2>
 <p>{{ count }}</p>
 <button @click="handleClick">+1</button>
</template>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const count = ref(0)

function onIncrement(newValue) {
 count.value = newValue
}
</script>

<template>
 <Child title="My Counter" :count="count" @increment="onIncrement" />
</template>

Composables（再利用ロジック）

// useCounter.js
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
 const count = ref(initialValue)

 function increment() {
 count.value++
 }

 function decrement() {
 count.value--
 }

 return {
 count,
 increment,
 decrement
 }
}

<script setup>
import { useCounter } from './useCounter'

const { count, increment, decrement } = useCounter(10)
</script>

<template>
 <p>{{ count }}</p>
 <button @click="increment">+</button>
 <button @click="decrement">-</button>
</template>

Vue Router

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
 { path: '/', component: Home },
 { path: '/about', component: About },
 { path: '/user/:id', component: User }
]

export const router = createRouter({
 history: createWebHistory(),
 routes
})

<script setup>
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

function goToAbout() {
 router.push('/about')
}

console.log(route.params.id)
</script>

<template>
 <nav>
 <router-link to="/">Home</router-link>
 <router-link to="/about">About</router-link>
 </nav>
 <router-view />
</template>

Pinia（状態管理）

// stores/counter.js
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
 const count = ref(0)
 const doubled = computed(() => count.value * 2)

 function increment() {
 count.value++
 }

 return {
 count,
 doubled,
 increment
 }
})

<script setup>
import { useCounterStore } from './stores/counter'

const counter = useCounterStore()
</script>

<template>
 <p>{{ counter.count }} - {{ counter.doubled }}</p>
 <button @click="counter.increment">+1</button>
</template>

フォームバインディング

<script setup>
import { ref } from 'vue'

const text = ref('')
const checked = ref(false)
const selected = ref('')
</script>

<template>
 <input v-model="text" type="text">
 <input v-model="checked" type="checkbox">
 <select v-model="selected">
 <option value="A">Option A</option>
 <option value="B">Option B</option>
 </select>
</template>

クラスとスタイルバインディング

<template>
 <div :class="{ active: isActive, 'text-danger': hasError }">
 テキスト
 </div>

 <div :class="[baseClass, { active: isActive }]">
 配列形式
 </div>

 <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
 スタイル
 </div>
</template>

スロット

<!-- Card.vue -->
<template>
 <div class="card">
 <div class="card-header">
 <slot name="header">デフォルトヘッダー</slot>
 </div>
 <div class="card-body">
 <slot>デフォルト本文</slot>
 </div>
 </div>
</template>

<!-- 使用側 -->
<Card>
 <template #header>
 <h2>タイトル</h2>
 </template>
 <p>本文テキスト</p>
</Card>

まとめ

Vue 3 では、ref / reactive、computed、watch、テンプレート構文、props / emit、Composables を押さえると基本的な画面を組み立てられます。Router と Pinia は、ルーティングや共有状態が必要になってから導入します。

.value の有無、v-for の :key、props の読み取り専用ルールはつまずきやすい点です。詳細は公式ガイドで確認してください。

参考リソース

• Vue 3 Documentation - 公式ドキュメント
• Vue Router Documentation - Vue Router 公式
• Pinia Documentation - Pinia 公式
• Vue 3 Migration Guide - Vue 2 からの移行ガイド

関連記事

• TypeScript チートシート - TypeScript のリファレンス

×

PR

×

PR