0Pricing
Vue Academy · レッスン

2025年以降に適したVueスタックの選び方

Vue + Vite + Pinia + NuxtとSPAの比較、TypeScriptの導入、Vueのテストピラミッド

「2025年以降に適したVueスタックの選び方」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

唯一の正解となるスタックはない

適切なVueスタックは、アプリの要件、SEO、インタラクティブ性、デプロイ先、チームの規模によって異なります。このレッスンでは、一般的な要件と推奨スタックの対応を整理し、慣例ではなく意図を持って選択できるようにします。

従来型SPAスタック

ログイン後に利用するアプリ型のダッシュボードなど、SEOが重要でない場合は、クライアントレンダリングのSPAが適しています。構成はVite + Vue + Pinia + Vue Routerです。開発が速く、任意の静的ホストに簡単にデプロイでき、クライアント側のインタラクティビティを十分に活用できます。

// SPA building blocks
// vite          -> dev server + build
// vue           -> UI
// pinia         -> state management
// vue-router    -> client routing

SPAが適さない場合

SPAは最初に空のシェルを配信し、その後ブラウザーで描画します。そのため、公開コンテンツのSEOやFirst Contentful Paintに悪影響が出ます。検索順位やソーシャルメディアのプレビューが重要なら、サーバーレンダリングが必要です。

SSRとSEOのためのNuxt 3

Nuxt 3は、サーバーサイドレンダリング、ファイルベースルーティング、自動インポート、サーバールート（Nitro）、SEOヘルパーを備えた、必要な機能が揃ったメタフレームワークです。マーケティングサイト、ブログ、eコマースなど、クローラーが読み取れるHTMLが必要なものに適しています。

// Nuxt page with SEO meta
<script setup>
useSeoMeta({
  title: 'Product Page',
  description: 'Best widget around'
})
</script>

Nuxtの静的生成

めったに変更されないコンテンツでは、nuxt generateを使ってビルド時にページを静的HTMLとして事前レンダリングできます（SSG）。実行中のサーバーがなくてもSEOと高速な読み込みを実現でき、任意のCDNにデプロイできます。

# pre-render to static HTML
npx nuxi generate
# output in .output/public, deploy to a CDN

レンダリングモード早見表

コンテンツに合わせてモードを選びます。

  • SPA — 非公開アプリ、ダッシュボード
  • SSR (Nuxt) — SEOが必要な動的な公開ページ
  • SSG (nuxt generate) — ほぼ静的なコンテンツ（ドキュメント、ブログ）
  • Hybrid — Nuxtのroute rulesで、ルートごとにSSR・SSG・ISRを組み合わせます
// nuxt.config: per-route rendering rules
routeRules: {
  '/': { prerender: true },
  '/admin/**': { ssr: false },
  '/news/**': { swr: 60 }
}

どこでもTypeScript

2025年には、コンポーネント、ストア、composable、サーバールートを含むスタック全体で、TypeScriptをデフォルトとして採用することが推奨されます。<script setup lang="ts">と、型付きのprops・emits・modelsを使うことで、コンパイル時にバグを検出でき、優れたエディターサポートも利用できます。

<script setup lang="ts">
const props = defineProps<{ id: number; title: string }>()
const emit = defineEmits<{ save: [id: number] }>()
</script>

状態管理はデフォルトでPinia

Piniaは公式の状態管理ライブラリです。型に対応し、devtoolsとの相性がよく、composableに組み込めます。サーバーデータの取得やキャッシュには、NuxtのuseFetch・useAsyncData、またはTanStack Queryのようなライブラリを組み合わせてください。

import { defineStore } from 'pinia'

export const useCart = defineStore('cart', () => {
  const items = ref([])
  const total = computed(() => items.value.length)
  return { items, total }
})

テストピラミッド

バランスの取れたテスト戦略は、ピラミッド型になります。高速な単体テストを多く用意し、コンポーネントテストをそれより少なく、エンドツーエンドテストは重要なものに絞ります。推奨ツールは、単体テストにVitest、コンポーネントテストにVue Test Utils、E2EにPlaywrightです。

Vitest + Vue Test Utils

Vitestは、Viteの設定を共有しながら、単体テストとコンポーネントテストを高速に実行します。Vue Test Utilsはコンポーネントをマウントし、描画結果とインタラクションを検証できるようにします。

import { mount } from '@vue/test-utils'
import { test, expect } from 'vitest'
import Counter from './Counter.vue'

test('increments', async () => {
  const w = mount(Counter)
  await w.find('button').trigger('click')
  expect(w.text()).toContain('1')
})

E2EにはPlaywright

Playwrightは実際のブラウザーを操作し、実行中のアプリでログイン、ナビゲーション、フォームなど、ユーザーの一連の操作をテストします。テスト数は少なく保ちつつ、重要な経路を網羅する価値の高いテストにしてください。

import { test, expect } from '@playwright/test'

test('user logs in', async ({ page }) => {
  await page.goto('/login')
  await page.fill('#email', 'a@b.com')
  await page.click('button[type=submit]')
  await expect(page).toHaveURL('/dashboard')
})

理解度チェック

Vueスタックの選び方についての理解度を確認しましょう。

まとめ

2025年に向けたVueスタックの選び方を学びました。

  • 非公開アプリにはSPA（Vite + Vue + Pinia + Router）
  • SSR・SEOにはNuxt 3、静的サイトにはnuxt generate
  • スタック全体でTypeScriptを使うことが推奨されるデフォルトです
  • 状態管理にはPinia
  • テストピラミッドにはVitest + Vue Test Utils + Playwright

よくある質問

「2025年以降に適したVueスタックの選び方」レッスンは無料ですか？

はい。「2025年以降に適したVueスタックの選び方」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「2025年以降に適したVueスタックの選び方」で何を学びますか？

Vue + Vite + Pinia + NuxtとSPAの比較、TypeScriptの導入、Vueのテストピラミッド ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「2025年以降に適したVueスタックの選び方」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Vue Vapor Mode：コンパイル時最適化
  2. Viteエコシステム：プラグインとツール
  3. Vue Macrosとコミュニティ提案
  4. 2025年以降に適したVueスタックの選び方
← Vue Academyに戻る