fetch APIとは？｜JavaScriptでデータ取得する基本のキ

JavaScriptで「外部のデータを取得する」って聞くと、ちょっと難しそうに感じませんか？ でも、実は fetch() 関数を使えば、とてもシンプルに実現できます。

この記事では、JavaScript初心者でもすぐに使えるように、fetch API の基本を丁寧に解説していきます。 「結局どう使うの？」「どんな書き方なの？」を中心に、コード付きで紹介していきます！

---

fetch APIってなに？

fetch API は、JavaScriptで外部のサーバーと通信してデータを取得・送信するための仕組みです。

よくある使い道はこんな感じ：

• Webアプリで天気やニュースなどの情報を読み込む
• ボタンをクリックしたときにサーバーにデータを送る
• ページをリロードせずに一部だけ更新する

つまり、fetch は「ページとサーバーをつなぐ郵便屋さん」みたいな役割。

---

基本の使い方（GETリクエスト）

まずは、一番シンプルな使い方から見てみましょう。

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error("通信エラー：", error);
  });

解説

• fetch(url)：このURLにアクセスして！という命令
• .then(response => response.json())：返ってきたデータをJSONとして読み込む
• .then(data => {...})：読み込んだデータを使う
• .catch(...)：何かエラーが起きたときの処理

:::イラストポイント::: [POSTマン風キャラがデータの封筒をサーバーから持ってくるイメージ]

---

データを送信してみる（POSTリクエスト）

次は、逆にデータをサーバーに「送る」パターンです。

fetch("https://api.example.com/send", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "たろう",
    age: 25
  })
})
  .then(response => response.json())
  .then(result => {
    console.log("送信成功：", result);
  })
  .catch(error => {
    console.error("送信失敗：", error);
  });

補足ポイント

• method でリクエストの種類（GETやPOST）を指定
• body には送りたいデータをJSON形式で記述

---

よくあるエラーと対処法

初心者がつまずきやすいポイントもチェックしておきましょう：

エラー例	原因	対処法
CORSエラー	サーバー側が他ドメインからの通信を拒否してる	サーバー設定の見直し or 代理サーバー利用
400番台エラー	URLミス、パラメータ不足など	URLやデータの確認
JSONエラー	response.json()の前に失敗してる	response.ok で条件分岐も可

---

まとめ：fetch APIは思ってるより簡単！

• fetch() を使えば、データの取得や送信が超シンプルにできる
• GETとPOSTの基本をおさえれば、実用範囲は広い
• エラーも「あるある」なので、焦らず確認すればOK

「難しそう」で手が止まってた人も、まずはコピペで試してみるだけで一気に進めるはず！