Vue.js 3完全入門ガイド【2026年版】｜Composition API・TypeScript・Piniaで構築するモダンWebアプリ

Vue.js 3はなぜエンジニアに選ばれるのか

Vue.js 3は、学習コストが低く・パフォーマンスが高く・TypeScriptフレンドリーなプログレッシブJavaScriptフレームワークです。Reactと比較してよりシンプルな設計哲学を持ち、中小規模のWebアプリからエンタープライズ規模まで幅広く活用されています。

1. プロジェクトのセットアップ

Viteを使ったVue.js 3プロジェクトを作成するには以下を実行します：

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

セットアップ時にTypeScript・Pinia・Vue Routerを有効にすることを推奨します。

2. Composition API の基礎（script setup）

Vue.js 3の最大の特徴がComposition APIです。Options APIと比べ、ロジックの再利用性が高く、TypeScriptとの相性も抜群です。

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const name = ref('Vue.js')
const doubleCount = computed(() => count.value * 2)

const increment = () => {
  count.value++
}

onMounted(() => {
  console.log('マウントされました')
})
</script>

<template>
  <div>
    <h1>こんにちは、{{ name }}！</h1>
    <p>カウント: {{ count }} / 2倍: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

3. Composablesでロジックを再利用する

Composablesは、Vue.js 3のComposition APIを使ってロジックを再利用可能な関数として切り出す仕組みです。ReactのCustom Hooksに相当します。

// composables/useFetch.ts
import { ref } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  const fetchData = async () => {
    loading.value = true
    try {
      const response = await fetch(url)
      data.value = await response.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, fetchData }
}

4. Pinia による状態管理

VuexからPiniaに移行することが現在の標準的なアプローチです。Piniaはより直感的なAPIとTypeScriptの完全サポートが特徴で、Vue公式の状態管理ライブラリとして推奨されています。

// stores/user.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const isLoading = ref(false)
  
  const isLoggedIn = computed(() => user.value !== null)
  
  async function login(email, password) {
    isLoading.value = true
    try {
      const response = await api.login(email, password)
      user.value = response.user
    } finally {
      isLoading.value = false
    }
  }
  
  function logout() {
    user.value = null
  }
  
  return { user, isLoading, isLoggedIn, login, logout }
})

5. Vue.js 3 vs React：エンジニアの選び方

6. Vue Router 4 による画面遷移

Vue Router 4はVue.js 3の公式ルーティングライブラリです。ナビゲーションガードを使った認証チェックや、動的インポートによるコード分割が簡単に実装できます。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('@/views/HomeView.vue') },
    {
      path: '/dashboard',
      component: () => import('@/views/DashboardView.vue'),
      meta: { requiresAuth: true }
    },
  ]
})

// 認証チェック
router.beforeEach((to) => {
  const isLoggedIn = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isLoggedIn) {
    return '/login'
  }
})

export default router

まとめ

Vue.js 3は、Composition API・TypeScript・Pinia・Viteの組み合わせにより、2026年現在でも競争力の高いフレームワークです。特に学習コストの低さと日本語ドキュメントの充実度は、他のフレームワークに勝る強みです。

まずは公式ドキュメントのクイックスタートから始め、小さなプロジェクトを作りながら学習を進めることをおすすめします。