web-vue

web-vue

目的

このスキルは、リアクティブなロジックに Composition API、状態管理に Pinia、ナビゲーションに Vue Router 4、モジュール開発に Single File Components（SFC）、高速なバンドルに Vite、サーバーサイドレンダリングと SEO 最適化に Nuxt 3 を使用して、最新の Vue 3 アプリケーションを構築するためのツールを提供します。

使用する場面

ダッシュボード、EC サイト、シングルページアプリケーション（SPA）など、リアクティブな UI を備えたインタラクティブな Web アプリを作成する際に、このスキルを使用します。効率的な状態管理、ルーティング、SSR が必要な場合、特に Vite で迅速な開発サイクルが求められるプロジェクトで活用してください。

主な機能

• Composition API：SFC 内で setup() を使用してリアクティブな変数を扱います。たとえば、const count = ref(0); でリアクティブな数値を作成します。
• Pinia：defineStore('main', { state: () => ({ count: 0 }), actions: { increment() { this.count++ } }) で、グローバル状態を管理するストアを定義します。
• Vue Router 4：createRouter({ history: createWebHistory(), routes: [{ path: '/', component: Home }] }) でルートを設定します。
• SFC：<script setup>、<template>、<style> セクションを含む .vue ファイルでコンポーネントを構成します。
• Vite：vite build --mode production で、最適化された出力を生成します。
• Nuxt 3：nuxi generate で SSR を有効にし、Vue アプリから静的サイトを生成します。

使用パターン

リアクティブなカウンターコンポーネントを作成するには、Vue から ref をインポートし、<script setup> 内で使用します：

<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template><button @click="increment">{{ count }}</button></template>

ルーティングを設定するには、ルーターのインスタンスを作成してマウントし、Vue Router を組み込みます：

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({ history: createWebHistory(), routes: [] });
app.use(router);

main.js で Pinia を設定します：app.use(createPinia());。コンポーネントでは useStore() を使ってストアにアクセスします。

主なコマンド／API

• Vite CLI：開発サーバーを実行するには vite、ベースパスを指定するには vite build --base /app/、ローカルでテストするには vite preview を実行します。
• Nuxt 3 CLI：開発には nuxi dev、本番ビルドには nuxi build、静的エクスポートには nuxi generate を使用します。
• Vue API：リアクティブな参照を作成するには ref(value)、プロキシオブジェクトを作成するには reactive(object)、派生状態を作成するには computed(() => expression) を呼び出します。
• Pinia API：defineStore('id', { state, getters, actions }) でストアを定義し、const store = useStore('id') でアクセスします。
• Vue Router API：ナビゲーションには router.push('/path') を使用するか、beforeEach((to, from, next) => { next(); }) でガードを設定します。 API キーが必要な場合（Nuxt で外部サービスを使用する場合など）は、.env ファイル内の $NUXT_PUBLIC_API_KEY のような環境変数で設定します。

統合に関する注意

Pinia を Vue アプリに統合するには、main.js でインポートして使用します：import { createPinia } from 'pinia'; app.use(createPinia());。Vue Router は Pinia の後に追加します：import { createRouter } from 'vue-router'; app.use(router);。Vite を使用する場合は、次のようなモジュールを使って vite.config.js で設定します：

import { defineConfig } from 'vite';
export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': '/src' } },
});

Nuxt 3 の場合は、nuxt.config.ts で Nuxt の設定を拡張します：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  router: { options: {} },
});

npm install vue@3 pinia vue-router@4 vite nuxt@3 を実行して、依存関係がインストールされていることを確認します。

エラー処理

依存関係の不足などの一般的なエラーが発生した場合は、npm のログを確認して npm install を実行します。Composition API でリアクティブ関連の問題が発生した場合は、ref に .value を使用します。たとえば、count が未定義の場合は、setup 内で定義されていることを確認します。Vue Router のエラー（重複するルートなど）はコンソールに表示されるため、routes 配列を検証して修正します。Vite で「Module not found」によってビルドに失敗する場合は、インポートのパスを確認するか、vite build --debug を実行して詳細を確認します。Nuxt では、serverMiddleware で SSR エラーを捕捉するか、asyncData 内で try-catch を使用します：

async asyncData() {
  try { const data = await fetchData(); return { data }; }
  catch (error) { console.error(error); return { error: 'Fetch failed' }; }
}

具体的な使用例

1. カウンターとルーティングを備えたシンプルな Vue 3 アプリを構築します。npm create vite@latest my-app -- --template vue で新しい Vite プロジェクトを作成し、npm install pinia で Pinia を追加して、ストアを設定し、router/index.js でルートを定義します。次に、App.vue でストアとルーターリンクを使用します。
2. SSR を使用する Nuxt 3 アプリを開発します。npx nuxi init my-nuxt-app から始め、npm install @pinia/nuxt などで依存関係をインストールし、stores/ に Pinia ストアを作成して、pages/index.vue で使用します。nuxi build で本番環境向けにビルドしてから、デプロイします。

グラフの関係

• 関連クラスター：web-dev
• 共有タグ：vue、components、web
• 関連スキル：React や一般的な Web フレームワーク向けなど、その他の web-dev スキル。