Posted inDevelopment

Vue 3 + Pinia + TypeScript：実務プロジェクトにおける状態管理（State Management）の課題を解決する

Development tutorial - IT technology blog
Development tutorial - IT technology blog

深夜2時のショッピングカートのバグ修正

画面はちらつき、3杯目のコーヒーはすっかり冷めてしまった。これは、ECサイトで「ページを遷移するとカートが突然空になる」という不可解なバグに直面した時の私の実体験です。3時間かけてコードを遡った結果、プロジェクトが「Prop Drilling」という罠に陥っていることに気づきました。

ユーザーデータは、App.vueからLayoutへ、さらにHeaderを通り、Navbarを経由してようやくCartWidgetに届くという、過酷な道のりを辿っていました。どこか一つの階層でemitの処理を忘れたり、データ型を間違えたりするだけで、ロジック全体がドミノ倒しのように崩壊してしまいます。

5人体制の最近のプロジェクトでは、PiniaとTypeScriptを組み合わせて使用することにしました。その結果は驚くべきもので、新機能の開発スピードは約30%向上しました。タイピングの時点ですべてが厳密に管理されるため、TypeScriptにおけるプロフェッショナルなエラー管理が可能になり、データに関する些細なミスはほとんど姿を消したのです。

なぜ従来の状態管理手法は失敗しやすいのか？

問題はVue 3にあるのではありません。アプリケーションが肥大化し始めたときのデータの整理方法に問題があるのです。主に3つの大きな障壁があります：

  • データの分散: コンポーネントAでの変更がコンポーネントBに伝わらず、UIの不整合が発生する。
  • メンテナンスの負担: 4〜5層もの中間階層を介してPropsを渡すため、コードが非常に複雑になる。新しいフィールドを追加する際、経路上のすべてのコンポーネントを修正しなければならない。
  • ランタイムのリスク: 純粋なJavaScriptでは、user.idが存在するか確信が持てない。undefinedによる予期せぬクラッシュが、ユーザーのブラウザ上で頻繁に発生する。

過去の解決策を振り返る

私はこれまで多くの方法を試してきましたが、それぞれに弱点がありました：

  1. Event Bus: まさにカオス。大規模プロジェクトでは、誰がイベントを発火させ、誰がそれを受信しているのか把握できなくなります。
  2. Vuex: かつての標準でしたが、冗長すぎます。Mutations、Actions、Gettersを個別に記述する必要があり、ファイルが肥大化します。特にTypeScriptのサポートが不十分でした。
  3. Provide/Inject: 小規模なアプリには適しています。しかし、DevToolsなどの強力なサポートツールや、状態のタイムトラベルデバッグ機能が不足しています。

最強のコンボ：Vue 3 + Pinia + TypeScript

Piniaは現在、プロダクション環境における最適な選択肢です。サイズは約1.5kbとVuexより遥かに軽量で、大規模アプリケーションの再レンダリングを最適化するための、Composition APIに近い直感的なAPIを提供しています。

1. Viteによるプロジェクトの初期化

古いVue CLIの代わりに、爆速のビルドスピードを誇るViteを使いましょう。ターミナルで以下のコマンドを実行します：

npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install pinia

2. Alias（エイリアス）設定の最適化

../../../../のような相対パスでコードを埋め尽くさないようにしましょう。vite.config.tsを開き、srcディレクトリを指す@エイリアスを設定します：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

注意：TypeScriptがこの@記号を認識できるように、tsconfig.jsonのcompilerOptions.pathsも更新する必要があります。

3. モダンなスタイルでのストア定義

Option API形式ではなく、Setup Store形式を推奨します。これにより、ロジックを非常に効率的にグループ化できます。

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

interface UserProfile {
  id: number
  name: string
  email: string
}

export const useUserStore = defineStore('user', () => {
  const profile = ref<UserProfile | null>(null)
  const isLoading = ref(false)
  const isLoggedIn = computed(() => !!profile.value)

  async function fetchUser(id: number) {
    isLoading.value = true
    try {
      const response = await fetch(`https://api.example.com/users/${id}`)
      profile.value = await response.json()
    } catch (error) {
      console.error('APIエラー:', error)
    } finally {
      isLoading.value = false
    }
  }

  return { profile, isLoading, isLoggedIn, fetchUser }
})

最大のメリットは自動補完（Auto-complete）機能です。userStore.profile.と入力すると、VS Codeが正確なフィールドを提案してくれます。これにより、ケアレスミスによるスペルミスを完全に排除できます。

4. コンポーネントでのストア利用

データの取得は非常にシンプルになります。コンポーネントの階層を気にすることなく、どこからでもストアを呼び出すことができます。

<script setup lang="ts">
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const loadData = () => userStore.fetchUser(1)
</script>

<template>
  <div v-if="userStore.isLoading">読み込み中...</div>
  <div v-else>
    <h1>こんにちは、{{ userStore.profile?.name }}さん</h1>
    <button @click="loadData">データを読み込む</button>
  </div>
</template>

プロダクション環境での実践的なTips

アプリケーションを真に安定させるには、Piniaをインストールするだけでは不十分です。私が常に適用している3つのテクニックを紹介します：

状態の永続化 (Persistence): ページをリロード（F5）してカートの内容が消えてしまうと、ユーザーは不快に感じます。pinia-plugin-persistedstateを使用して、LocalStorageにデータを自動同期させましょう。

分割統治 (Modularization): NxでFull-stack TypeScript Monorepoを管理する際のように、巨大なストアを一つ作るのではなく、authStore、cartStore、productStoreのように分割します。Piniaでは、これらのストア間で柔軟に相互連携が可能です。

APIデータのバリデーション: TypeScriptはコーディング時の守りです。Pactによるコントラクトテストと同様に、実際のAPIデータは予期せぬ形式で返ってくることがあります。Zodなどのライブラリを併用し、サーバーからのレスポンスを受け取った瞬間に型チェックを行うのがベストプラクティスです。

最後に

バグ修正で徹夜した日々を振り返ると、一つの教訓にたどり着きます。「最初にアーキテクチャに投資する方が、後でゴミを片付けるよりも常に安上がりである」ということです。PiniaとTypeScriptは単なるツールではなく、プロジェクトをより堅牢にするための骨組みです。

もしVue 3のプロジェクトを始めるなら、ぜひVite – Pinia – TypeScriptの三点セットを選んでください。最初はインターフェースの定義に少し時間がかかるかもしれませんが、プロジェクトが数百のコンポーネントに拡大したとき、この規律の価値を実感するはずです。

Share:
Tags: