【フロントエンド入門9】非同期通信（AJAX、Fetch API）の使い方｜データのやり取りを効率化

Webアプリケーションがユーザーの操作に応じて即座にページを更新するのは、非同期通信の仕組みによるものです。ページのリロードなしにサーバーからデータを取得・送信することで、ユーザー体験を大きく向上させることができます。本記事では、非同期通信の基本概念、AJAX、Fetch APIの使い方について初心者向けに詳しく解説します。

非同期通信とは？
1. 同期通信と非同期通信の違い
2. 非同期通信のメリット
AJAXとは？
Fetch APIの使い方
Async/Awaitを使った非同期処理
1. 基本構文
実践：非同期通信を使った簡単なアプリケーション
1. 例：投稿一覧を表示するアプリ
結論

非同期通信とは？

同期通信と非同期通信の違い

同期通信：リクエストを送信すると、サーバーからの応答を待つ間、他の処理が一時的に停止します。
非同期通信：リクエストを送信した後も、他の処理を並行して実行できます。応答が返ってきたときにだけ指定した処理が実行されます。

非同期通信を使うことで、ユーザーがページをリロードすることなく、必要なデータだけを取得したり更新したりできます。

非同期通信のメリット

ページのリロードが不要で、スムーズなユーザー体験を提供
サーバーとの通信量が減り、パフォーマンスが向上
必要なデータのみ取得することで、効率的なデータのやり取りが可能

AJAXとは？

AJAXの概要

AJAX（Asynchronous JavaScript and XML）は、JavaScriptを使って非同期通信を実現する技術です。XMLHttpRequest（XHR）オブジェクトを使ってサーバーと通信し、必要なデータを取得・送信します。

基本的なAJAXの使い方

AJAXを使って非同期通信を行うには、次の手順が必要です。

XMLHttpRequestオブジェクトを作成する
リクエストの種類や送信先を設定する
リクエストを送信する
サーバーからの応答を受け取る

例：AJAXでデータを取得する

const xhr = new XMLHttpRequest();

// GETリクエストを設定
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts", true);

// レスポンスが返ってきたときの処理
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(JSON.parse(xhr.responseText));
    }
};

// リクエストを送信
xhr.send();

解説

openメソッド：リクエストの種類（GETまたはPOST）と送信先URLを指定します。
onreadystatechange：サーバーからの応答があったときに実行される関数を設定します。
sendメソッド：リクエストを送信します。

AJAXの限界

AJAXは強力な技術ですが、コードが煩雑になることがあります。そのため、より簡潔に非同期通信を行う方法として、Fetch APIが登場しました。

Fetch APIの使い方

Fetch APIとは？

Fetch APIは、モダンな非同期通信の方法で、AJAXよりもシンプルなコードでデータの取得や送信を行うことができます。Promiseを使って非同期処理を管理するため、可読性が高く、メンテナンスもしやすいです。

基本構文

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', error));

url：リクエストを送信するURL
options：メソッドやヘッダー情報などの設定（省略可能）
then：リクエストが成功したときの処理
catch：エラーが発生したときの処理

GETリクエストの例

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => response.json())
  .then(data => {
      data.forEach(post => {
          console.log(`タイトル: ${post.title}`);
      });
  })
  .catch(error => console.error('エラー:', error));

解説

response.json()：サーバーから返ってきたデータをJSON形式に変換します。
data.forEach：取得したデータをループして各投稿のタイトルを表示します。

POSTリクエストの例

サーバーにデータを送信する場合は、POSTメソッドを使います。

fetch("https://jsonplaceholder.typicode.com/posts", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        title: "新しい投稿",
        body: "これはサンプル投稿です。",
        userId: 1
    })
})
.then(response => response.json())
.then(data => console.log('投稿成功:', data))
.catch(error => console.error('エラー:', error));

解説

method：リクエストの種類（この場合はPOST）
headers：リクエストヘッダーを設定します。Content-Typeは送信するデータの形式を示します。
body：送信するデータをJSON形式で指定します。

Async/Awaitを使った非同期処理

Fetch APIはthenとcatchを使って非同期処理を行いますが、ES2017以降ではasync/awaitを使うことでさらに簡潔に記述できます。

基本構文

async function fetchData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('エラー:', error);
    }
}

fetchData();

解説

async関数：関数の前にasyncを付けることで、関数内でawaitを使えるようになります。
await：非同期処理が完了するまで待機します。
try...catch：エラーが発生した場合にキャッチして処理します。

実践：非同期通信を使った簡単なアプリケーション

例：投稿一覧を表示するアプリ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非同期通信の例</title>
</head>
<body>
    <h1>投稿一覧</h1>
    <ul id="post-list"></ul>

    <script>
        async function fetchPosts() {
            try {
                const response = await fetch("https://jsonplaceholder.typicode.com/posts");
                const posts = await response.json();
                
                const postList = document.getElementById("post-list");
                posts.forEach(post => {
                    const listItem = document.createElement("li");
                    listItem.textContent = post.title;
                    postList.appendChild(listItem);
                });
            } catch (error) {
                console.error('エラー:', error);
            }
        }

        fetchPosts();
    </script>
</body>
</html>

このアプリケーションは、Fetch APIを使ってサーバーから投稿データを取得し、リスト形式で表示します。

結論

非同期通信は、ユーザー体験を向上させるために欠かせない技術です。AJAXやFetch APIを使えば、ページをリロードせずに効率的にデータをやり取りすることができます。また、async/awaitを使った非同期処理の簡略化は、モダンなJavaScript開発において必須の知識です。次は、APIを利用したより複雑なアプリケーションに挑戦してみましょう。