JavaScriptのfetch入門【APIからデータを取得する方法】

JavaScript fetch とは？

ウェブアプリでは、サーバーからデータを取得する場面がよくあります。天気情報・ニュース・ユーザーデータなど、外部の API（エーピーアイ） からデータを取得するときに使うのが fetch（フェッチ） です。

APIとは Application Programming Interface の略で、「プログラムからデータを取得・送信するための窓口」です。

fetchの基本的な使い方

fetch('https://api.example.com/data')
  .then(function(response) {
    return response.json(); // JSONに変換
  })
  .then(function(data) {
    console.log(data); // データを使う
  })
  .catch(function(error) {
    console.log('エラー：' + error);
  });

💡 文字列操作入門で基礎を確認できます。

async/awaitで書く（推奨）

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');

    if (!response.ok) {
      throw new Error('HTTPエラー：' + response.status);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log('エラー：' + error);
  }
}

getData();

🔗 あわせてPromise入門もチェックしてみましょう。

実践例：JSONPlaceholderでデータを取得

JSONPlaceholder（jsonplaceholder.typicode.com）は、テスト用の無料APIです。実際に試してみましょう。

async function getPost() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await response.json();
  console.log(post.title); // 投稿のタイトルが表示される
}

getPost();

📖 詳しくはエラー辞典で解説しています。

fetchの実践的な使い方

fetchを使った実践的な例を紹介します。

使い方1：天気情報を取得して表示する

無料の天気APIからデータを取得して、ページに表示する例です。fetchでAPIのURLにリクエストを送り、返ってきたJSONデータから気温や天気を取り出して画面に表示します。

使い方2：ランダムな名言を表示する

名言APIからランダムな名言を取得して表示する例です。ボタンを押すたびに新しい名言が表示されるページが作れます。

使い方3：画像を検索して表示する

画像検索APIを使って、キーワードに合った画像を取得して表示する例です。入力欄にキーワードを入れると、関連する画像が並ぶギャラリーが作れます。

async/awaitで読みやすく書く

fetchはPromise（プロミス）を返します。Promiseとは「あとで結果が届く約束」のようなものです。.then()で結果を受け取る書き方もありますが、async/await（アシンク/アウェイト）を使うとより読みやすく書けます。

async/awaitの書き方は次の通りです。関数の前にasyncをつけて、fetchの前にawaitをつけます。awaitは「結果が届くまで待つ」という意味です。上から順番に読めるので、処理の流れがわかりやすくなります。

エラーハンドリング

外部のサーバーからデータを取得するとき、必ず成功するとは限りません。サーバーが落ちていたり、ネットワークが切れていたりすることがあります。

エラーに対応するには、try...catch文を使います。tryの中にfetchの処理を書き、エラーが起きたらcatchの中の処理が実行されます。「データを取得できませんでした」のようなメッセージを表示すれば、ユーザーが混乱しません。

また、fetchはネットワークエラー以外ではエラーを投げません。サーバーが404や500を返しても、fetchは成功扱いになります。レスポンスのokプロパティを確認して、falseならエラーとして処理しましょう。

fetchでよくあるミス

ミス1：JSONの変換を忘れる

fetchのレスポンスはそのままではJavaScriptのオブジェクトとして使えません。response.json()で変換する必要があります。この変換もPromiseを返すので、awaitが必要です。

ミス2：CORSエラーが出る

別のドメインのAPIにアクセスすると、ブラウザがセキュリティのためにブロックすることがあります。これをCORS（コース）エラーと呼びます。APIがCORSを許可していない場合は、そのAPIをブラウザから直接呼び出すことはできません。

ミス3：非同期処理を理解していない

fetchは非同期処理です。fetchの次の行が実行されるとき、まだデータは届いていません。awaitを使わずにデータを使おうとすると、undefinedになります。

ミス4：APIキーをコードに直接書く

有料APIのキーをJavaScriptに直接書くと、誰でも見られてしまいます。公開するコードにAPIキーを含めないように注意しましょう。無料で公開されているAPIから始めるのが安全です。

最初は無料のAPIで練習しましょう。JSONPlaceholderやPokeAPIなど、登録不要で使えるAPIがたくさんあります。データを取得して画面に表示する練習を繰り返せば、自然と使いこなせるようになります。

まとめ

fetchを使いこなすと、外部APIからデータを取得するアプリが作れます。JavaScriptの基礎はJavaScript入門で復習できます。取得したデータの表示はDOM操作入門を参照してください。

あわせて読みたい記事

• JavaScriptとは？初心者向け解説 — JS基礎に戻る
• JavaScript DOM操作入門 — 取得データをDOMに表示
• JavaScriptイベント入門 — ボタンクリックでfetch実行
• JavaScriptオブジェクト入門 — JSONとオブジェクトの関係
• localStorage入門 — 取得データのキャッシュ
• Web APIとは？ — APIの全体像