Vue

リアクティビティ基礎

<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 Documentation - 公式ドキュメント
• Vue Router Documentation - Vue Router 公式
• Pinia Documentation - Pinia 公式
• Vue 3 Migration Guide - Vue 2 からの移行ガイド

関連記事

• TypeScript チートシート - TypeScript のリファレンス
• JavaScript 基礎 - JavaScript の基本を復習