Vue.js 開発において、Pinia のアーキテクチャを理解することで、より効率的な state 管理が可能になります。本記事では、Pinia の内部構造とリアクティビティシステムを図解で詳しく解説し、実践的な知識をお届けします。

Pinia は現代の Vue.js 開発に欠かせない state 管理ライブラリですが、その真の力を発揮するには内部アーキテクチャの理解が重要です。

背景

Pinia が選ばれる理由

Vue.js エコシステムにおいて、Pinia が注目される理由は明確です。従来の state 管理ライブラリと比較して、Pinia は開発者体験の向上と保守性の両立を実現しています。

TypeScript 完全対応により、型安全性が保証されます。また、Vue 3 の Composition API との親和性が高く、モダンな Vue.js 開発にシームレスに統合できるのです。

Vue DevTools との連携も優秀で、リアルタイムで state の変更を追跡できます。これにより、デバッグ作業が格段に効率化されるでしょう。

mermaidCopy codeflowchart LR
    vue[Vue.js アプリ] -->|state管理| pinia[Pinia]
    pinia -->|TypeScript対応| type[型安全性]
    pinia -->|Composition API| comp[モダン開発]
    pinia -->|DevTools| debug[デバッグ支援]
    type --> dev[開発者体験向上]
    comp --> dev
    debug --> dev

この図が示すように、Pinia は複数の要素が組み合わさって開発者体験を向上させています。特に型安全性とデバッグ支援は、大規模プロジェクトでの威力を発揮します。

従来の Vuex との違い

Vuex と比較すると、Pinia の優位性が明確に見えてきます。まず、boilerplate コードの大幅な削減が挙げられるでしょう。

項目	Vuex	Pinia
mutations	必須	不要
TypeScript 対応	複雑	ネイティブ
モジュール設計	階層構造	フラット
DevTools	基本対応	強化版
ファイルサイズ	大きい	軽量

Vuex では、state の変更に mutations が必須でしたが、Pinia では直接変更が可能です。これにより、コードの可読性が大幅に向上しています。

typescriptCopy code// Vuex（従来）
const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    increment(context) {
      context.commit('increment');
    },
  },
});

typescriptCopy code// Pinia（現在）
export const useCounterStore = defineStore(
  'counter',
  () => {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  }
);

このコード比較からも分かるように、Pinia は直感的で簡潔な記述が可能です。開発効率の向上に直結する改善と言えるでしょう。

リアクティビティシステムの重要性

Vue.js のリアクティビティシステムは、Pinia の心臓部と言っても過言ではありません。データの変更を自動的に検知し、関連するコンポーネントを効率的に更新します。

リアクティビティシステムの理解により、パフォーマンスの最適化が可能になります。不要な再レンダリングを避け、アプリケーションの応答性を向上させることができるのです。

mermaidCopy codesequenceDiagram
    participant Component as コンポーネント
    participant Store as Piniaストア
    participant Reactive as リアクティブシステム
    participant DOM as DOM

    Component->>Store: stateを参照
    Store->>Reactive: 依存関係を登録
    Note over Store,Reactive: データ変更時
    Store->>Reactive: 変更を通知
    Reactive->>Component: 更新をトリガー
    Component->>DOM: 再レンダリング

この図が示すリアクティビティフローは、Pinia の動作原理を理解する上で重要です。コンポーネントとストアの間で、効率的なデータ同期が行われています。

課題

複雑なストア設計の問題

大規模なアプリケーションでは、ストア設計の複雑さが課題となります。適切な設計なしでは、保守性の低下や性能問題につながる可能性があります。

ストアの肥大化により、関連のない state が混在し、デバッグが困難になります。また、ストア間の依存関係が複雑化すると、予期しない副作用が発生するリスクも高まるでしょう。

命名規則の統一不足も深刻な問題です。チーム開発において、一貫性のない命名はコードの理解を妨げ、開発効率の低下を招きます。

typescriptCopy code// 問題のあるストア設計例
export const useMassiveStore = defineStore(
  'massive',
  () => {
    // ユーザー関連
    const users = ref([]);
    const currentUser = ref(null);

    // 商品関連
    const products = ref([]);
    const cart = ref([]);

    // UI関連
    const isLoading = ref(false);
    const modal = ref({ isOpen: false });

    // 混在した責務
    function fetchUserAndProducts() {
      // 複数の責務が混在
    }

    return {
      users,
      currentUser,
      products,
      cart,
      isLoading,
      modal,
    };
  }
);

このような設計では、責務の分離ができておらず、保守性が低下しています。

リアクティビティの理解不足による性能問題

リアクティビティシステムの誤解により、不要な再計算や再レンダリングが発生することがあります。これは、アプリケーションの性能に直接的な影響を与える深刻な問題です。

computed 値の不適切な使用により、意図しない依存関係が生まれます。また、watcher の過剰な使用は、デバッグを困難にし、性能劣化の原因となるでしょう。

typescriptCopy code// 性能問題のある例
export const useProblematicStore = defineStore(
  'problematic',
  () => {
    const items = ref([]);

    // 問題：毎回新しいオブジェクトを返す
    const expensiveComputed = computed(() => {
      return items.value.map((item) => ({
        ...item,
        processed: heavyProcessing(item), // 重い処理
      }));
    });

    // 問題：不要なwatcher
    watch(
      items,
      () => {
        console.log('Items changed'); // デバッグ用だが本番にも残る
      },
      { deep: true }
    ); // deep watchは性能に影響

    return { items, expensiveComputed };
  }
);

このようなコードは、性能問題の温床となります。適切な最適化が必要です。

デバッグ困難性

複雑な state 管理では、バグの原因特定が困難になります。特に、非同期処理が絡む場合は、問題の再現すら難しくなることがあります。

state の変更タイミングが不明確だと、期待する値が設定されない問題が発生します。また、複数のストアが相互作用する場合、問題の切り分けが極めて困難になるでしょう。

mermaidCopy codestateDiagram-v2
    [*] --> Loading
    Loading --> Success: データ取得成功
    Loading --> Error: データ取得失敗
    Success --> Updating: データ更新開始
    Updating --> Success: 更新成功
    Updating --> Error: 更新失敗
    Error --> Loading: リトライ

    note right of Error
      エラー状態で
      デバッグが困難
    end note

このような状態遷移において、エラー発生時の状態追跡が重要になります。適切なロギングとデバッグツールの活用が不可欠です。

解決策

Pinia の内部アーキテクチャ詳解

Pinia の内部アーキテクチャを理解することで、効率的な state 管理が可能になります。アーキテクチャの核心は、シンプルでありながら強力なリアクティビティシステムにあります。

ストアは基本的に、state、getters、actions の 3 つの要素で構成されます。これらの要素が、Vue.js のリアクティビティシステムと連携して、効率的なデータ管理を実現しているのです。

typescriptCopy code// Piniaストアの基本構造
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useCounterStore = defineStore(
  'counter',
  () => {
    // State - リアクティブなデータ
    const count = ref(0);
    const name = ref('Counter');

    // Getters - 計算されたプロパティ
    const doubledCount = computed(() => count.value * 2);
    const displayName = computed(
      () => `${name.value}: ${count.value}`
    );

    // Actions - 状態を変更する関数
    function increment() {
      count.value++;
    }

    function decrement() {
      count.value--;
    }

    function reset() {
      count.value = 0;
    }

    return {
      // state
      count,
      name,
      // getters
      doubledCount,
      displayName,
      // actions
      increment,
      decrement,
      reset,
    };
  }
);

この構造により、TypeScript の型推論が完全に機能し、開発時の安全性が確保されます。

内部的には、Pinia は各ストアインスタンスを管理し、必要に応じてインスタンスの作成や破棄を行います。これにより、メモリ効率も最適化されているのです。

mermaidCopy codeflowchart TB
    app[Vue アプリケーション] --> pinia[Pinia インスタンス]
    pinia --> store1[Counter Store]
    pinia --> store2[User Store]
    pinia --> store3[Product Store]

    store1 --> state1[State: count, name]
    store1 --> getters1[Getters: doubledCount]
    store1 --> actions1[Actions: increment, decrement]

    store2 --> state2[State: currentUser, profile]
    store2 --> getters2[Getters: isLoggedIn]
    store2 --> actions2[Actions: login, logout]

    subgraph "リアクティビティシステム"
        reactive[Reactive Core]
        deps[依存関係追跡]
        update[更新通知]
    end

    state1 --> reactive
    state2 --> reactive
    reactive --> deps
    deps --> update
    update --> app

このアーキテクチャ図が示すように、各ストアは独立性を保ちながら、共通のリアクティビティシステムを通じて効率的に管理されています。

リアクティビティシステムの仕組み

Pinia のリアクティビティシステムは、Vue.js 3 のリアクティビティ API を直接活用しています。これにより、最新のパフォーマンス最適化技術を享受できるのです。

依存関係の追跡は、Proxy ベースのシステムで実現されています。データへのアクセスを監視し、変更時に関連するコンポーネントに効率的に通知を送ります。

typescriptCopy code// リアクティビティの詳細実装
import { ref, computed, watch, watchEffect } from 'vue';

export const useAdvancedStore = defineStore(
  'advanced',
  () => {
    // プリミティブなリアクティブ値
    const count = ref(0);
    const items = ref<Item[]>([]);

    // 計算されたプロパティ（依存関係自動追跡）
    const itemCount = computed(() => items.value.length);
    const expensiveCalculation = computed(() => {
      // この計算は items が変更された時のみ実行される
      return items.value.reduce(
        (sum, item) => sum + item.value,
        0
      );
    });

    // 副作用の管理
    watchEffect(() => {
      // count または items が変更された時に実行
      console.log(
        `Count: ${count.value}, Items: ${itemCount.value}`
      );
    });

    // 特定の値の監視
    watch(count, (newValue, oldValue) => {
      if (newValue > 10) {
        console.log('Count exceeded 10!');
      }
    });

    function addItem(item: Item) {
      items.value.push(item);
      // リアクティビティシステムが自動的に関連するcomputedを更新
    }

    return {
      count,
      items,
      itemCount,
      expensiveCalculation,
      addItem,
    };
  }
);

このコードにより、効率的な依存関係追跡とパフォーマンス最適化が実現されています。

Proxy ベースのリアクティビティにより、オブジェクトのプロパティアクセスも追跡可能です。深いネストを持つオブジェクトでも、効率的な更新通知が行われます。

mermaidCopy codesequenceDiagram
    participant Comp as コンポーネント
    participant Store as Pinia Store
    participant Proxy as Reactive Proxy
    participant Scheduler as Update Scheduler
    participant Effect as Effect Runner

    Comp->>Store: state.count にアクセス
    Store->>Proxy: プロパティ読み取り
    Proxy->>Effect: 依存関係を記録

    Note over Store: データ変更
    Store->>Proxy: state.count = 5
    Proxy->>Scheduler: 変更を通知
    Scheduler->>Effect: 関連エフェクトを実行
    Effect->>Comp: コンポーネント更新

この詳細なシーケンス図により、リアクティビティの動作原理が明確になります。各ステップが最適化されており、高いパフォーマンスを実現しています。

ストア間通信の最適化

複数のストアが存在する場合、効率的な通信パターンの設計が重要です。適切な設計により、保守性とパフォーマンスの両立が可能になります。

ストア間の依存関係を明確にし、循環参照を避ける設計パターンを採用しましょう。また、共通のデータは専用のストアに分離することで、コードの重複を防げます。

typescriptCopy code// ユーザーストア
export const useUserStore = defineStore('user', () => {
  const currentUser = ref<User | null>(null);
  const isLoggedIn = computed(() => !!currentUser.value);

  async function login(credentials: LoginCredentials) {
    try {
      const user = await authApi.login(credentials);
      currentUser.value = user;

      // 他のストアに通知（イベント駆動）
      const cartStore = useCartStore();
      await cartStore.loadUserCart(user.id);
    } catch (error) {
      console.error('Login failed:', error);
      throw error;
    }
  }

  function logout() {
    currentUser.value = null;

    // 関連ストアのクリア
    const cartStore = useCartStore();
    cartStore.clearCart();
  }

  return {
    currentUser,
    isLoggedIn,
    login,
    logout,
  };
});

typescriptCopy code// カートストア
export const useCartStore = defineStore('cart', () => {
  const items = ref<CartItem[]>([]);
  const userStore = useUserStore();

  // ユーザーの状態に基づく計算プロパティ
  const isCartAvailable = computed(
    () => userStore.isLoggedIn
  );

  async function loadUserCart(userId: string) {
    if (!userStore.isLoggedIn) return;

    try {
      const cartData = await cartApi.getUserCart(userId);
      items.value = cartData.items;
    } catch (error) {
      console.error('Failed to load cart:', error);
    }
  }

  function clearCart() {
    items.value = [];
  }

  function addItem(product: Product) {
    if (!isCartAvailable.value) {
      throw new Error('Cart not available for guest users');
    }

    const existingItem = items.value.find(
      (item) => item.id === product.id
    );
    if (existingItem) {
      existingItem.quantity++;
    } else {
      items.value.push({
        id: product.id,
        name: product.name,
        price: product.price,
        quantity: 1,
      });
    }
  }

  return {
    items,
    isCartAvailable,
    loadUserCart,
    clearCart,
    addItem,
  };
});

このパターンにより、ストア間の依存関係が明確になり、保守性が向上します。また、必要な時のみデータを同期することで、パフォーマンスも最適化されているのです。

具体例

実際のストア実装とリアクティビティ

実際のプロジェクトで活用できるストア実装例を通じて、Pinia のリアクティビティを詳しく見ていきましょう。EC サイトのプロダクト管理を例に、実践的な実装方法をご紹介します。

まず、基本的なプロダクトストアの実装から始めます。TypeScript の型定義も含めて、実際の開発で使えるコードをお示しします。

typescriptCopy code// types/product.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
  description: string;
  imageUrl: string;
  rating: number;
  reviewCount: number;
}

export interface FilterOptions {
  category?: string;
  priceRange?: { min: number; max: number };
  inStockOnly?: boolean;
  sortBy?: 'name' | 'price' | 'rating';
  sortOrder?: 'asc' | 'desc';
}

typescriptCopy code// stores/product.ts
import { defineStore } from 'pinia';
import { ref, computed, watch } from 'vue';
import type {
  Product,
  FilterOptions,
} from '@/types/product';

export const useProductStore = defineStore(
  'product',
  () => {
    // State - 基本的なリアクティブデータ
    const products = ref<Product[]>([]);
    const loading = ref(false);
    const error = ref<string | null>(null);
    const filters = ref<FilterOptions>({});

    // Getters - 計算されたプロパティ
    const filteredProducts = computed(() => {
      let result = [...products.value];

      // カテゴリフィルター
      if (filters.value.category) {
        result = result.filter(
          (p) => p.category === filters.value.category
        );
      }

      // 価格フィルター
      if (filters.value.priceRange) {
        const { min, max } = filters.value.priceRange;
        result = result.filter(
          (p) => p.price >= min && p.price <= max
        );
      }

      // 在庫フィルター
      if (filters.value.inStockOnly) {
        result = result.filter((p) => p.inStock);
      }

      // ソート
      if (filters.value.sortBy) {
        result.sort((a, b) => {
          const aValue = a[filters.value.sortBy!];
          const bValue = b[filters.value.sortBy!];
          const order =
            filters.value.sortOrder === 'desc' ? -1 : 1;

          if (aValue < bValue) return -1 * order;
          if (aValue > bValue) return 1 * order;
          return 0;
        });
      }

      return result;
    });

    // 統計情報
    const productStats = computed(() => ({
      total: products.value.length,
      inStock: products.value.filter((p) => p.inStock)
        .length,
      averagePrice:
        products.value.reduce(
          (sum, p) => sum + p.price,
          0
        ) / products.value.length,
      categories: [
        ...new Set(products.value.map((p) => p.category)),
      ],
    }));

    return {
      products,
      loading,
      error,
      filters,
      filteredProducts,
      productStats,
    };
  }
);

このストア実装では、リアクティビティが効率的に動作するよう設計されています。filteredProductsは、productsやfiltersが変更された時のみ再計算され、パフォーマンスが最適化されているのです。

リアクティビティの動作を詳しく追跡してみましょう。フィルターが変更された際の処理フローを図で表現します。

mermaidCopy codesequenceDiagram
    participant User as ユーザー
    participant Component as コンポーネント
    participant Store as ProductStore
    participant Computed as filteredProducts
    participant DOM as DOM更新

    User->>Component: カテゴリフィルター変更
    Component->>Store: filters.category = 'electronics'
    Store->>Computed: 依存関係をトリガー
    Computed->>Computed: フィルタリング実行
    Computed->>Component: 新しい結果を通知
    Component->>DOM: 商品リスト更新

この流れにより、ユーザーの操作に対してリアルタイムで UI が更新されます。リアクティビティシステムが自動的に依存関係を追跡し、最小限の処理で効率的な更新を実現しているのです。

アーキテクチャ図を使った解説

Pinia のアーキテクチャ全体を一枚の図で理解できるよう、包括的な図解をご紹介します。この図は、実際の開発で参照できる技術資料としても活用いただけます。

mermaidCopy codeflowchart TD
    subgraph "Vue.js アプリケーション層"
        C1[商品一覧ページ]
        C2[商品詳細ページ]
        C3[カートページ]
    end

    subgraph "Pinia Store層"
        PS[Product Store]
        US[User Store]
        CS[Cart Store]
    end

    subgraph "Product Store 詳細"
        PS --> PSS[State: products, loading, filters]
        PS --> PSG[Getters: filteredProducts, stats]
        PS --> PSA[Actions: fetchProducts, updateFilters]
    end

    subgraph "リアクティビティコア"
        RC[Reactive Core]
        DT[依存関係追跡]
        UN[更新通知システム]
    end

    subgraph "API層"
        API1[Product API]
        API2[User API]
        API3[Cart API]
    end

    subgraph "DevTools"
        DT1[Vue DevTools]
        DT2[Pinia DevTools]
        DT3[Time Travel]
    end

    C1 --> PS
    C2 --> PS
    C3 --> CS
    C1 --> US

    PSS --> RC
    RC --> DT
    DT --> UN
    UN --> C1
    UN --> C2

    PSA --> API1
    US --> API2
    CS --> API3

    PS --> DT2
    US --> DT2
    CS --> DT2
    DT2 --> DT3

この包括的なアーキテクチャ図により、Pinia の全体像が把握できます。各層の役割と連携が明確に示されており、開発時の指針として活用できるでしょう。

特に注目すべきは、リアクティビティコアの位置です。すべてのストアの基盤として機能し、効率的なデータ同期を実現しています。

アーキテクチャの各層について詳しく説明します：

Vue.js アプリケーション層では、各ページコンポーネントが必要なストアにアクセスします。コンポーネントとストアの結合は疎結合に保たれ、テストしやすい構造になっています。

Pinia Store 層は、アプリケーションの状態を管理する中核です。各ストアは単一責任の原則に従い、明確な役割分担がされています。

リアクティビティコアは、Vue.js 3 の最新技術を活用し、効率的な変更検知と更新通知を行います。この層の最適化により、大規模アプリケーションでも高いパフォーマンスを維持できるのです。

パフォーマンス最適化の実装例

大規模なアプリケーションでは、パフォーマンス最適化が重要になります。Pinia を使った実践的な最適化テクニックをご紹介します。

まず、computed プロパティの効率的な活用方法を見てみましょう。

typescriptCopy code// パフォーマンス最適化されたストア
export const useOptimizedProductStore = defineStore(
  'optimizedProduct',
  () => {
    const products = ref<Product[]>([]);
    const searchTerm = ref('');
    const selectedCategory = ref('');

    // メモ化を活用した効率的な検索
    const searchResults = computed(() => {
      if (!searchTerm.value && !selectedCategory.value) {
        return products.value;
      }

      // 大文字小文字を無視した検索（メモ化）
      const lowerSearchTerm =
        searchTerm.value.toLowerCase();

      return products.value.filter((product) => {
        const matchesSearch =
          !searchTerm.value ||
          product.name
            .toLowerCase()
            .includes(lowerSearchTerm) ||
          product.description
            .toLowerCase()
            .includes(lowerSearchTerm);

        const matchesCategory =
          !selectedCategory.value ||
          product.category === selectedCategory.value;

        return matchesSearch && matchesCategory;
      });
    });

    // 重い計算をメモ化
    const expensiveStats = computed(() => {
      const results = searchResults.value;

      if (results.length === 0) {
        return { avgPrice: 0, avgRating: 0, totalValue: 0 };
      }

      const totalPrice = results.reduce(
        (sum, p) => sum + p.price,
        0
      );
      const totalRating = results.reduce(
        (sum, p) => sum + p.rating,
        0
      );
      const totalValue = results.reduce(
        (sum, p) => sum + p.price * p.rating,
        0
      );

      return {
        avgPrice: totalPrice / results.length,
        avgRating: totalRating / results.length,
        totalValue,
      };
    });

    // 仮想スクロール用のチャンク分割
    const itemsPerPage = ref(50);
    const currentPage = ref(0);

    const paginatedResults = computed(() => {
      const start = currentPage.value * itemsPerPage.value;
      const end = start + itemsPerPage.value;
      return searchResults.value.slice(start, end);
    });

    // デバウンス機能付きの検索更新
    let searchDebounceTimer: ReturnType<
      typeof setTimeout
    > | null = null;

    function updateSearchTerm(term: string) {
      if (searchDebounceTimer) {
        clearTimeout(searchDebounceTimer);
      }

      searchDebounceTimer = setTimeout(() => {
        searchTerm.value = term;
        currentPage.value = 0; // 検索時はページをリセット
      }, 300); // 300ms のデバウンス
    }

    return {
      products,
      searchTerm,
      selectedCategory,
      searchResults,
      expensiveStats,
      paginatedResults,
      currentPage,
      itemsPerPage,
      updateSearchTerm,
    };
  }
);

この最適化により、以下の効果が得られます：

1. 検索のデバウンス: ユーザーの入力中に過度な計算を避けます
2. メモ化された計算: 同じ条件での再計算を防ぎます
3. ページネーション: 大量データの効率的な表示
4. 段階的な依存関係: 必要な時のみ重い計算を実行

パフォーマンス監視のための追加実装も重要です：

typescriptCopy code// パフォーマンス監視機能
export const usePerformanceMonitor = defineStore(
  'performance',
  () => {
    const metrics = ref<{
      renderTime: number;
      computeTime: number;
      updateCount: number;
    }>({
      renderTime: 0,
      computeTime: 0,
      updateCount: 0,
    });

    function measureCompute<T>(
      fn: () => T,
      label: string
    ): T {
      const start = performance.now();
      const result = fn();
      const end = performance.now();

      metrics.value.computeTime += end - start;
      console.log(`${label}: ${end - start}ms`);

      return result;
    }

    function trackUpdate() {
      metrics.value.updateCount++;
    }

    return {
      metrics,
      measureCompute,
      trackUpdate,
    };
  }
);

このような監視機能により、実際のパフォーマンス状況を把握し、さらなる最適化につなげることができます。

まとめ

Pinia のアーキテクチャを深く理解することで、Vue.js アプリケーションの state 管理を飛躍的に改善できます。本記事では、アーキテクチャの詳細解説から実践的な最適化テクニックまで、包括的にご紹介しました。

重要なポイントを整理すると、以下の要素が挙げられます。まず、Pinia のシンプルでありながら強力なアーキテクチャが、開発効率の向上に直結することです。従来の Vuex と比較して、boilerplate コードの削減と TypeScript 対応の向上により、より保守性の高いコードが書けるようになりました。

リアクティビティシステムの理解は、パフォーマンス最適化の鍵となります。適切な設計により、不要な再計算や再レンダリングを防ぎ、スムーズなユーザー体験を提供できるのです。

ストア設計においては、単一責任の原則を守り、適切な分割と依存関係の管理が重要です。大規模アプリケーションでも、明確な設計指針により保守性を維持できます。

実践的な最適化テクニックとして、computed プロパティのメモ化、デバウンス機能、ページネーションなどを活用することで、大量データでも高いパフォーマンスを実現できます。

Pinia は単なる state 管理ライブラリではなく、Vue.js エコシステム全体を活用した総合的な開発体験の向上を実現しています。適切な理解と活用により、より効率的で保守性の高いアプリケーション開発が可能になるでしょう。

今後の Vue.js 開発において、Pinia のアーキテクチャ理解は必須のスキルです。本記事で解説した内容を実際のプロジェクトで活用し、より良いアプリケーション開発を実現してください。

関連リンク

• Pinia 公式ドキュメント
• Vue.js 公式ドキュメント
• Vue.js リアクティビティガイド
• TypeScript 公式ドキュメント
• Vue DevTools
• Composition API RFC
• Vue.js Performance Best Practices
• Pinia GitHub Repository