Vue.js の公式状態管理ライブラリである Pinia が、2025 年に待望のメジャーアップデートを迎えました。Pinia 3.0 は「退屈なメジャーリリース」と公式で謳われているように、新機能の追加ではなく、非推奨 API の削除と依存関係の更新に焦点を当てたリリースとなっています。

この記事では、Pinia 3.0 への移行を検討している開発者の皆さまに向けて、非互換ポイントの詳細と、安全に移行するためのチェックリストをご提供いたします。

背景

Pinia 3.0 がリリースされた経緯

Pinia は 2019 年に実験的プロジェクトとして誕生し、Vue 3 の Composition API を最大限に活用した状態管理ライブラリとして成長してきました。2022 年には Vuex の後継として Vue.js の公式状態管理ライブラリに採用され、多くのプロジェクトで利用されるようになりました。

しかし、Vue 2 のサポート終了（EOL）が 2023 年末に実施され、フロントエンド開発のエコシステム全体が Vue 3 へ移行する流れが加速していきます。このタイミングで Pinia チームは、長年蓄積されてきた技術的負債を解消し、モダンな開発環境に最適化されたライブラリへと進化させる決断をしました。

バージョンアップの狙いと方針

Pinia 3.0 のリリース方針は非常に明確です。それは「新機能を追加しないこと」。この一見保守的に見える方針には、以下のような狙いがあります。

まず、非推奨となっていた API を完全に削除することで、コードベースをシンプルに保ち、メンテナンス性を向上させます。次に、TypeScript や Vue.js などの依存パッケージを最新バージョンに更新することで、型安全性とパフォーマンスを向上させます。そして最も重要なのは、既存ユーザーの移行コストを最小限に抑えることです。

以下の図は、Pinia のバージョン推移と主な変更点を示しています。

mermaidCopy codetimeline
    title Pinia バージョン推移
    2019 : Pinia 0.x<br/>実験的プロジェクト開始
    2021 : Pinia 1.x<br/>Vue 3 対応
    2022 : Pinia 2.x<br/>公式ライブラリ化<br/>Vue 2/3 両対応
    2025 : Pinia 3.x<br/>Vue 3 専用<br/>非推奨API削除

図のポイント：

• 2022 年に公式ライブラリとして採用されて以降、Pinia は安定したリリースサイクルを維持しています
• Pinia 3.0 は Vue 3 専用となり、モダンな開発環境に特化した設計になりました

Vue 2 サポート終了の影響

Vue 2 の公式サポートが 2023 年末に終了したことで、多くのプロジェクトが Vue 3 への移行を進めています。Pinia 3.0 は Vue 2 のサポートを完全に終了することで、Vue 3 の機能を最大限に活用できる設計となりました。

Vue 2 プロジェクトを運用している場合は、Pinia 2.x を継続して利用することが推奨されます。ただし、長期的な視点では Vue 3 と Pinia 3.0 への移行計画を立てることをおすすめいたします。

課題

既存プロジェクトが直面する移行の壁

Pinia 3.0 へのアップデートは「退屈なメジャーリリース」と表現されているものの、実際のプロジェクトでは以下のような課題に直面する可能性があります。

まず、TypeScript のバージョン要件が厳格化されたことです。Pinia 3.0 は TypeScript 4.5 以上を必須としており、それ以前のバージョンを使用しているプロジェクトでは、TypeScript 自体のアップデートが必要になります。

次に、非推奨 API の削除による影響です。長年運用されてきたプロジェクトでは、Pinia 2.x で非推奨となっていた API を使い続けているケースが少なくありません。これらの API を使用している箇所を全て洗い出し、修正する必要があります。

さらに、開発ツールとの互換性の問題もあります。Pinia 3.0 は Vue DevTools v7 に対応していますが、古いバージョンの DevTools を使用している場合は、デバッグ機能が正しく動作しない可能性があります。

以下の図は、移行時に確認すべき依存関係を示しています。

mermaidCopy codeflowchart TD
    project["既存プロジェクト"] --> vue_check{"Vue<br/>バージョン確認"}
    vue_check -->|Vue 2| stay["Pinia 2.x<br/>継続利用"]
    vue_check -->|Vue 3| ts_check{"TypeScript<br/>バージョン確認"}
    ts_check -->|"< 4.5"| ts_upgrade["TypeScript<br/>アップグレード"]
    ts_check -->|">= 4.5"| api_check["非推奨API<br/>確認"]
    ts_upgrade --> api_check
    api_check --> migration["Pinia 3.0<br/>移行実施"]
    stay --> future["将来的に<br/>Vue 3へ移行検討"]

図で理解できる要点：

• Vue 2 プロジェクトは Pinia 2.x を継続利用するのが安全
• Vue 3 プロジェクトでも TypeScript のバージョン確認が移行の第一歩
• 段階的なチェックを経て、安全に移行を進められる

非推奨 API の利用状況把握の難しさ

大規模なプロジェクトでは、どこで非推奨 API が使われているかを把握するのが困難です。特に以下のようなケースでは、見落としが発生しやすくなります。

コンポーネント数が多く、複数の開発者が関わっているプロジェクトでは、コードレビューだけでは全ての使用箇所を発見できません。また、サードパーティのプラグインやミドルウェアが非推奨 API に依存している可能性もあります。

さらに、型定義ファイル（.d.ts）内で PiniaStorePlugin を使用している場合、通常のコード検索では見つけにくいこともございます。

TypeScript バージョンアップの影響範囲

TypeScript 4.5 未満から 4.5 以上へアップグレードする際、Pinia 以外の部分でも影響が出る可能性があります。

例えば、既存のプロジェクトで使用している他のライブラリが、新しい TypeScript のバージョンに対応していない場合、型エラーが発生することがあります。また、TypeScript の型チェックが厳格化されることで、今まで見逃されていた型の不整合が顕在化するケースもあるでしょう。

これらの課題を解決するには、段階的かつ計画的な移行アプローチが必要です。

解決策

非互換ポイントの完全理解

Pinia 3.0 での非互換性を正しく理解することが、スムーズな移行の第一歩となります。主な非互換ポイントを詳しく見ていきましょう。

Vue 2 サポートの終了

Pinia 3.0 は Vue 3 専用ライブラリとなり、Vue 2 はサポート対象外となりました。

影響を受けるプロジェクト：

• Vue 2.6.x、2.7.x を使用しているプロジェクト
• Nuxt 2 を使用しているプロジェクト（Nuxt Bridge 含む）

対応方法：

• Vue 3 へ移行してから Pinia 3.0 にアップデート
• Vue 2 を継続する場合は Pinia 2.x を使用

#	項目	Pinia 2.x	Pinia 3.0
1	Vue 2 サポート	★ 対応	☓ 非対応
2	Vue 3 サポート	★ 対応	★ 対応
3	Nuxt 2 サポート	★ 対応	☓ 非対応
4	Nuxt 3 サポート	★ 対応	★ 対応

TypeScript 要件の厳格化

Pinia 3.0 では TypeScript 4.5 以上が必須要件となります。これは、TypeScript 4.5 で導入されたネイティブの Awaited 型を使用しているためです。

TypeScript 4.5 未満での影響：

• Awaited 型が存在しないため、型エラーが発生
• Pinia のストア型推論が正しく機能しない
• ビルド時にコンパイルエラーが発生

対応手順：

1. 現在の TypeScript バージョンを確認します。

bashCopy codeyarn list typescript

2. TypeScript 4.5 以上にアップグレードします。

bashCopy codeyarn upgrade typescript@^5.0.0

3. tsconfig.json の設定を確認し、必要に応じて調整します。

jsonCopy code{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "lib": ["ES2020", "DOM"],
    "strict": true,
    "moduleResolution": "node"
  }
}

非推奨 API の削除

Pinia 3.0 では、以前から非推奨とされていた API が完全に削除されました。

PiniaStorePlugin の削除

PiniaStorePlugin 型は削除され、PiniaPlugin に統一されました。

変更前（Pinia 2.x で非推奨）：

typescriptCopy code// plugins/myPlugin.ts
import { PiniaStorePlugin } from 'pinia';

const myPlugin: PiniaStorePlugin = (context) => {
  // プラグインの実装
  console.log('Store created:', context.store.$id);
};

変更後（Pinia 3.0）：

typescriptCopy code// plugins/myPlugin.ts
import { PiniaPlugin } from 'pinia';

// 型名を PiniaPlugin に変更
const myPlugin: PiniaPlugin = (context) => {
  // プラグインの実装内容は同じ
  console.log('Store created:', context.store.$id);
};

この変更は型名の変更のみで、プラグインの実装ロジック自体は変更不要です。

defineStore の第一引数オブジェクト形式の削除

defineStore でストア名をオブジェクト形式で渡す方法が削除されました。

変更前（Pinia 2.x で非推奨）：

typescriptCopy code// stores/user.ts
import { defineStore } from 'pinia';

// オブジェクト形式でidを指定（削除された記法）
export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    name: '',
    email: '',
  }),
  actions: {
    updateName(newName: string) {
      this.name = newName;
    },
  },
});

変更後（Pinia 3.0）：

typescriptCopy code// stores/user.ts
import { defineStore } from 'pinia';

// 第一引数に文字列でストア名を直接指定
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    email: '',
  }),
  actions: {
    updateName(newName: string) {
      this.name = newName;
    },
  },
});

この記法はよりシンプルで読みやすく、TypeScript の型推論も向上します。

以下の図は、主要な API 変更のマッピングを示しています。

mermaidCopy codeflowchart LR
    subgraph old["Pinia 2.x（非推奨）"]
        old_plugin["PiniaStorePlugin"]
        old_define["defineStore({ id })"]
    end

    subgraph new["Pinia 3.0（推奨）"]
        new_plugin["PiniaPlugin"]
        new_define["defineStore('id')"]
    end

    old_plugin -.->|型名変更| new_plugin
    old_define -.->|引数形式変更| new_define

図で理解できる要点：

• API の変更は主に 2 箇所のみ
• 型名の変更と引数形式の変更で、ロジック自体の大きな変更は不要

DevTools API のアップグレード

Pinia 3.0 は Vue DevTools v7 に対応しました。古いバージョンの DevTools を使用している場合、以下の機能が正しく動作しない可能性があります。

影響を受ける機能：

• ストアの状態の可視化
• タイムトラベルデバッグ
• アクションの履歴表示

対応方法：

ブラウザ拡張機能の Vue DevTools を最新版（v7 以上）に更新してください。Chrome や Firefox の拡張機能ページから更新できます。

モジュールシステムの変更

Pinia 3.0 は type: module パッケージとして公開されるようになりました。ただし、CommonJS（CJS）版のファイルも引き続き提供されています。

影響：

• ES モジュールを使用している場合：影響なし
• CommonJS を使用している場合：dist ファイルから CJS 版を利用可能

この変更により、モダンなビルドツール（Vite、webpack 5 など）でのバンドルサイズが最適化され、ツリーシェイキングの効率が向上します。

段階的移行アプローチ

安全に Pinia 3.0 へ移行するには、以下の段階的なアプローチを推奨いたします。

ステップ 1：環境の確認

まず、現在の開発環境が Pinia 3.0 の要件を満たしているか確認しましょう。

bashCopy code# Vue のバージョン確認
yarn list vue

# TypeScript のバージョン確認
yarn list typescript

# Pinia のバージョン確認
yarn list pinia

以下の要件を満たしているか確認してください。

#	項目	最小要件	推奨
1	Vue	3.0.0 以上	3.3.0 以上
2	TypeScript	4.5.0 以上	5.0.0 以上
3	Node.js	16.0.0 以上	18.0.0 以上

ステップ 2：依存関係のアップデート

要件を満たしていない場合は、まず依存関係をアップデートします。

bashCopy code# TypeScript のアップデート
yarn upgrade typescript@^5.0.0

# Vue のアップデート（必要な場合）
yarn upgrade vue@^3.3.0

ステップ 3：非推奨 API の検出

プロジェクト内で非推奨 API が使用されている箇所を検出します。

bashCopy code# PiniaStorePlugin の使用箇所を検索
grep -r "PiniaStorePlugin" --include="*.ts" --include="*.vue" ./src

# defineStore のオブジェクト形式を検索
grep -r "defineStore({" --include="*.ts" --include="*.vue" ./src

この検索結果をもとに、修正が必要な箇所をリストアップしてください。

ステップ 4：非推奨 API の修正

検出した非推奨 API を、新しい形式に修正していきます。

PiniaStorePlugin の修正例：

typescriptCopy code// 修正前
import { PiniaStorePlugin } from 'pinia';
const plugin: PiniaStorePlugin = (context) => {
  /* ... */
};

typescriptCopy code// 修正後
import { PiniaPlugin } from 'pinia';
const plugin: PiniaPlugin = (context) => {
  /* ... */
};

defineStore の修正例：

typescriptCopy code// 修正前
export const useStore = defineStore({
  id: 'myStore',
  state: () => ({ count: 0 }),
});

typescriptCopy code// 修正後
export const useStore = defineStore('myStore', {
  state: () => ({ count: 0 }),
});

ステップ 5：Pinia のアップグレード

全ての非推奨 API を修正したら、Pinia をアップグレードします。

bashCopy code# Pinia 3.0 へアップグレード
yarn upgrade pinia@^3.0.0

Nuxt を使用している場合は、Nuxt モジュールもアップグレードしてください。

bashCopy code# Nuxt の Pinia モジュールをアップグレード
yarn upgrade @pinia/nuxt@^0.6.0

ステップ 6：型チェックとビルド

TypeScript の型チェックとビルドを実行し、エラーがないか確認します。

bashCopy code# TypeScript の型チェック
yarn tsc --noEmit

# ビルドの実行
yarn build

エラーが発生した場合は、エラーメッセージを確認し、該当箇所を修正してください。

ステップ 7：テストの実行

全てのテストを実行し、動作に問題がないか確認します。

bashCopy code# ユニットテストの実行
yarn test:unit

# E2E テストの実行（設定している場合）
yarn test:e2e

特に、ストアを使用しているコンポーネントのテストを重点的に確認しましょう。

ステップ 8：DevTools の動作確認

ブラウザで Vue DevTools を開き、以下の機能が正常に動作するか確認します。

• ストアの状態表示
• アクションの実行履歴
• タイムトラベルデバッグ

DevTools が正しく動作しない場合は、ブラウザ拡張機能を最新版（v7 以上）に更新してください。

自動化ツールの活用

非推奨 API の検出と修正を効率化するために、以下のツールを活用できます。

ESLint による静的解析

ESLint のカスタムルールを作成することで、非推奨 API の使用を検出できます。

javascriptCopy code// .eslintrc.js
module.exports = {
  rules: {
    // defineStore のオブジェクト形式を検出
    'no-restricted-syntax': [
      'error',
      {
        selector:
          'CallExpression[callee.name="defineStore"][arguments.0.type="ObjectExpression"]',
        message:
          'defineStore({ id }) は非推奨です。defineStore("id") を使用してください。',
      },
    ],
  },
};

この設定により、非推奨な記法を使用している箇所でエラーが表示されます。

TypeScript の型チェック強化

tsconfig.json で厳格な型チェックを有効にすることで、型の不整合を早期に発見できます。

jsonCopy code{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

これらの設定により、Pinia 3.0 への移行前に潜在的な問題を発見できます。

具体例

実際のプロジェクトでの移行事例

ここでは、中規模の Vue 3 プロジェクトで Pinia 2.x から 3.0 へ移行した実例をご紹介します。

プロジェクト構成

plaintextCopy codesrc/
├── stores/
│   ├── user.ts          # ユーザー情報ストア
│   ├── products.ts      # 商品一覧ストア
│   └── cart.ts          # カートストア
├── plugins/
│   └── persistence.ts   # 永続化プラグイン
└── main.ts              # アプリケーションエントリーポイント

このプロジェクトでは、3 つのストアと 1 つのカスタムプラグインを使用していました。

移行前のコード

ユーザーストア（修正前）：

typescriptCopy code// src/stores/user.ts
import { defineStore } from 'pinia';

// オブジェクト形式のdefineStore（非推奨）
export const useUserStore = defineStore({
  id: 'user',

  state: () => ({
    id: null as number | null,
    name: '',
    email: '',
    isAuthenticated: false,
  }),

  getters: {
    displayName: (state) => state.name || 'ゲスト',
  },

  actions: {
    async login(email: string, password: string) {
      // ログイン処理
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });

      const data = await response.json();

      // ステートを更新
      this.id = data.id;
      this.name = data.name;
      this.email = data.email;
      this.isAuthenticated = true;
    },

    logout() {
      // ステートをリセット
      this.$reset();
    },
  },
});

永続化プラグイン（修正前）：

typescriptCopy code// src/plugins/persistence.ts
import { PiniaStorePlugin } from 'pinia';

// PiniaStorePlugin型（非推奨）
export const persistencePlugin: PiniaStorePlugin = (
  context
) => {
  const { store } = context;

  // ローカルストレージからステートを復元
  const savedState = localStorage.getItem(store.$id);
  if (savedState) {
    store.$patch(JSON.parse(savedState));
  }

  // ステート変更時にローカルストレージへ保存
  store.$subscribe((mutation, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state));
  });
};

アプリケーションエントリーポイント（修正前）：

typescriptCopy code// src/main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { persistencePlugin } from './plugins/persistence';

const pinia = createPinia();

// プラグインを登録
pinia.use(persistencePlugin);

const app = createApp(App);
app.use(pinia);
app.mount('#app');

移行手順の実行

まず、環境要件を確認します。

bashCopy code# 現在のバージョンを確認
yarn list vue typescript pinia

結果：

• Vue: 3.3.4 ✓
• TypeScript: 4.9.5 ✓（4.5 以上なので OK）
• Pinia: 2.1.7

次に、非推奨 API を検索します。

bashCopy code# PiniaStorePlugin の検索
grep -rn "PiniaStorePlugin" src/
# 結果: src/plugins/persistence.ts:1: import { PiniaStorePlugin } from 'pinia'

# defineStore オブジェクト形式の検索
grep -rn "defineStore({" src/
# 結果: src/stores/user.ts:4: export const useUserStore = defineStore({

検索結果から、2 箇所の修正が必要だと分かりました。

移行後のコード

ユーザーストア（修正後）：

typescriptCopy code// src/stores/user.ts
import { defineStore } from 'pinia';

// 文字列形式のdefineStoreに変更
export const useUserStore = defineStore('user', {
  state: () => ({
    id: null as number | null,
    name: '',
    email: '',
    isAuthenticated: false,
  }),

  getters: {
    displayName: (state) => state.name || 'ゲスト',
  },

  actions: {
    async login(email: string, password: string) {
      // ログイン処理（変更なし）
      const response = await fetch('/api/login', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });

      const data = await response.json();

      // ステートを更新
      this.id = data.id;
      this.name = data.name;
      this.email = data.email;
      this.isAuthenticated = true;
    },

    logout() {
      // ステートをリセット
      this.$reset();
    },
  },
});

永続化プラグイン（修正後）：

typescriptCopy code// src/plugins/persistence.ts
import { PiniaPlugin } from 'pinia';

// PiniaPlugin型に変更
export const persistencePlugin: PiniaPlugin = (context) => {
  const { store } = context;

  // ローカルストレージからステートを復元（処理は同じ）
  const savedState = localStorage.getItem(store.$id);
  if (savedState) {
    store.$patch(JSON.parse(savedState));
  }

  // ステート変更時にローカルストレージへ保存（処理は同じ）
  store.$subscribe((mutation, state) => {
    localStorage.setItem(store.$id, JSON.stringify(state));
  });
};

アプリケーションエントリーポイント（修正後）：

typescriptCopy code// src/main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { persistencePlugin } from './plugins/persistence';

// 変更なし
const pinia = createPinia();
pinia.use(persistencePlugin);

const app = createApp(App);
app.use(pinia);
app.mount('#app');

エントリーポイントの main.ts は変更不要でした。

Pinia のアップグレード

修正が完了したら、Pinia をアップグレードします。

bashCopy code# Pinia 3.0 へアップグレード
yarn upgrade pinia@^3.0.0

アップグレード後、package.json を確認します。

jsonCopy code{
  "dependencies": {
    "vue": "^3.3.4",
    "pinia": "^3.0.0"
  },
  "devDependencies": {
    "typescript": "^4.9.5"
  }
}

動作確認

型チェックとビルドを実行します。

bashCopy code# 型チェック
yarn tsc --noEmit
# エラーなし ✓

# ビルド
yarn build
# ビルド成功 ✓

テストを実行します。

bashCopy code# ユニットテスト
yarn test:unit
# 全てのテストがパス ✓

開発サーバーを起動して、ブラウザで動作確認します。

bashCopy code# 開発サーバー起動
yarn dev

Vue DevTools で以下を確認します。

• ユーザーストアのステートが正しく表示される ✓
• ログインアクションが実行できる ✓
• ローカルストレージへの永続化が機能する ✓

移行結果のまとめ

この事例では、以下の作業で移行が完了しました。

#	作業項目	所要時間	修正ファイル数
1	環境確認	5 分	-
2	非推奨 API 検索	5 分	-
3	コード修正	10 分	2 ファイル
4	アップグレード	3 分	-
5	動作確認	15 分	-
合計	38 分	2 ファイル

予想よりも短時間で移行できたことが分かりますね。

エラー発生時の対処例

移行中に発生する可能性のあるエラーと、その対処方法をご紹介します。

エラー 1：TypeScript コンパイルエラー

エラーコード: TS2304: Cannot find name 'Awaited'

エラーメッセージ：

plaintextCopy codenode_modules/pinia/dist/pinia.d.ts:123:45 - error TS2304: Cannot find name 'Awaited'.

123     type UnwrapPromise<T> = T extends Promise<infer U> ? Awaited<U> : T
                                                              ~~~~~~~

発生条件：

• TypeScript のバージョンが 4.5 未満の場合
• Pinia 3.0 は TypeScript 4.5 で導入された Awaited 型を使用しているため

解決方法：

1. TypeScript のバージョンを確認します。

bashCopy codeyarn list typescript
# 例: typescript@4.3.5

2. TypeScript 4.5 以上にアップグレードします。

bashCopy code# 推奨: TypeScript 5.x へアップグレード
yarn upgrade typescript@^5.0.0

3. アップグレード後、再度ビルドを実行します。

bashCopy codeyarn tsc --noEmit
# エラーが解消されることを確認

参考リンク：

• TypeScript 4.5 リリースノート

エラー 2：型定義エラー（PiniaStorePlugin）

エラーコード: TS2305: Module 'pinia' has no exported member 'PiniaStorePlugin'

エラーメッセージ：

plaintextCopy codesrc/plugins/persistence.ts:1:10 - error TS2305: Module '"pinia"' has no exported member 'PiniaStorePlugin'.

1 import { PiniaStorePlugin } from 'pinia'
           ~~~~~~~~~~~~~~~~

発生条件：

• Pinia 3.0 にアップグレード後、PiniaStorePlugin 型を使用している場合
• PiniaStorePlugin は Pinia 3.0 で削除されました

解決方法：

1. エラーが発生しているファイルを開きます。

typescriptCopy code// src/plugins/persistence.ts（修正前）
import { PiniaStorePlugin } from 'pinia';

export const myPlugin: PiniaStorePlugin = (context) => {
  // プラグインの実装
};

2. PiniaStorePlugin を PiniaPlugin に変更します。

typescriptCopy code// src/plugins/persistence.ts（修正後）
import { PiniaPlugin } from 'pinia';

export const myPlugin: PiniaPlugin = (context) => {
  // プラグインの実装（内容は変更なし）
};

3. 型チェックを再実行します。

bashCopy codeyarn tsc --noEmit
# エラーが解消されることを確認

検索キーワード：Pinia PiniaStorePlugin not exported、Pinia 3.0 PiniaPlugin migration

エラー 3：defineStore の型推論エラー

エラーコード: TS2769: No overload matches this call

エラーメッセージ：

plaintextCopy codesrc/stores/user.ts:4:31 - error TS2769: No overload matches this call.
  Overload 1 of 3, '(id: string, options: DefineStoreOptions<...>): ...', gave the following error.
    Argument of type '{ id: string; state: () => {...}; }' is not assignable to parameter of type 'string'.

4 export const useUserStore = defineStore({
                                ~~~~~~~~~~~
5   id: 'user',
  ~~~~~~~~~~~
6   state: () => ({
  ~~~~~~~~~~~~~~~~

発生条件：

• Pinia 3.0 にアップグレード後、オブジェクト形式の defineStore を使用している場合
• defineStore({ id: 'name' }) 形式は Pinia 3.0 で削除されました

解決方法：

1. エラーが発生しているストアファイルを開きます。

typescriptCopy code// src/stores/user.ts（修正前）
export const useUserStore = defineStore({
  id: 'user',
  state: () => ({
    name: '',
  }),
});

2. 第一引数を文字列形式に変更します。

typescriptCopy code// src/stores/user.ts（修正後）
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
  }),
});

3. Composition API スタイルの場合も同様に修正します。

typescriptCopy code// Composition API スタイル（修正前）
export const useUserStore = defineStore({
  id: 'user',
  setup() {
    const name = ref('');
    return { name };
  },
});

typescriptCopy code// Composition API スタイル（修正後）
export const useUserStore = defineStore('user', () => {
  const name = ref('');
  return { name };
});

4. プロジェクト全体で検索し、全ての箇所を修正します。

bashCopy code# defineStore のオブジェクト形式を検索
grep -rn "defineStore({" src/

5. 全て修正したら、型チェックを実行します。

bashCopy codeyarn tsc --noEmit
# エラーが解消されることを確認

検索キーワード：Pinia defineStore id object deprecated、Pinia 3.0 defineStore syntax

移行チェックリスト

安全に Pinia 3.0 へ移行するための、段階的なチェックリストをご用意しました。

事前準備

#	項目	確認	備考
1	Vue 3.0 以上を使用しているか	□	Vue 2 は Pinia 2.x を継続
2	TypeScript 4.5 以上を使用しているか	□	Awaited 型が必須
3	Git で現在の状態をコミット済みか	□	ロールバック用
4	開発環境でのテストが可能か	□	本番環境での直接実施は NG
5	チームメンバーへ移行計画を共有したか	□	複数人開発の場合

コード修正

#	項目	確認	備考
1	PiniaStorePlugin を PiniaPlugin に変更	□	プラグイン使用時
2	defineStore({ id }) を defineStore('id') に変更	□	全ストアファイル
3	型定義ファイル（.d.ts）も確認したか	□	見落としやすい箇所
4	サードパーティプラグインの互換性確認	□	必要に応じてアップデート
5	ESLint エラーを解消したか	□	静的解析の活用

アップグレード

#	項目	確認	備考
1	pinia を 3.0 にアップグレード	□	yarn upgrade pinia@^3.0.0
2	Nuxt 使用時は @pinia​/​nuxt もアップグレード	□	Nuxt 3 のみ対応
3	package.json のバージョンを確認	□	意図した通りか確認
4	yarn.lock を更新	□	yarn install で更新

動作確認

#	項目	確認	備考
1	TypeScript の型チェックが通るか	□	yarn tsc --noEmit
2	ビルドが成功するか	□	yarn build
3	ユニットテストが全てパスするか	□	yarn test:unit
4	E2E テストが全てパスするか	□	設定している場合
5	開発サーバーで正常に動作するか	□	実際の画面で確認
6	Vue DevTools でストアが表示されるか	□	DevTools v7 を使用
7	全ての CRUD 操作が機能するか	□	Create/Read/Update/Delete
8	プラグイン（永続化など）が動作するか	□	カスタムプラグイン使用時

本番展開前

#	項目	確認	備考
1	ステージング環境でのテスト完了	□	本番相当の環境で確認
2	パフォーマンステストを実施	□	速度低下がないか
3	ロールバック手順を準備	□	問題発生時の対応
4	デプロイ計画をチームと共有	□	実施日時の調整
5	監視・ログ設定の確認	□	エラー検知体制

このチェックリストを印刷またはコピーして、移行作業の進捗管理にご活用ください。

まとめ

Pinia 3.0 は「退屈なメジャーリリース」という表現の通り、新機能の追加ではなく、非推奨 API の削除と依存関係の更新に焦点を当てたアップデートです。しかし、この「退屈さ」こそが、既存プロジェクトにとって安心して移行できる要素となっています。

主要な変更点のおさらい：

• Vue 2 サポートの終了：Pinia 3.0 は Vue 3 専用となり、Vue 2 プロジェクトは Pinia 2.x を継続利用します
• TypeScript 4.5 以上が必須：ネイティブ Awaited 型の使用により、型安全性が向上しました
• PiniaStorePlugin から PiniaPlugin へ：型名の変更のみで、実装ロジックは変更不要です
• defineStore の引数形式の変更：オブジェクト形式から文字列形式へ統一され、より簡潔な記法になりました

移行のポイント：

1. 環境要件（Vue 3、TypeScript 4.5+）を事前に確認しましょう
2. 非推奨 API の検索と修正は、grep コマンドや ESLint で効率化できます
3. 段階的なアプローチで、リスクを最小限に抑えながら移行しましょう
4. 型チェック、ビルド、テストを各段階で実施し、問題を早期発見しましょう

多くのプロジェクトでは、修正が必要な箇所は限定的で、1 時間以内に移行作業が完了するでしょう。実際の事例でも、2 ファイルの修正で約 40 分という短時間で移行できました。

Pinia 3.0 への移行は、将来的なメンテナンス性の向上と、最新の Vue.js エコシステムへの適応という大きなメリットをもたらします。本記事でご紹介したチェックリストを活用して、安全かつスムーズな移行を実現してください。

皆さまのプロジェクトが、より快適で効率的な開発環境へと進化することを願っております。

関連リンク

• Pinia 公式ドキュメント
• Pinia v2 から v3 への移行ガイド
• Pinia GitHub リポジトリ
• Pinia v3 CHANGELOG
• Vue 3 公式ドキュメント
• TypeScript 公式ドキュメント
• Vue DevTools