Vue 3 Composablesの設計をClaudeに相談する

Vue 3のComposition APIは非常に柔軟ですが、「このロジックをどうComposableに切り出すか」で悩む場面は多いですよね。そんなときClaude Codeを設計パートナーとして活用すると、実装の質とスピードが大きく上がります。

Claudeへの相談の仕方

まずはターミナルでClaude Codeを起動し、設計の意図を自然言語で伝えましょう。

claude "Vue 3でユーザー認証状態を管理するComposableを設計したい。
ログイン・ログアウト・トークンのリフレッシュを扱い、
複数コンポーネントから参照できるようにしたい"

このように目的・扱うデータ・利用シーンを一緒に伝えるのがポイントです。「何を作るか」だけでなく「どう使われるか」を含めることで、Claudeはより適切な設計を提案してくれます。

※トークン: AIがテキストを処理する最小単位。日本語は1文字あたり約1〜2トークン。使用量に応じてAPIコストが変わる。

生成されたComposableを読み解く

Claudeが提案するコードには、設計の意図が反映されています。たとえば次のような出力が得られます。

import { ref, computed, readonly } from 'vue'

const _user = ref<User | null>(null)
const _token = ref<string | null>(null)

export function useAuth() {
  const isAuthenticated = computed(() => !!_token.value)

  async function login(credentials: Credentials) {
    const { user, token } = await authApi.login(credentials)
    _user.value = user
    _token.value = token
  }

  async function logout() {
    await authApi.logout()
    _user.value = null
    _token.value = null
  }

  return {
    user: readonly(_user),
    isAuthenticated,
    login,
    logout,
  }
}

_userをモジュールスコープに置いてシングルトン的に扱い、readonlyで外部からの直接変更を防いでいる点に注目してください。Claude Codeはこうしたリアクティビティのベストプラクティスを自然に組み込んだコードを生成します。

追加要件をインタラクティブに反映する

最初の提案から要件を追加したい場合も、会話を続けるだけで対応できます。

claude "先ほどのuseAuthに、トークンの有効期限切れを検知して
自動リフレッシュする仕組みを追加してほしい。
失敗したときはログアウト状態にすること"

このように追加条件とエラーケースを明示するのがコツです。Claudeは既存のコードの構造を保ちながら、interceptorの追加やsetIntervalを使ったリフレッシュロジックを差分で提案してくれます。

Vue 3のComposables設計はパターンの引き出しが多いほど質が上がります。Claude Codeを壁打ち相手として積極的に使い、設計の選択肢を広げていきましょう。