JavaScriptのasync/awaitの使い方を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptのasync/awaitの使い方について解説しています。Promise(非同期処理)の基本、async/awaitによるPromise処理のやり方を説明します。サンプルコードで処理の流れを確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのasync/awaitの使い方について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

async/awaitの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

async/awaitとは

async/awaitとは非同期処理を行う一連の処理のことをさします。非同期処理は、後述するPromise処理が一般的に使用されることが多いですが

「Promise処理をより簡潔に効率よく記述できる」点が大きな特徴です。

 

Promise(非同期処理)とは

Promiseとは、複雑になりやすい非同期処理を、簡潔に実現できるオブジェクトになります。Promiseについて簡単に使い方をご紹介します。

var result = new Promise(function(resolve) {

resolve(new Date);

})

newでPromiseオブジェクト(引数にresolveという関数を設定して)を新規作成します。resolve関数には今日の日付を取得する処理を設定します。これでresult変数にはPromiseオブジェクトが格納されています。

結果を引き出すには以下のようにthinメソッドを使用します。

result.then( function(data){

console.log(data.getFullYear());

} );

 

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

async/awaitの使い方

それでは改めてasync/awaitの使い方をご説明します。まずは、簡単なPromise処理を設定します。

function setPromise(param) {
return new Promise(function(resolve) {

setTimeout(function() { resolve("渡された引数は" + param + "です") }, 1000)

})
}

引数の中身と指定した文字列を結合して1秒後に返却する処理になります。これにasync / awaitを使用すると、以下のようになります。

async function showParam() {

const result = await setPromise(100000);

console.log(result);

}
showParam();

// 渡された引数は100000です

 

thinを使うパターンと比べて、スッキリとしたコード処理がかけていることがわかります。また、複数実行するときもasync / awaitを使用して簡潔に実行できます。

async function showParamAll() {

console.log(await setPromise(10));
console.log(await setPromise(100));
console.log(await setPromise(1000));

}

showParamAll();

 

コードの簡略化・可読性向上に役立ちますので、ぜひ覚えておきましょう。

 

監修してくれたメンター

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。

現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。