Node.js

実際に書いてみる！Node.jsのasyncの使い方【初心者向け】

初心者向けにNode.jsでasyncの使い方について解説しています。非同期処理を行う流れについて理解できるはずです。同じ処理を行うpromiseとの違いについても説明し、実際にインストールして使ってみているので、参考にしてみてください。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

Node.jsでasyncを使う方法を解説します。

非同期処理を行う上でpromiseとの違いについても理解しておくと良いでしょう。

なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。

今回はasyncというパッケージを使ってみよう。

田島メンター！asyncでは何ができるんですか〜？

asyncは非同期処理を行う際に使用するパッケージだよ。まずは非同期処理がどういうものかというところから見ていこう。

分かりました！

Node.jsのasyncとは

Node.jsのasyncは非同期処理を可読性の高いコードで実装できます。

非同期処理とは

非同期処理とはページが更新された際などに、更新前と更新後を比較して足りない部分だけをデータ通信する処理のことです。

この非同期処理の事をフロントエンド側の処理ではAjaxと呼ぶ事もあります。

Node.jsでも使用されているJavaScriptでは、非同期処理の際コールバック関数を使用します。しかし、処理が複雑になるに連れて、コールバック関数が入れ子になり、ソースコードを見た時に処理の内容が分かりづらくなります。

実務上でも、非同期処理実装時に、Node.jsのasyncを利用することで、コールバック関数のの書き方を明確にし、可読性と保守性を高めることが出来ます。

非同期処理実装方法としてのpromiseとasync

Node.jsの非同期処理にはpromiseを使用する方法もあります。

実は、promiseよりもasyncの方が簡潔に非同期処理実装が可能です。

しかし、asynicはInternet Explorer等、非対応のブラウザも存在するため、採用には実務上でもよく考える必要があります。

Node.jsでasyncを使う方法

asyncパッケージをインストールする方法

コマンド

npm install async

解説

npm install asyncでasyncパッケージをインストールします。

npmのインストール方法についての記事も必要であればチェックしておきましょう。

async処理の文法

ソースコード

async.メソッド名([
  function(callback) {
    処理内容
  }
});

解説

1行目のasync.メソッド名( [では、asyncのメソッド名を指定して処理方法を呼び出します。

2行目のfunction(callback) {では、callbackの部分の引数に基づいて処理を行います。

引数に関しての記事も参考にしてみてみてください。

3行目の処理内容で実際に処理を行います。

4行目で処理を終了します。

asyncのインストールと、基本の書き方になるよ。

この「メソッド名」の部分には何が入るんですか？

ここに書く内容によって、処理の方法が変わってくるんだ。ここではwaterfall・series・parallelという3つのメソッドについて説明しよう。

[PR] 未経験からWebエンジニアを目指す方法とは

async処理メソッドの代表例

waterfall

配列を使用して非同期処理を行います。

配列の順番に従って実行されます。

series

配列を使用して非同期処理を行います。

配列の順番に従って実行されます。

waterfallとの違いは、次の処理を行う場合にコールバック関数を呼び出して処理を続ける必要があります。

このコールバック関数に引数として渡した値が、処理の最後に配列にも順番に代入されます。

parallel

parallelは並行して処理されます。

つまり、seriesのように順番に次の関数が実行されません。

並行してコールバック関数を呼び出して処理を続け、その

このコールバック関数に引数として渡した値が、処理の最後に配列にも代入されます。

Node.jsでasyncを使う方法を解説しました。

非同期処理について理解しておきましょう。

Node.jsの学習サイトもまとめているので、合わせて参考にしてみてください。

waterfall・series・parallelそれぞれの特徴を解説したよ。

並行して処理を行いたい場合は、parallelを使用すればいいという感じですね。

他に非同期処理を行うパッケージとして、promiseというものもあるんだ。こちらも併せて覚えておこう。

了解です。ありがとうございました！

また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。

Node.jsを使ってWebアプリケーションを開発することができます。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。

アップデートの方法！npm updateの使い方【初心者向け】

今回はnpm updateについて解説します。パッケージをアップデートする方法について説明しているので、ぜひコマンドを打ちながら行っていきましょう。 ...

Node.js

【ターゲット別】入門から始める！Node.jsが学習できるサイト10選

今回は、Node.js入門として、Node.jsを習得できる学習サイト10選を紹介します。動画で学ぶスタイルや読み物で学ぶスタイルと学習方法も自分に合っ...

Node.js

バージョンの確認！npm versionの使い方【初心者向け】

今回は、npm versionについて解説します。 npm自体のバージョンやnpmで管理しているパッケージのバージョンを確認したい場合に参考にしてみてくだ...

Node.js

HTTPリクエストを簡単に！npm requestを使う方法【初心者向け】

今回は、npm requestについて解説します。 HTTPリクエストを簡単に行いたい場合に参考にしてみてください。実際にrequestをインストールして...

Node.js

Node.jsでhttps.getしてJSONパースする方法【初心者向け】

Node.jsでhttpsでgetしてJSONパースする方法を解説します。簡単なプログラムを書きながら説明しているので、ぜひ参考にしてみてください。 ...

Node.js

プロキシサーバーを使う際に役立つ！npm proxyの使い方【初心者向け】

今回は、npm proxyについて解説します。 Node.js環境でプロキシサーバーを利用する場合に参考にしてみてください。な...

Node.js

あわせてよく読まれている記事

Pythonの同期処理と非同期処理について現役エンジニアが解説【初心者向け】

Pythonの同期処理と非同期処理について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Pythonの同期処理と非同期処理について詳しく説明していくね！大石ゆかりお願いします！目次同期処理とは非同期処理とは同期処理と非同期処理を比較してみようまとめ同期処理とは同期処理とは、プログラムにおいて、ある一つのタスクを実行中に他のタスクを実行したとき、先に実行中だったタスクの処理が中断する処理です。たとえば、メインの実行文の中に特定の処理を行う関数が実行されている間は、メインの実行文の処理は中断されて関数の実行が終了したら再開する仕組みです。図にすると、以下のようになります。 [PR] 未経験からWebエンジニアを目指す方法とは非同期処理とは同期処理の一方で非同期処理はある一つのタスクを実行している傍らで、別のタスクを並行して実行する処理のことをいいます。非同期処理を行なうことで時間のかかる処理や複数のタスクを同時進行で行なうときにつかうと全体の処理時間の短縮に繋がります。こちらを図にすると以下の処理になります。同期処理と非同期処理を比較してみよう同期処理と非同期処理について、ここまで紹介してきましたが今度はPythonを例に同期処理と非同期処理の違いをサンプルコードで比較してみます。今回は指定した引数の間sleepを実行するシンプルな関数を取り入れたサンプルです。まずは、同期処理を行う例を見てみます。 import time def waiting(sec): print("======{}sec Waiting Start ========".format(sec)) time.sleep(sec) print("======{}sec Waiting Finish========".format(sec)) if __name__ == "__main__": waiting(3) waiting(2) waiting(1) こちらのサンプルを実行すると、以下の結果が出力されます。 ======3sec Waiting Start ======== ======3sec Waiting Finish======== ======2sec Waiting Start ======== ======2sec Waiting Finish======== ======1sec Waiting Start ======== ======1sec Waiting Finish======== 関数を上から順番に実行されるので、一つの処理が終わった瞬間に次の処理が実行されるようになります。続いて非同期処理を行う場合はどうなるのかを見ていきましょう。 Pythonで非同期処理を行なう際にはasyncioを使います。先程のサンプルをasyncioを使って非同期処理にしてみます。asyncioはPythonの標準モジュールです。 import asyncio async def waiting(sec):

Python

特性を理解する！ノンブロッキングとは【初心者向け】

今回は、ノンブロッキングについて解説します。 Node.js環境下において、画面遷移せずに現在の処理状況を確認しつつ、他の処理も実行したい場合に参考にしてみてくださいね。なお本記事は、TechAcademyのNode.jsオンライン講座の内容をもとに作成しています。田島悠介今回はノンブロッキングという言葉について勉強してみよう。加えて同期処理・非同期処理についても解説していくよ。大石ゆかり田島メンター！非同期処理というと、Promiseやasyncというパッケージがありましたよね。ノンブロッキングというのは何ですか～？田島悠介ノンブロッキングと非同期処理は共通するところが多いけれど、少し違う点があるんだ。それぞれの具体的な特徴を挙げてみよう。大石ゆかりお願いします！ノンブロッキングとはノンブロッキングとはNode.jsでは、ノンブロッキングI/Oとも呼ばれます。ノンブロッキングI/Oとは、何かの処理前に、処理待ちが発生する場合、すぐに関数から何か返ってくるという処理です。 I/OとはInput/Outputの略です。日本語では、入出力を意味します。コンピューターでは何かしらの情報をInput（入力）して、処理結果をOutput（出力）します。この一連の流れをI/Oと呼びます。ノンブロッキングをより理解するためには、ブロッキング処理（同期処理）、非同期処理を理解する必要があります。ブロッキング処理（同期処理）で料理を作るブロッキング処理と同期処理は厳密に言うと違う点も存在しますが、今回は非同期処理の説明も合わせるため同じような意味として、ブロッキング処理（同期処理）として解説します。ブロッキング処理（同期処理）はこれまでのWebサービスでの処理方法です。目玉焼きという料理を例に考えてみます。処理フライパンを火にかける ↓ 油をひく ↓ 卵を割る ↓ 水を入れる ↓ フタをする ↓ 出来上がる ↓ 皿を用意する ↓ 皿に盛りつける解説簡単に言うと、Aという処理を行っている間は、次のBという処理は手を付けないと言う事です。目玉焼きという料理に例えると順番に処理をすることになります。 [PR] 未経験からWebエンジニアを目指す方法とは非同期処理で料理を作る非同期処理は同期せずに処理を実行する方法です。目玉焼きという料理に例えると次のようになります。処理フライパンを火にかける ↓ 油をひく ↓ 卵を割る ↓ 水を入れる ↓ フタをする ↓ 出来上がりの通知が来るまでの間で皿を用意する ↓ 出来上がりの通知が来たら皿に盛りつける解説ブロッキング処理（同期処理）との違いとして、フタをしたあと、出来上がりの通知が来るまでの間、皿を用意するという別の処理を行うことができます。そして、自身で出来上がったかの確認をすること無く、出来上がったという通知が来てから皿に盛り付けています。つまり、皿を用意する以外の処理が存在していれば、出来上がりの通知が来るまでの間は他の処理をすることが可能です。田島悠介まずは同期処理・非同期処理の特徴だね。大石ゆかり非同期処理は、他の処理を行っているときも並行して別の処理を行うって感じでしょうか。田島悠介次はノンブロッキングでの処理方法と、非同期処理との違いについて見てみよう。ノンブロッキング処理で料理を作るノンブロッキング処理は非同期処理と似ていますが少し違います。目玉焼きという料理を作る過程を見ながら考えてみます。処理フライパンを火にかける ↓ 油をひく ↓ 卵を割る ↓ 水を入れる ↓ フタをする ↓ 数秒毎に卵に日が通っていないかチェックする ↓ 卵に火が通っていなかったので、とりあえず皿を出す ↓ 数秒毎に卵に火が通っていないかチェックする ↓ 出来上がっていたので皿に盛る解説ノンブロッキングもブロッキング処理（同期処理）と異なり、並行して別の処理を行うことができます。ただ、非同期処理と異なる点として、非同期処理では目玉焼きに火が通ったかどうかは通知によって知ることができます。ノンブロッキングでは、目玉焼きに日が通っていないかチェックする事で知ることができます。実際のシステムでノンブロッキングは、処理がすぐできない場合、エラーが返ってきてブロック状態にさせないという処理を行います。今回は、ノンブロッキングについて解説しました。田島悠介最後にノンブロッキングの特徴について解説したよ。大石ゆかりプロセスをブロック状態にさせないから、ノンブロッキングということなんですね。田島悠介実際に処理を行う際の記述方法などはまた別のところで解説するので、まずは全体の流れを把握しておこう。大石ゆかり頭に入れておきます。ありがとうございました！また、オンラインのプログラミングスクールTechAcademyでは、Node.jsオンライン講座を開催しています。 Node.jsを使ってWebアプリケーションを開発することができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、習得することが可能です。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

Node.js

Pythonで非同期処理を実装する方法を現役エンジニアが解説【初心者向け】

Pythonで非同期処理を実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介非同期処理を実装する方法について詳しく説明していくね！大石ゆかりお願いします！目次非同期処理とは非同期処理を実装する方法実際に実装してみようまとめ非同期処理とは非同期処理とは、ある処理Aの途中で、Aを止めずに、別の処理Bを並行することです。対義語は同期処理です。例えば、スマートフォンで音楽をダウンロードするケースを考えます。ダウンロードボタンを押すと、ダウンロード完了まで他の処理を行えない(ブロックする)のが同期処理です。ダウンロード中もブラウザやチャットなど別の処理を継続できるのが非同期処理です。 [PR] 未経験からWebエンジニアを目指す方法とは非同期処理を実装する方法・Pythonで非同期処理を実装するにはasyncioモジュールを用います。・asyncioのasync/await構文を用いることで、分散処理やネットワーク入出力といった非同期処理を実装しやすくなります。・非同期処理の対象とする箇所でasyncキーワードを記述します。・非同期処理の終了を待機する箇所でawaitキーワードを記述します。実際に実装してみよう asyncioには複数の用途がありますが、ここではコマンドの並列実行に用います。ソースコード import asyncio async def run(cmd): proc = await asyncio.create_subprocess_shell( cmd, stdout=asyncio.subprocess.PIPE, stderr=asyncio.subprocess.PIPE)

Python

JavaScriptのPromise.rejectメソッドの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのPromise.rejectメソッドの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次Node.jsのasyncとはNode.jsでasyncを使う方法async処理メソッドの代表例そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptのPromise.rejectメソッドの使い方について詳しく説明していくね！大石ゆかりお願いします！はじめに JavaScriptで非同期処理を実装する際に、エラーハンドリングを行うrejectオブジェクトに関して説明をします。現在多くのWebサイトで、以下の目的のため非同期処理を実装しています。一部のコンテンツの表示速度改善 SPA（Single Page Application）によるUI向上 API連携今回は非同期処理を実装する際に、大切なエラーハンドリングと注意点に関して解説します。ぜひ実装で使えるようになりましょう。非同期処理とは処理には大まかに分けて以下2つの実行方式があります。同期処理非同期処理まずはそれぞれの実行方式に関して説明します。それぞれの処理方式に関して、ニュースサイトの記事を表示する例で説明します。 [1]記事タイトルを取得・表示（1秒） [2]記事の画像を取得・表示（1秒） [3]記事に対するコメントを取得・表示（3秒） [4]関連記事を取得・表示（3秒） [5]広告を取得・表示（2秒）同期処理 1つ1つの処理が順番に行われ、1つの処理が完了するまで次の処理は実行されない処理方式です。普段何気なくコーディングをしている処理が、この同期処理です。 [1]から[5]までの処理が順番に行われて初めてページが表示されるので、合計で1つの記事を表示するのに10秒かかる計算です。ページ表示されるまで10秒も時間がかかると「遅い」「重い」サイトと思われてしまうデメリットがあります。一方処理の実装方法によっては、すべてのコンテンツ（データ）の整合性を担保できるメリットがあります。非同期処理 1つの処理が終わるのを待たずに、並列で処理を行う方法です。 [1]と[2]が完了したら一度画面をユーザーに表示させた後に[3]、[4]、[5]の処理を並列で処理させます。まずはメインコンテンツなどを表示した後に、ユーザーに読み込み中であることを知らせた上で、サブコンテンツや広告などを順次読み込んでいきます。ユーザーからすると記事の表示までは2秒、その後3秒後にすべてのコンテンツが表示されます。すべてのコンテンツの表示する時間差は5秒ですが、記事を見ている間に残りのコンテンツも表示されるので、体感では8秒程早くなります。以下イメージ図ですが、[3]から[5]が並列で処理されている状態を表しています。今回はこの非同期処理にPromiseオブジェクトを使い、前述のrejectオブジェクトでエラーハンドリングを行う説明をします。 [PR] 未経験からWebエンジニアを目指す方法とはPromiseオブジェクトとは Promiseオブジェクトとは、非同期処理の結果と結果の値を表すオブジェクトです。 APIなどで通信するような時間のかかる処理などに非同期処理を使うことで、処理を止めずに進めることができます。非同期で実行している処理が完了してから行いたい処理がある場合に、Promiseオブジェクトを使うことで簡潔に記述できます。例えば、通信してデータを取得するような処理がある場合、処理が終わるまでデータがありません。この場合、データが取得できてから、データを使う処理を行う必要があります。このような非同期で行う処理の戻り値をPromiseオブジェクトにすることで、処理結果と結果の値を管理でき、非同期処理と他の処理を連動させることができます。 Promise.rejectとは平たく言うと、Promiseで管理している非同期処理が失敗した時に呼ぶメソッドです。 rejectが失敗した時に呼ばれるのに対して、成功した場合はresolveというメソッドが呼ばれます。 Promise.rejectの使い方 rejectはPromiseオブジェクトのメソッドなので、以下のように記述することで使えます。 Promise.reject("失敗した理由は○○です") .then( function(successData) { //成功したとき（resolveが呼ばれたときはこちらの処理が実行されます） console.log(successData); }, function(error) { //失敗したとき（rejectが呼ばれたときはこちらの処理が実行されます） console.log(error); }); 引数は省略可能ですが、処理が失敗した理由を渡すことが多いです。失敗の理由がわかれば、プログラムを書いた人は調査をスムーズに行うことができます。またユーザーにはエラーメッセージなどで、一部の処理が失敗したことを伝える処理を実装することもあります。実際に書いてみよう以下ニュースサイトの例で、[3]以降の処理を非同期で実装するパターンです。実装内容が多いですが、それぞれコピーして各ファイルを作成して処理の動きを見てみましょう。 ※非同期処理とわかりやすいように、各処理に2秒から3秒の待機時間を入れています。 <html> <head>   </head> <body> <h2 class='title'>記事タイトル</h2> <div class= 'contents'> <img src="https://picsum.photos/id/237/100/100" /> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>

JavaScript

JavaScriptのPromiseの仕組みについて現役エンジニアが解説【初心者向け】

JavaScriptのPromiseの仕組みについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 Promiseの仕組みについて詳しく説明していくね！大石ゆかりお願いします！目次 Promiseとは Promiseの動作の仕組み実際に使ってみようまとめ Promiseとは非同期処理の完了または失敗を表すオブジェクトです。非同期処理とはなにか。非同期処理を理解するために、まずは同期処理について説明します。同期処理とは、平たく言うと「ソースコードの上から順番に処理される」ことです。 JavaScriptは通常、ソースコードの上の行から順に処理がおこなわれます。具体的な例を紹介します。下記のソースを実行すると、コンソールには1つ目、2つ目、3つ目と表示されます。 console.log('1つ目'); console.log('2つ目'); console.log('3つ目'); ここで仮に2つ目の処理に時間がかかっても、3つ目の処理は2つ目の処理が終わるまで実行されません。同期処理では、必ず順番どおりに処理がおこなわれます。つまり、順番どおり＝同期している　となります。これに対して非同期処理は、同期していない処理、つまり順番どおりではない処理ということになります。具体的な例を紹介します。下記のソースを実行すると、コンソールには、1つ目、3つ目、2つ目と表示されます。 console.log('1つ目'); setTimeout( () => console.log('2つ目'), 5000); console.log('3つ目'); setTimeoutメソッドを使って、2行目の処理を5秒後に実行するようにしています。 setTimeoutを使ったことで、非同期になり2つ目の処理の終わりを待たずに3つ目が実行されています。同期処理だと必ず順番どおりになる代わりに、途中に大きなデータを取得するような時間のかかる処理があると、その後の処理がおこなわれないため、画面の表示がとまったり、操作できなかったりするような状態になります。非同期処理にすることで、時間のかかる処理を待たずにその後の処理がおこなわれ、画面の表示や操作ができるようになります。 [PR] 未経験からWebエンジニアを目指す方法とはPromiseの動作の仕組み非同期処理の後に処理をおこないたいケースがあります。たとえば、いつ完了するかわからない通信をする処理を非同期にして、その後で通信結果を使って処理をするようなケースです。 Promiseオブジェクトを使うと、非同期処理の後に処理をおこなうことができます。記述方法がいくつかあるので、今回は簡単なものを1つ紹介します。 new演算子を使って生成するとPromiseオブジェクトを作成できます。作成の際は、引数に関数を渡します。その関数の引数に2つの関数を渡します。具体的には、下記のような記述になります。 new Promise( (functionA, functionB) => { //ここで非同期の処理をおこない、結果によって引数のどちらかの関数を呼び出す。 //1つ目の関数を呼び出すと、処理が成功したことになる。 //2つ目の関数を呼び出すと、処理が失敗したことになる。 }) 上記の例では、functionAとfunctionBという2つの関数を引数に持った関数をPromiseの引数に渡しています。引数の関数名は自由につけられます。 1つ目の関数名には「解決する」を意味するresolve、2つ目の関数名には「拒否する」を意味するreject　という名前をつけることが多いです。 2つの関数のうちどちらかが実行され、成功か失敗かによってその後の処理がわかれます。 1つ目の関数が呼ばれた場合は、処理が成功して完了したという状態になりthenメソッド、2つ目の関数が呼ばれた場合は、処理が失敗したという状態になりcatchメソッドが実行されます。thenもcatchも引数に関数を渡します。これで、Promiseの中でおこなわれた非同期の処理の後に、thenまたはcatchによってその後の処理が実行されます。実際に使ってみよう最初に紹介した非同期の例のソースを、Promiseを使ってその後の処理を作成してみます。下記のソースを実行すると、コンソールには、1つ目、3つ目、2つ目と表示されます。 setTimeoutにより2つ目の処理の完了を待たずに（非同期）3つ目の処理がおこなわれています。 console.log('1つ目'); setTimeout( () => console.log('2つ目'), 5000); console.log('3つ目'); ここで、1つ目、3つ目、2つ目と表示された後に、なにかを表示したい場合にPromiseを使います。 console.log('1つ目'); new Promise( (success, fail) => { setTimeout( () => { console.log('2つ目'); success(); }, 5000); }) .then( () => console.log('成功した後の処理です')) .catch( () => console.log('失敗した後の処理です')); console.log('3つ目'); この処理の結果は、下記のようにコンソールに表示されます。 2つ目の後に表示が追加されていることが確認できました。 1つ目 3つ目 2つ目成功した後の処理です 2つ目と表示する処理のsetTimeoutをPromiseに渡した関数の中で実行しています。その後、引数の1つ目の関数であるsuccessを呼び出しているので、thenに渡した関数が実行されています。引数の2つ目の関数であるfailを呼び出すと、catchに渡した関数が実行されることになります。今回の例では、コンソールに出力するだけなので成功で完了として、1つ目の関数を呼び出しています。通信をおこなうような処理などを非同期におこなう場合は、処理の結果に合わせて呼び出す関数を切り替えてください。まとめ Promiseの仕組みと使い方を紹介しました。 Promiseの記述方法はいくつかあるのですが、まずは1つ記述方法を覚えて非同期処理の流れに慣れてください。監修してくれたメンター横山茂雄（よこやましげお）フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

JavaScriptのsetTimeout関数を利用して非同期処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptのsetTimeout関数を利用して非同期処理を行う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 setTimeout関数を利用して非同期処理を行う方法について詳しく説明していくね！大石ゆかりお願いします！目次非同期処理とは setTimeout関数とは setTimeout関数を利用して非同期処理を行う方法実際に書いてみようまとめ非同期処理とは非同期処理を理解するため、まずは同期処理を説明します。 JavaScriptの処理はソースコードの上の行から下の行へ順番におこなわれます。1行目が終わってから2行目、2行目が終わってから3行目という具合です。処理が終わってから次の処理がおこなわれることを「同期処理」と呼びます。同期処理を例えると、運動会のリレーでバトンをもらわないと次の人は走れないのと同じです。それに対して非同期処理は、上の行の処理が終わっていなくても次の行の処理がおこなわれるような処理のことを呼びます。1行目の処理が終わっていなくても2行目の処理が実行されるイメージです。先程のリレーの例で言うと、バトンをもらう前に次の人が走り出すということになります。このような非同期処理を使うメリットの1つは、画面の表示をする処理の前に、時間のかかる処理があるような場合でも、処理がとまらず画面の表示がおこなわれユーザーを待たせない、または体感時間を下げることができることです。 [PR] 未経験からWebエンジニアを目指す方法とはsetTimeout関数とは指定した時間が経過した後に処理をおこなう関数です。第1引数に関数の名前、第2引数に待ち時間をミリ秒で指定します。 setTimeout関数を利用して非同期処理を行う方法 setTimeout関数は、JavaScriptのどこからでもアクセスできるグローバルな領域にある関数です。そのため、setTimeoutと記述するだけで使えます。 setTimeou関数を使うと、第2引数で指定した時間だけ、第1引数の関数が実行を遅らせます。そしてsetTimeoutは同期しないので、それ以降の処理が進み非同期処理となります。実際に書いてみようまずは同期した3行の処理とその出力結果を見てみます。 JavaScriptソース console.log('1行目の処理です。'); console.log('2行目の処理です。'); console.log('3行目の処理です。'); 結果 1行目の処理です。 2行目の処理です。 3行目の処理です。上の行から順に実行されたことが確認できました。次にこの処理の間にsetTimeoutを挟んで結果をみてみます。 JavaScriptソース console.log('1行目の処理です。'); setTimeout( () => console.log('2行目の処理です。'), 1000); console.log('3行目の処理です。'); console.log('4行目の処理です。'); 結果 1行目の処理です。 3行目の処理です。 4行目の処理です。 2行目の処理です。 2行目にsetTimeoutによって1000ミリ秒（1秒）後に、2行目の関数が実行されています。その待ち時間に3行目と4行目が先に実行されて非同期処理になったことが確認できました。まとめ setTimeout関数を利用した非同期処理を紹介しました。処理が終わるのを待たずに、次の処理ができる非同期処理は、ユーザーの待ち時間を減らすのにも有効です。監修してくれたメンター横山茂雄（よこやましげお）フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

実際に書いてみる！Node.jsのasyncの使い方【初心者向け】