JavaScriptで関数の実行結果が「Promise { }」になってしまい、値が取得できないのはなぜですか？

非同期関数（async関数）を呼び出す際に await を忘れていることが原因です。await を付けないと、処理の完了を待たずにPromiseオブジェクトそのものが返されるため、必ず await を付けて結果を待機させる必要があります。

await を書き忘れると、プログラムの実行順序にどのような影響が出ますか？

非同期処理の終了を待たずに次の行のコードが実行されるため、データが空のまま処理が進むなどのバグが発生します。処理の順番を保証したい箇所では、呼び出し側に await が付いているか必ず確認しましょう。

await を付け忘れて発生するエラーを防ぐ、効果的な方法はありますか？

返り値が意図せずオブジェクトになっている場合は await 忘れを疑いましょう。また、ESLintなどの静的解析ツールを導入し「no-floating-promises」ルールを有効にすることで、await 忘れを自動的に検知して防ぐことができます。

await 忘れ｜コードで実践 - チョットデキル

このレッスンで分かること

この記事では「await 忘れ」をデバッグ基礎の現場で使える形で整理します

await 忘れの問題 をおさえれば、現場で迷ったときに立ち戻れる

問題のパターン をおさえれば、現場で迷ったときに立ち戻れる

エラーメッセージ をおさえれば、現場で迷ったときに立ち戻れる

値の流れを図で見る をおさえれば、現場で迷ったときに立ち戻れる

await 忘れとは

Promiseを返す関数で await を忘れると、意図しない結果になります。本レッスンでは、await 忘れの基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

await 忘れの問題

async 関数内で Promise を返す関数を呼ぶとき、await を忘れると、解決された値ではなく Promise オブジェクト自体が返されます。

Promise — 非同期処理 の「完了予約」を表すオブジェクト。中身の値を取り出すには await か .then() で 解決を待つ 必要があります。

問題のパターン

JavaScript

async function fetchUser() {
  // NG: await がない
  const response = fetch('/api/user');  // Promise が入る
  const data = response.json();  // エラー！response は Promise

  // OK: await あり
  const response = await fetch('/api/user');
  const data = await response.json();
  return data;
}

エラーメッセージ

プレーンテキスト

TypeError: response.json is not a function

Promise オブジェクトには .json() メソッドがないためエラーになります（TypeError が発生）。

値の流れを図で見る

diagram (will load when visible)

await があると Promise が 解決値 に置き換わる ため、その後の .json() が成功します。なければ Promise のまま渡され、メソッド呼び出しで型エラーになります。

解決のコツ

Promise を返す関数（fetch, setTimeout をラップしたもの等）には await をつける

await を入れる判断フロー

diagram (will load when visible)

現場でよくある具体例

現場ケース 1 — 「本番だけ落ちる」謎エラーが、環境変数の NODE_ENV 違いで設定ファイルを切り替えていなかったことが原因。二分探索でコミットを絞り 30 分で解決
現場ケース 2 — フロントの無限ローディングは、useEffect 依存配列に毎レンダー新しい関数を渡していた。React DevTools のレンダー回数で気づけた
現場ケース 3 — DB の遅いクエリは EXPLAIN でフルスキャン発覚。複合インデックス追加で 300 倍速く。「測ってから直す」の典型例

次にとるべきアクション

直近 1 週間で詰まったエラーを 1 つ思い出す — そのエラーに「await 忘れ」で学んだアプローチを適用してみる
デバッグメモのテンプレを自分用に作る — 現象・再現手順・仮説・検証結果の 4 項目を markdown で固定化する
console.log だけで解いていた問題に DevTools のブレークポイントを使う — ステップ実行を 1 回でも体験する

次のレッスン

次は 論理エラー: 条件の間違い で、Promiseを返す関数で await を忘れると、意図しない結果になりますを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

await忘れの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. await忘れとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

MDN Web Docs「Debugging JavaScript」 — ブラウザ DevTools を使ったデバッグ手順（出典: Mozilla, https://developer.mozilla.org/ja/docs/Tools/Debugger）
Google Chrome DevTools 公式ドキュメント — ブレークポイント・パフォーマンスタブ等の正式仕様（出典: Google, https://developer.chrome.com/docs/devtools/）
IEEE Software「Why Programs Fail」 — 不具合発見と修正プロセスに関する古典研究（出典: Andreas Zeller, Morgan Kaufmann, 2009, https://ieeexplore.ieee.org/）

学習を加速したい方へ

デバッグの基礎ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータルで実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

await 忘れ