Vue.jsやNuxt.jsプロジェクトでGemini APIやClaude Codeを連携させていたところ、APIからのレスポンス処理でTypeError: Cannot read properties of undefined (reading ‘content’)にハマったので備忘録として残します。
目次
この記事でわかること
- Gemini API/Claude Codeのレスポンス構造でエラーが出る根本原因
- Vue.jsにおける非同期処理の安全なデータアクセスの手法
- エラーハンドリングを強化する実装パターン
[現象] APIレスポンス取得時にTypeErrorが発生
APIを叩いてデータを取得し、レスポンスを加工しようとした際にコンソールで以下のエラーが発生しました。
TypeError: Cannot read properties of undefined (reading 'content')
at processApiResponse (eval at <anonymous> (chunk-vendors.js:1234:5), <anonymous>:25:30)
[環境]
- Framework: Vue.js (3.x) / Nuxt.js
- API: Gemini API / Claude Code
- Library: Fetch API / Axios
[原因] レスポンス構造の不一致とエラー処理の不足
このエラーの主な原因は、APIから返却されるJSONの階層が深く、予期しないタイミングで特定のプロパティがundefinedになっていることにあります。
特にGemini APIやClaude Codeは、安全性フィルタリングの結果やレート制限、認証エラーなどにより、正常時とは異なるデータ構造を返すことがあります。
エラーレスポンスAPI側でエラーが発生した際、candidatesキー自体が存在しない。非同期のラグデータが完全に解決される前にDOMやスクリプトがプロパティを参照している。
| 要因 | 詳細 |
|---|---|
| 構造のネスト | data.candidates[0].content.parts[0]など階層が深く、途中でnullになる。 |
[解決策] ステータスチェックとオプショナルチェイニング
HTTPレスポンスのステータスを確認し、オプショナルチェイニング（?.）を利用して安全にプロパティへアクセスします。また、try-catch文でエラーを補足し、ユーザーへの適切なフィードバックを可能にします。
Before: 壊れやすい実装
async function callApi() {
const response = await fetch('/api/gemini');
const data = await response.json();
// data.candidatesが空の場合にクラッシュする
console.log(data.candidates[0].content.parts[0].text);
}
After: 堅牢なエラーハンドリング
async function callApi() {
try {
const response = await fetch('/api/gemini');
// 1. レスポンスステータスのチェック
if (!response.ok) {
const errorData = await response.json();
throw new Error(`API Error: ${response.status} - ${errorData.error?.message}`);
}
const data = await response.json();
// 2. オプショナルチェイニングで安全に値を取得
const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
if (text) {
console.log('取得成功:', text);
} else {
// 3. 構造が想定外だった場合の処理
console.error('Unexpected API response structure:', data);
}
} catch (error) {
// 4. 通信エラーなどの例外をキャッチ
console.error('Failed to call API:', error);
}
}
[まとめ]
Gemini APIやClaude Codeなどの外部AIサービスをVue.jsで扱う際は、「APIレスポンスは常に変動しうる」という前提で、オプショナルチェイニングを積極的に活用しましょう。エラーハンドリングを丁寧に行うことで、予期せぬ画面のクラッシュを防ぎ、信頼性の高いアプリケーションを構築できます。
