【JavaScript】fetch APIで、外部データを取得する最も簡単な方法

公開日: 2025年9月23日

前回の記事「APIって何？」では、APIを「魔法のレストラン」に例えて、その基本的な概念を解説しました。

ウェイター（API）に、メニュー表（ドキュメント）通りに注文（リクエスト）すれば、お皿（JSON）に乗った料理（データ）が運ばれてくる、という話でしたね。

では、私たちのプログラミング言語（JavaScript）を使って、具体的にどうやって「注文」すればいいのでしょうか？ 今日は、そのための最もモダンで、最もシンプルな方法である「fetch API」の使い方を、実際に動くコードと共にマスターしていきましょう。

fetch：注文を出すための、たった一つの関数

fetch は、ブラウザに標準で組み込まれている、非常に便利な関数です。これを使うだけで、外部のサーバー（API）と簡単におしゃべりができます。

今回は、例として、世界中の誰もが無料で使える「JSONPlaceholder」という、ダミーの投稿データを返してくれるAPIを使ってみましょう。

ステップ1：ウェイター（API）を呼んで、注文する

基本の形は、信じられないほどシンプルです。fetch() の中に、APIのURLを入れるだけ。 これだけで、JavaScriptは指定されたURLに対して「データをください！（GETリクエスト）」という注文を自動的に出してくれます。

// 1番の投稿データをください、という注文
fetch('https://jsonplaceholder.typicode.com/posts/1')

しかし、ここで一つ重要なことがあります。APIとの通信には、相手のサーバーの都合やネットワークの状況によって、時間がかかります。 そのため、fetch はすぐにデータそのものを返してはくれません。代わりに、「結果がいつか返ってくる約束手形（Promise）」を返します。

この「約束手形」を、最もエレガントに扱う方法が、以前「もう怖くない！JavaScriptの非同期処理」の記事でも紹介した、async/await です。

async/await と組み合わせた、最強の注文方法

ここからは、async/await を使った、現代のJavaScriptにおけるAPI連携の「黄金パターン」を見ていきましょう。 このサイト「SerchCode Pro」も、内部では全く同じ仕組みでAIと通信しています。

// async：この関数は「待つ」ことができる特別な関数ですよ、という宣言
async function getPostData() {
  try {
    // ステップ1: 注文して、返事(response)が来るまで「待つ(await)」
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');

    // ステップ2: 返事の中から、料理(JSONデータ)を取り出すのを「待つ(await)」
    const data = await response.json();

    // ステップ3: 受け取ったデータを使って、好きなことをする
    console.log("取得したデータ:", data);
    console.log("投稿タイトル:", data.title);

  } catch (error) {
    // もし、途中で何か問題（ネットワークエラーなど）が起きたら
    console.error("エラーが発生しました:", error);
  }
}

// 作った関数を実行
getPostData();

コードの解説

• async function ...
  関数を async で宣言することで、その中で await が使えるようになります。
• const response = await fetch(...)
  fetch は、まず「通信が成功したかどうか」などの情報を含んだ「返事（Responseオブジェクト）」を返します。料理そのものではありません。await を付けることで、この返事が来るまで、次の行に進むのを待ってくれます。
• const data = await response.json()
  受け取った「返事」の中から、私たちのお目当てであるJSON形式の「料理（データ）」を取り出す作業です。この取り出す作業にも少し時間がかかるため、ここでも await で待ちます。
• try...catch
  APIとの通信は、相手のサーバーがダウンしていたり、URLが間違っていたりと、失敗する可能性が常にあります。try...catch で処理全体を囲むことで、そういったエラーが発生しても、プログラム全体がクラッシュするのを防ぎ、エラーの内容を適切に処理することができます。これは、APIを扱う上での必須のマナーです。

まとめ：API連携は怖くない

async/await と fetch を組み合わせた、この「黄金パターン」さえ覚えてしまえば、あなたはもう、世界中のあらゆるAPIと自由自在に対話することができます。

天気予報、株価、翻訳、そしてAI。あなたのアイデア次第で、作れるアプリケーションの可能性は無限に広がります。

ぜひ、「SerchCode Pro」で fetch や async と検索して、色々な使い方を見ながら、あなただけのAPI連携を試してみてください。