【学習日記#13】非同期処理の基礎

ブログ

こんにちは、Ryuseiです！
今回は「非同期処理」について学んだ内容をまとめていきます。

目次
  1. 同期処理と非同期処理の違い
  2. JavaScriptでの非同期処理の書き方
    1. fetchとthen
    2. jQueryで書くと？
    3. async/awaitでスッキリ書く
  3. 学んだこと＆感想

同期処理と非同期処理の違い

まずは、基本の概念から。

  • 同期処理: 1つの作業が終わるまで次の作業は進まない
  • 非同期処理: 作業Aが終わる前に、他の作業Bを進められる

これがどういう場面で役立つかというと、特に「APIのレスポンス待ち」のとき。
APIからの返事がいつ来るかわからないのに、その間ずっと他の処理が止まっていたら不便ですよね？
そんなときに使うのが「非同期処理」です。

JavaScriptでの非同期処理の書き方

fetchとthen

例えばAPIから情報を取得する場合、こんなコードになります。

fetch('https://qiita.com/api/v2/items?query=tag:JavaScript')
  .then(response => {
    console.log(response);
    return response.json();
  })
  .then(data => {
    console.log(data);
  });

console.log('APIを叩きます');

この流れとしては、

  1. fetch()でAPIにリクエストを送る
  2. その間に console.log('APIを叩きます') が実行される
  3. .then() の中は、APIのレスポンスが返ってきてから順に実行

「.thenが上から順に実行される」のがポイント！
これで、APIからの返答を待ってから次の処理をする流れが作れます。

jQueryで書くと？

同じような処理をjQueryで書くとこんな感じ。

$.ajax('https://qiita.com/api/v2/items?query=tag:JavaScript')
  .done(data => {
    console.log(data);
  })
  .fail(() => {
    console.log('error');
  });

.done()で成功時の処理、.fail()でエラー時の処理を分けられます。
これもAPI待ちに便利！

async/awaitでスッキリ書く

.then()を何個も重ねると見づらくなる…そんな時はasync/awaitが便利。

async function func() {
  const response = await fetch('https://qiita.com/api/v2/items?query=tag:JavaScript');
  const data = await response.json();
  console.log(data);
}

awaitは「この処理が終わるまで次に進まないでね」という意味。
なので、上のコードでは fetch() の結果を待ってから次の処理に進みます。

学んだこと＆感想

非同期処理って、ただの便利な機能じゃなくて「効率的に処理を進めるための考え方」なんだなと感じました！
特にAPIのレスポンス待ちの場面では、非同期処理がないと詰まってしまうことがあるので、今後の学習や実装で積極的に使っていきたいと思います。

次回は、BEMやBootstrap、DOM操作の復習もしながら、もっと実践的なコードを書けるように頑張ります！

最後まで読んでくれてありがとうございます。