こんにちは！
最近、個人のXアカウントを開設して上機嫌のシモダです。
早いもので、もう2025年を迎えました。

北陸出身の身としては、雪のない年末年始は少し寂しくもありますが、どこへ行くにしても道路が歩きやすくて感動しております！

さて、今回はJavaScriptのfetch APIについてご紹介したいと思います！
fetch APIを使用すれば、比較的簡単に外部のデータを取得することが可能となり、充実したコンテンツを作成することができます。

今回はそんなfetch APIの使い方についてご紹介したいと思います！

fetch APIとは？

fetch APIとは、ブラウザとサーバーの間で非同期通信を行うためのWeb標準の仕組みです。

fetch関数を使えば、「サーバーからデータを取得する」や「サーバーにデータを送信する」といった操作を、シンプルでわかりやすい書き方で実現できます！

fetch APIを利用するメリット

fetch APIは、従来のXMLHttpRequestと比較して、よりシンプルで直感的な書き方でデータを取得することができます！

fetch APIを使用するメリットは、下記のとおりです。

Promiseベースのシンプルで直感的なコード記述

fetch APIは、Promiseをベースに考えられており、非同期処理をthenやcatchで繋いだり、async/awaitを使用して、いつも通り同期処理のように書くことができるので、コードの流れがわかりやすく直感的に書くことができます！

また、コードを読む方も処理の内容を追いやすいです！

柔軟なリクエスト設定

fetch APIでは、HTTPリクエストの設定が非常に柔軟におこなえるため、いろいろなオプションを指定してリクエストを送ることができます！

これにより、単純なデータの取得だけでなく、データの新規作成や変更・削除といった操作も可能になります！

外部ライブラリが不要

fetch APIは、ブラウザに標準で搭載されているため、外部のライブラリを追加する必要がありません。

軽量なプロジェクトにしたい場合や、外部依存を最小限にしたい場合に特に有利です！

fetch APIの使用方法

それではfetch APIの使用方法をご紹介していきます！

fetch("URL")
  .then((res) => {
    if (!res.ok) {
      throw new Error(`エラーです！ Status: ${response.status}`);
    }
    return res.json();
  })
  .catch((error) => console.error(error));

fetchを利用して、URLにGETメソッドでリクエストを送信してみるときのコードはこのようになります。

fetchは、Promiseベースで構成されているので、うまく受け取れた時と、そうでない時をチェーンメソッドで簡単に記述することができるので、直感的にコードを書くことができるのがよいですね！

catchでエラーの際の処理を記載していますが、こちらはネットワークエラーについてのエラーのみをスローするので、404エラーといったHTTPレスポンス自体がちゃんと返ってきている際にはエラーとならないので、okプロパティでのエラーハンドリングを忘れないように心がけています！

また、第二引数にオプションを指定することにより、いろいろなリクエストを送信することが可能となります！

詳細なオプション内容については、MDNをご覧ください！

具体的なfetch APIの使い方

使用方法についてご紹介したので、実際にfetchを使ってみましょう！
今回はTANE-beのサイトから、投稿の情報を取得してみようと思います！
WordPressを使用している場合、WP REST APIで簡単に投稿情報を取得することができます。

もしご自身のWordPress環境がある場合には、URLのお尻に/wp-json/wp/v2/postsをつけていただくと、投稿情報を見ることが可能です！

//URLから情報を取得してくる関数
function getPostInfo(url) {
  return fetch(url).then((res) => {
    if (!res.ok) {
       throw new Error(`エラーです！ Status: ${res.status}`);
    }
    return res.json();
  }).catch((error) => { console.error("情報の取得に失敗しました:", error); });
}

//実行
window.addEventListener("DOMContentLoaded", async () => {
  const body = document.getElementById("hoge");
  //TANE-beの記事情報を取得する
  const data = await getPostInfo("https://tane-be.co.jp/wp-json/wp/v2/posts");
  if (data) {
    //DOMの生成
    const titleContent = data[0]?.title?.rendered;
    const titleDom = document.createElement("h2");
    titleDom.textContent = titleContent;
    
    //挿入
    body.appendChild(titleDom);
  } else {
    //エラーハンドリング
    console.error("データの取得に失敗しました！");
  }
});

HTML側で、id=”hoge”の要素を準備すると、最新のTANE-beの投稿記事タイトルが登場すると思います！

このように、fetch APIを使用すると、簡単に外部の情報を取得してきて利用することが可能となります！

• 親サイトの投稿方法を子サイトにも入れたい！
• 関連会社の投稿を自社サイトにも掲載したい！
• サイト内の別ページの情報を、サーバーリクエストなしに行いたい！

といった一見難しく思われる場合でも、簡単に情報を取得してくることができるので便利ですね！

fetch APIが使えない時に確認すること

「なぜかfetchしてきたデータがでてこないよぉー！」という時に確認したいことをいくつかご紹介したいと思います！

APIエンドポイントが正しいか

そもそもリクエストしているURLにスペルミスはないか、ちゃんと正しいか確認してみましょう！

GETメソッドでのリクエストであれば、実際にブラウザにURLを入力してみるのも良いかと思います！

レスポンスのステータスコードの確認

レスポンスが返ってきたからといって、成功しているとは限りません！

404エラーや500エラーで情報が取得できていない場合でも、HTTPレスポンスが返却されているとエラーとは見なされません。

レスポンスのステータスコードを確認し、400番台・500番台のエラーが出ていないかを確認しましょう！

fetch("URL")
  .then((res) => {
    console.log(`Status Code: ${response.status}`);
  })
  .catch((error) => console.error(error));

CORS (Cross-Origin Resource Sharing)の問題

CORSとは、

という仕組みです。

異なるオリジン間でデータのやり取りをする際には、リクエスト・レスポンスそれぞれにHTTPヘッダの追加が必要となります。

もし、自分のドメイン以外から情報を取ってこようとしている場合には、相手にちゃんと許可されているかを確認しましょう！

非同期処理の誤りがないか

fetch APIは、Promiseベースで構成されているため、情報がきちんと取得できたか・取得に失敗したかの判定を待ってから後続のコードを実行する必要があります！

//async/await を使用しない実行
window.addEventListener("DOMContentLoaded", () => {
  const body = document.getElementById("hoge");
  //TANE-beの記事情報を取得する
  const data = getPostInfo("https://tane-be.co.jp/wp-json/wp/v2/posts");
  if (data) {
    //DOMの生成
    const titleContent = data[0]?.title?.rendered;
    const titleDom = document.createElement("h2");
    titleDom.textContent = titleContent;
    
    //挿入
    body.appendChild(titleDom);
  } else {
    //エラーハンドリング
    console.error("データの取得に失敗しました！");
  }
});

こちらのように、data変数に情報が入ってくるのを待たず処理を進めてしまうと、空の<h2>が挿入されてしまいます。
async/awaitを使用して、情報がdataに入ったことを確認してから後ろに進むようにしましょう！

最後に

わたしが初めてfetch APIを使用した時には、Promiseやasync/await、HTTPヘッダ・CORSといった難しい言葉が飛び交い、とっつきにくく眉間に皺を寄せながら実装した記憶があります。

しかし、fetch APIをうまく活用すれば、自分で準備をするとなると膨大な時間がかかるデータたちも簡単に入手し活用することが可能です。

データの取得や送信がスムーズになり、APIと連携したサイトやサービスの開発が可能になるのはとても魅力的ですよね！

ぜひ、みなさんがこのブログを通じて、fetch APIに興味を持つきっかけとなり、理解が深まるお役に立てれば幸いです！