前回はウェブAPIの使い方について紹介しました。

前回はAPIの作り方について紹介しました。今回はウェブAPIの使い方について紹介していきます。【もっと詳しく知りたい人は是非これを読んでください！！】1冊ですべて身につくJavaScript入門講座価格:2794円(2025/1/12 2...

今回は非同期処理について紹介していきます。

【もっと詳しく知りたい人は是非これを読んでください！！】

1冊ですべて身につくJavaScript入門講座 [ Mana ]

価格:2794円
(2025/1/12 23:09時点)
感想(2件)

JavaScriptで非同期処理をマスターしよう！Promiseとasync/awaitの使い方を徹底解説

非同期処理は、JavaScriptで効率的なアプリを作るために欠かせない要素です。この記事では、Promiseとasync/awaitの基本から実践例までを詳しく解説します。さらに、非同期処理のコツや注意点も紹介しますので、ぜひ参考にしてください。

非同期処理とは？

非同期処理とは、「時間がかかる作業を待たずに、他の作業を同時進行する仕組み」のことです。例えば、ネットワークからデータを取得する場合、処理が完了するまでアプリ全体が止まってしまうと困りますよね。非同期処理を使えば、こうした問題を解決できます。

Promiseの基本

Promiseとは？

Promiseは、非同期処理の結果を表すオブジェクトです。以下が基本的な構文です。

const promise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("成功しました！");
  } else {
    reject("失敗しました...");
  }
});

promise
  .then(result => {
    console.log(result); // 成功時の処理
  })
  .catch(error => {
    console.error(error); // 失敗時の処理
  });

仕組み

new PromiseでPromiseオブジェクトを作成します。
resolveは成功時に実行される関数です。
rejectは失敗時に実行される関数です。
thenは成功した結果を処理します。
catchはエラーを処理します。

async/awaitの基本

async/awaitとは？

async/awaitを使うと、非同期処理をより直感的に記述できます。

const fetchData = async () => {
  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関数内でawaitを使用できます。
awaitはPromiseが解決するまで「待つ」キーワードです。
try/catchを使えば、エラー処理が簡単に書けます。

実践例

APIからデータを取得する

以下のコードは、APIからデータを取得して表示する例です。

const getPosts = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await response.json();
    posts.slice(0, 5).forEach(post => {
      console.log(`タイトル: ${post.title}`);
    });
  } catch (error) {
    console.error("データの取得に失敗しました:", error);
  }
};

getPosts();

複数の非同期処理を同時に実行する

Promise.allを使って、複数の非同期処理を効率的に行えます。

const fetchMultiple = async () => {
  try {
    const [userResponse, postResponse] = await Promise.all([
      fetch("https://jsonplaceholder.typicode.com/users"),
      fetch("https://jsonplaceholder.typicode.com/posts"),
    ]);

    const users = await userResponse.json();
    const posts = await postResponse.json();

    console.log("ユーザー:", users);
    console.log("投稿:", posts);
  } catch (error) {
    console.error("エラー:", error);
  }
};

fetchMultiple();

非同期処理のコツ

エラーハンドリングを徹底する

try/catchや.catchメソッドを活用し、エラー時の挙動をしっかり定義しましょう。

適切なコメントをつける

非同期処理は複雑になりがちなので、コードの意図を補足するコメントを書くと良いです。

過剰なawaitを避ける

Promise.allを活用して、効率よく非同期処理を進めましょう。

応用例

実践的なアプリ

チャットアプリ: メッセージの送受信を非同期で処理。
天気予報アプリ: APIから天気情報を取得し、リアルタイムで表示。
データ可視化: 取得したデータをグラフで表示するアプリ。

参考リンク

非同期処理をマスターして、アプリ開発をもっと楽しくしましょう！

以上が非同期処理の紹介になります。
次回はイベント処理について紹介したいと思います。

Javascript(11)非同期処理についてマスターしよう