Promiseとは？非同期処理が分かる考え方3ステップ

これまで肉体労働を中心に働いてきたが、キャリアチェンジを決意し、未経験からIT企業への転職が決まった。
TypeScriptの学習を進める中で、多くの初心者がつまずくポイントに出会った。それが Promise だ。

then、catch、async、await。
単語は見たことがあるが、
「何が起きているのか分からない」
「コードの流れが頭に入ってこない」
と感じていた。

この記事では、初心者視点で Promiseの役割と考え方 を整理し、
非同期処理の全体像がつかめるように解説していく。

Promiseとは何なのか

Promiseとは、将来完了する処理の結果を表すオブジェクトだ。

ポイントは「今は結果が分からない」という点にある。
非同期処理では、結果が返ってくるまでに時間がかかるため、
一時的にその結果を預かる入れ物が必要になる。

Promiseは、以下の3つの状態を持つ。

この状態遷移を理解するだけで、Promiseの全体像がかなり見えやすくなる。

JavaScriptは、基本的に上から順にコードを実行する。
しかしAPI通信やファイル読み込みのような処理は、すぐに結果が返らない。

Promiseがない場合、
「結果が返る前に次の処理が走ってしまう」
という問題が起きる。

Promiseは、
処理が終わったら次に進む
という流れを保証するための仕組みだ。

この考え方を理解できてから、
非同期処理が「魔法のようなもの」ではなく、
論理的な仕組みとして見えるようになった。

Promiseは、thenとcatchを使って結果を受け取る。

fetch("/api/data")
  .then((res) => res.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

thenは「成功した場合」、
catchは「失敗した場合」に実行される。

この書き方は、Promiseが状態を持っているからこそ成立する。
初心者の頃はチェーンが長くなり、読みづらいと感じていたが、
流れを一つずつ追えば、それほど難しくないと分かった。

async/awaitは、Promiseを 同期処理のように書ける構文だ。

async function getData() {
  const res = await fetch("/api/data");
  const data = await res.json();
  return data;
}

内部ではPromiseが動いているが、
上から順に処理を書けるため、理解しやすくなる。

awaitは「Promiseが解決するまで待つ」という意味であり、
Promiseを理解していないと、なぜ待てるのかが分からなくなる。

つまり、
async/awaitを理解するためにPromiseの理解が必要
という関係になっている。

Promiseが難しく感じる理由は、
「コードの見た目」と「実行タイミング」が一致しない点にある。

上から書いているのに、
実行は後回しになる。

このズレに慣れるまでは、
「動いてはいるけど分からない」状態が続いた。

しかし、Promiseを
「結果待ちの箱」
として捉えるようになってから、急に整理されてきた。

それまでの自分は、非同期処理を「理解不能な壁」だと感じていた。
Promiseを学んだことで、
「制御された流れ」
として捉えられるようになった。

これは、TypeScript学習全体にも良い影響を与えている。
コードを読むときも、
「ここはPromiseが返っている」
と意識できるようになった。

Promiseは、非同期処理を理解するための土台となる仕組みだ。

これらを押さえることで、TypeScriptのコードが一気に読みやすくなる。

未経験からのキャリアチェンジは不安も多いが、
こうして一つずつ理解を言語化しながら進むことで、
確実に前に進めている実感がある。

今後も、つまずいたポイントを中心に、学習記録を記事として残していく予定だ。