fetchとは？API通信を理解するための基本3ステップ

これまで肉体労働を中心に働いてきたが、キャリアチェンジを決意し、未経験からIT企業への転職が決まった。
TypeScriptの学習を進める中で、「急に出てくるけど、よく分からない」と感じたのが fetch だった。

APIからデータを取得する、と説明されても、
「APIってそもそも何？」
「どこから何を取ってきているのか分からない」
という状態だった。

この記事では、初心者の自分が fetchを学びながら整理した考え方 をもとに、
データ取得の流れをシンプルに解説していく。

fetchとは何をするものなのか

fetchとは、サーバーと通信してデータを取得するための関数だ。
主にAPIからデータを取得する際に使われる。

基本形は以下のようになる。

fetch("/api/data");

この一文だけでは何も起きていないように見えるが、
裏ではサーバーへリクエストを送り、レスポンスを受け取る処理が動いている。

重要なのは、fetchは 非同期処理 であり、
戻り値として Promise を返すという点だ。

fetchを理解するためには、Promiseの存在を避けて通れない。

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

fetchの戻り値は、すぐにデータそのものではなく、
「将来データが返ってくる」というPromiseである。

そのため、thenやawaitを使って、
結果が返ってきた後の処理 を書く必要がある。

この関係性が分かってから、
fetchが単体で完結するものではないことに気づいた。

学習が進むと、fetchはasync/awaitとセットで書くことが多くなる。

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

この書き方では、

という流れが、上から順に読める。

内部ではPromiseが使われているが、
見た目は同期処理のように書けるため、初心者でも理解しやすい。

fetchを学んで最も混乱したのが、
「fetchしたらすぐにデータが使えない」点だった。

fetchで返ってくるのは Responseオブジェクト であり、
JSONデータそのものではない。

const res = await fetch("/api/data");
const data = await res.json();

この2段階処理を理解しないと、
「なぜもう一度awaitが必要なのか」が分からなくなる。

レスポンスとデータは別物、
この前提を知ってから、コードが一気に読みやすくなった。

通信処理では、必ず成功するとは限らない。
そのため、fetchとtry/catchはセットで使われることが多い。

try {
  const res = await fetch("/api/data");
  const data = await res.json();
  console.log(data);
} catch (error) {
  console.error(error);
}

ネットワークエラーやサーバーエラーは、
こちらでは制御できない問題だ。

だからこそ、
失敗した場合の処理をあらかじめ用意しておく
という考え方が重要になる。

fetch単体では難しく感じていたが、
Promise、async/await、try/catchと一緒に理解することで、
ようやく全体像がつながった。

これらはバラバラの知識ではなく、
一連の流れとして使われるものだった。

fetchは、TypeScriptやフロントエンド開発において、
避けて通れない重要な機能だ。

このポイントを押さえることで、
API通信への苦手意識はかなり減った。

未経験からのIT転職で不安は尽きないが、
学んだことをこうして言葉にすることで、
確実に理解が深まっていると感じている。

今後も、TypeScript学習でつまずいたテーマを中心に、
記事としてアウトプットを続けていく予定だ。