【Vue.js】LLM API連携でハマる「Cannot read properties of undefined」！非同期処理とレスポンスハンドリング完全解説

Vue.jsやNuxt.jsでClaudeやGeminiなどのLLM APIを叩こうとしたら、レスポンス取得時に「Cannot read properties of undefined (reading ‘content’)」が出てハマったので備忘録として残します。

この記事でわかること
[現象] 実行時にコンソールエラーが発生
[環境]
[原因] 非同期処理と深いネスト構造
[解決策] 正しいハンドリングコード
- 修正前（Before）
- 修正後（After）
解決のポイント
[まとめ]

この記事でわかること

LLM API連携時にエラーが発生する原因
非同期処理（async/await）の正しい実装方法
Optional Chainingを用いた安全なレスポンスハンドリング

[現象] 実行時にコンソールエラーが発生

APIを呼び出し、その結果を画面に表示しようとした際に以下のエラーが発生し、処理が止まってしまいます。

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'content')

[環境]

フレームワーク	Vue.js 3 / Nuxt 3
利用API	Claude API, Gemini API, OpenAI API 等
通信ライブラリ	Axios, fetch API

[原因] 非同期処理と深いネスト構造

このエラーの主な原因は、「APIからのレスポンスが届く前にデータにアクセスしようとしている」または「期待したデータ構造で返ってきていない」ことです。

非同期処理の待機不足: API呼び出しはPromiseを返すため、完了を待たずにプロパティを参照すると undefined となります。
深いレスポンス構造: LLMのレスポンスは response.data.choices[0].message.content のようにネストが深く、途中のプロパティが欠けると即座にエラーになります。

[解決策] 正しいハンドリングコード

エラーを防ぐためには、適切な非同期処理の待機と、プロパティの存在チェックが必須です。

修正前（Before）

async function getLLMResponse(prompt) {
  const response = await callLLMAPI(prompt);
  // APIの構造が少しでも変わるか、取得に失敗するとエラーで落ちる
  console.log(response.data.choices[0].message.content);
}

修正後（After）

async function getLLMResponse(prompt) {
  try {
    const response = await callLLMAPI(prompt);
    
    // Optional Chaining (?.) を使用して安全にアクセス
    const content = response?.data?.choices?.[0]?.message?.content;

    if (content) {
      console.log("取得成功:", content);
      // ここで画面表示用の reactive 変数などに代入する
    } else {
      console.warn("期待するデータ構造ではありませんでした。", response);
    }
  } catch (error) {
    console.error("LLM APIからのレスポンス処理中にエラーが発生しました:", error);
    // ユーザーへのエラー通知処理などを追加
  }
}

解決のポイント

async/await の徹底: APIレスポンスが完了するまで確実に待機します。
Optional Chaining (?.): プロパティが undefined や null であってもエラーを投げず undefined を返してくれるため、アプリのクラッシュを防げます。
try…catch による保護: ネットワークエラーやAPI側のタイムアウトなど、予期せぬ事態でも安全に処理を分岐できます。