エンジニア1年目奮闘日記「第3話　JSの非同期通信」

2024年10月29日

1. はじめに
2. ちなみにPortとは・・・
3. 非同期通信とは？
4. JavaScriptにおける非同期通信の基本
5. 非同期通信で起きたエラーと対策
6. まとめ

はじめに

こんにちは！お久しぶりです！8ヶ月前にエンジニアデビューをしたKです！
暑さにも負けず、日々プログラミングスキルを鍛え続けています！

今回は、自社プロダクト「Port」の改修作業を通して学んだ、JavaScriptの非同期通について、備忘録としてまとめたいと思います。

ちなみにPortとは・・・

「ブラウザで手軽に、音声・ビデオ通話でプロフェッショナルとすぐ繋がれる新サービス」です！

気になった方は下のリンクからぜひチェックしてみてください😀

https://online.port-app.jp

非同期通信とは？

非同期通信とは、プログラムが他の処理をブロックせずに、バックグラウンドで通信を行う方法です。

具体的には、サーバーとの通信やファイルの読み込みなど、時間のかかる処理が発生しても、メインスレッドを止めることなく他の処理を進めることができます。
これにより、ユーザーはページをリロードすることなく、スムーズな操作が可能となります。

JavaScriptにおける非同期通信の基本

JavaScriptでは、非同期通信を実装する方法がいくつかあります。

特に代表的なものとしては、’Promise’と’async/await’です。

‘Promise’とは？

‘Promise’は、非同期処理が完了することを「約束」するオブジェクトです。

非同期処理が成功した場合には’resolve’が呼ばれ、失敗した場合には’reject’が呼ばれます。

’async/await’とは？

async/awaitは、非同期処理をよりシンプルに書くための構文です。awaitを使うことで、非同期処理の完了を待ち、その後の処理に進むことができます。これにより、Promiseを使った非同期処理も、同期処理のように書けるため、コードが直感的で読みやすくなります。

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
     console.log("ユーザー情報:", data);
  } catch (error) {
    console.error("エラーが発生しました:", error);
  }
}

fetchData();

上記のコードでは、awaitを使ってAPIからデータを取得し、処理が完了するまで待機します。

データが返ってきたら、response.json()を使用してJSON形式に変換し、次に進みます。

エラーが発生した場合は、try…catchでエラーをキャッチして適切に処理をします。

この方法で、非同期処理をシンプルに記述することができます。

非同期通信で起きたエラーと対策

非同期通信を実装する際に、エラーが発生し、思ったように処理が進まないことがあります。このセクションでは、実際に経験したエラーの原因と、その対策について説明します。

レースコンディション

複数の非同期処理が同時に実行されると、結果が予期しない順序で返ってくることがあります。この問題が「レースコンディション」と呼ばれ、正しくデータが処理されない原因となります。

その対策

Promise.all()などを使用して、複数の非同期処理を全て解決してから次の処理に進むようにすることで、処理順序をコントロールできます。

async function fetchData() {  const [user, posts] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json()),
    fetch('https://jsonplaceholder.typicode.com/posts?userId=1').then(res => res.json())
  ]);

  console.log("ユーザー情報:", user);
  console.log("投稿情報:", posts);
}

この方法では、’user’と’posts’の取得が両方完了してから次の処理が実行されるため、レースコンディションが発生しません。