JavaScriptでの非同期のwhileループの書き方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでの非同期のwhileループの書き方について解説しています。実行しているタスクの処理の完了を待たずに別の処理を実行することを非同期処理といいます。whileで非同期処理を行う場合の書き方と注意点を覚えましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでの非同期のwhileループの書き方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

非同期のwhileループの書き方について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

非同期処理とは

通常、処理は一つ一つ順番に処理の完了を待って次の処理を行います。非同期処理は、これとは違い実行した処理を待たずに次の処理を実行していきます。Javascriptで非同期処理を実現するのに代表的な方法は「Promise」を使用することです。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

非同期のwhileループの書き方と注意点

非同期処理は、先程も書いたとおり処理の結果を待たずに次の処理を実行してしまいます。非同期のwhile処理を作成する時は、その終了をちゃんと意識する必要あります。while分は通常で利用しても誤って無限ループにしてしまうことがあります。

同期の場合は、無限ループには入っていれば気が付きやすいですが、非同期で行うと気が付きにくくなります。また、見えないところで動いているので、大量に非同期の処理を実行してしまい、メモリを使いつくすようなこともありますので、注意しましょう。

また、例外処理を発行した時の動きも気を付ける必要があります。例外は非同期処理側では受け取れず、呼び出した側の方で例外を受ける必要があります。

 

実際に書いてみよう

<!DOCTYPE html>

<html lang="ja">

<head>

  <meta charset="utf-8">

  <title>closest JavaScript</title>

</had>

<body>

  <script type="text/javascript">

    console.log("1. 1秒後に非同期開始");

    setTimeout(() => {

        console.log("3. あとから非同期処理が実行");

        startTime = Date.now();

        while (true) {

            const diffTime = Date.now() - startTime;

            //一秒後に処理を終了

            if (diffTime >= 1000) {

                //必ず処理を抜けます

                console.log("4. " + diffTime + "経過後に非同期処理を抜けます");

                return;

            }

        }

        console.log("5. ここは出力されません");

    }, 1000);

    console.log("2. 先に同期処理のこちらが実行される");

  </script>

  </body>

</html>

 

まとめ

非同期処理は、もっと色々なことがあるのですが、まずは簡単なところから始めて利用を方法に慣れていきましょう

 

監修してくれたメンター

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。