JavaScriptによる非同期処理とAPIの活用方法

keigo_fujiwara

2025年1月10日 23:29

非同期処理とは？

非同期処理は、処理が完了するのを待たずに次のコードを実行する仕組みです。これにより、ユーザーインターフェースがブロックされることなく、スムーズな操作性を実現できます。

JavaScriptでは、以下の方法で非同期処理を実現します：

コールバック関数
Promise
async/await

この記事では、これらの非同期処理の基本と、APIを使用したデータ取得の実践例を解説します。

1. 非同期処理の基本

1.1 コールバック関数

コールバック関数は、非同期処理が完了したときに実行される関数です。

function fetchData(callback) {
  setTimeout(() => {
    console.log('データ取得完了');
    callback();
  }, 2000);
}

fetchData(() => {
  console.log('次の処理を実行');
});

1.2 Promise

Promiseは、非同期処理の成功または失敗を表現するオブジェクトです。

const fetchData = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('データ取得成功');
  } else {
    reject('データ取得失敗');
  }
});

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.log(error));

1.3 async/await

async/awaitは、非同期処理を同期処理のように記述するための構文です。

async function fetchData() {
  try {
    const data = await new Promise((resolve) => setTimeout(() => resolve('データ取得成功'), 2000));
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

2. APIの活用方法

API（Application Programming Interface）は、アプリケーション同士がデータをやり取りするための仕組みです。

以下では、JavaScriptを使ってAPIからデータを取得する方法を紹介します。

2.1 Fetch API

Fetch APIは、リクエストを送信してレスポンスを処理するための標準的な方法です。

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.log('エラー:', error));

2.2 async/awaitを使ったFetch

async/awaitを使うことで、コードをシンプルに記述できます。

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

getPost();

3. 実践例：APIデータを表示するWebページ

以下のコードは、APIから取得したデータをリスト形式で表示する例です。

HTMLコード

<!DOCTYPE html>
<html>
<head>
  <title>APIデータ表示</title>
</head>
<body>
  <h1>投稿一覧</h1>
  <ul id="post-list"></ul>

  <script src="app.js"></script>
</body>
</html>

JavaScriptコード（app.js）

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.slice(0, 5).forEach((post) => {
      const listItem = document.createElement('li');
      listItem.textContent = post.title;
      postList.appendChild(listItem);
    });
  } catch (error) {
    console.log('エラー:', error);
  }
}

fetchPosts();

まとめ

JavaScriptの非同期処理とAPIの活用は、モダンなWeb開発において欠かせない技術です。この記事で学んだ基本概念と実践例を参考に、インタラクティブでデータ駆動型のWebアプリケーションを作成してみましょう。

次回は、JavaScriptを使ったリアルタイムデータの更新とWebSocketの活用について解説します。お楽しみに！

筆者について

藤原圭吾

BeEngineer梅田校の責任者
プログラミング教室の運営および授業の実施
情報Ⅰの教材作成および映像授業に出演
アプリ「Let's Code Py」を運営
集客用LINEの運営および広報映像の編集