MENU

JavaScript同期・非同期構文

【JavaScript】 async/awaitを解説します

更新日:2021/11/26

 

JavaScriptのasyncとawaitというキーワードは、非同期処理を簡潔に記述することができます。
しかしプログラムの流れを変えてしまう面もあり、理解するのが難しい機能でもあります。

 

そこで今回は、asyncとawaitについて解説します。

 

 

2021.11.26 大幅に改稿しました。

async/awaitの概要

 

asyncとawaitを端的に表すと、次のようになります。

 

■asyncとは

 

asyncは関数やメソッドで使用するキーワードです。
asyncを使用して定義された関数は、実行するとPromiseを生成して返します。

 

■awaitとは

 

awaitはPromiseオブジェクトに使用するキーワードで、async関数内のみで使用できます。
awaitは非同期処理の結果がでるまでコードを停止します。
結果が出たら、再開して後に続くコードを実行します。

 

ただしこれはコードの流れ上の話で、停止中はタイマーなどの他の非同期処理も処理されます。

 

 

async/awaitはPromiseの知識が必須となります。
Promiseについては、次の記事を読んでみてください。
【JavaScript】 非同期はPromise?解説が難しいので自分で理解してみた

asyncとは

 

関数定義および関数式の前にasyncキーワードを付加すると、AsyncFunctionオブジェクトを生成します。
AsyncFunctionオブジェクトは関数として実行可能で、実行するとPromiseを返します。

 

AsyncFunctionオブジェクトは、async関数や非同期関数とも呼ばれます。
※この記事ではasync関数と呼びます。

 

async関数を実行するとPromiseを返す

 

async関数は、実行するとPromiseを返します。

 

次のようにasync関数を実行して戻り値を確認すると、Promiseオブジェクトであることがわかります。

 


const asyncFuncObj = async () => {
    return 1;
};
const result = asyncFuncObj();
console.log(  result ); // Promise { <state>: "fulfilled", <value>: 1 }

 

そしてasync関数でreturnした値が、thenで通知されます。

 


result.then( e=>console.log(e) ); // 1
  // then( console.log ) に置き換え可能

 

この動作から例で挙げたasyncFuncObjは、次のPromiseを返す関数に置き換えることができます。

 


const promiseFuncObj =  () => {
    return new Promise( resolve => {
        resolve(1);
    });
};
const result = promiseFuncObj();
console.log(  result ); // Promise { : "fulfilled", : 1 }
result.then( e=>console.log(e) ); // 1

 

ただし上記の関数内では次項で解説する awaitを使用できません。

 

FunctionオブジェクトとAsyncFunctionオブジェクト

 

次のコードは、関数式がFunctionオブジェクトのインスタンスを生成していることを表しています。

 


const funcObj = function(){};
console.log(  Object.getPrototypeOf(funcObj) === Function.prototype ); // true

 

Functionコンストラクターから生成されたオブジェクトは、プロトタイプチェーンの参照先がFunction.prototypeになります。
上のコードの2行目は、そのことを確認しています。

 

asyncを使用すると、Function.prototypeはプロトタイプチェーンの2階層目にセットされます。

 


const asyncFuncObj = async () =>{};
    // 1階層目を取得
const asyncFuncObjProto = Object.getPrototypeOf(asyncFuncObj);
console.log(  asyncFuncObjProto === Function.prototype ); // false
    // 2階層目を取得
console.log(  Object.getPrototypeOf(asyncFuncObjProto) === Function.prototype );

 

上のコードから、次のような階層になっているのがわかります。

 

asyncFuncObj :{
    [[Prototype]] : { ← AsyncFunction.prototype
        [[Prototype]] : { ← Function.prototype
        }
    }
}
※[[Prototype]]はプロトタイプチェーン

 

JavaScriptの言語仕様であるECMAScriptでは、asyncで生成されたオブジェクトはAsyncFunctionのインスタンスと定義されています。
しかしAsyncFunctionオブジェクトはグローバル定義されていないため、コード上で比較できません。

 

つまりasync関数がAsyncFunctionのインスタンスであることを証明する方法がないのですが、constructorオブジェクトのnameプロパティを見ると"AsyncFunction"であることを確認できます。

 


console.log( asyncFuncObjProto.constructor.name ); // "AsyncFunction"

 

 

 

 

awaitとは

 

awaitキーワードは、Promiseオブジェクト前に付加することで、非同期処理の結果が出るのを待ちます。

 

ただし、いくつかの条件があります。

 

awaitキーワードはasyncキーワード内のみ使用可能

 

awaitはasyncキーワードが付加された関数内でのみ使用可能です。

 

awaitはasync内でのみ使用可能

 


const b = async  ()=>{
    const x = 2;
    const r = await c();
    return x * r;
}

 

awaitは複数指定できます。

 

awaitを複数使用可能

 


const b = async  ()=>{
    const x = 2;
    const r = await c();
    const r2 = await d();
    return x * r * r2;
}

 

asyncはイメージ的には、return new Promiseの糖衣構文ですが、そちらでは使用できません。

 

awaitはasync内でのみ使用可能

 


const b =  ()=>{
    
    return new Promise( (resolve, reject) =>{
        const x = 2;
        const r = await c(); // エラー!!
        resolve ( x * r );
    });
}

 

awaitキーワードはPromiseオブジェクトのみ使用可能

 

awaitキーワードはPromiseオブジェクトの前のみ記述可能です。

 

Promiseオブジェクトにawait付加

 


async function b(){
     const a = new Promise( (resolve, reject) =>{
         document.getElementById("btn").addEventListener("click", ()=>{
             resolve( true );
         });
     });
     return await a;
}

 

実際には、Promiseオブジェクトを返す関数に付加することが多いです。

 

Promiseオブジェクトを返す関数にawait付加

 


function clickWait(){
     return new Promise( (resolve, reject) =>{
         document.getElementById("btn").addEventListener("click", ()=>{
             resolve( true );
         });
     });
}
async function b(){
     return await clickWait();
}

 

async関数もPromiseオブジェクトを返すので、awaitを使用できます。

 

async関数にawait付加

 


function clickWait(){
     return new Promise( (resolve, reject) =>{
         document.getElementById("btn").addEventListener("click", ()=>{
             resolve( true );
         });
     });
}
async function a(){
     return await clickWait();
}
async function b(){
     return await a();
}

 

awaitの結果は戻り値で取得する

 

awaitが付加されたPromiseでresolve()やreject()された結果は、then()やcatch()などで登録したコールバックで処理された後、最終的な値を戻り値として受け取ることができます。

 

 

awaitの結果を取得

 

async function b(){
    return 3; // resolve(3)と同値
}

async function c(){

   const x = 2;

   const r = await b(); // b()でresolve(3)が呼ばれ、rに3がセットされる

   const y = 4;
   return r * x * y;
}

 

ただしawait関数内でreject()またはthrowされると、エラーとなります。
処理を止めないためには、catch()で捕捉します。

 

awaitの結果がrejectの場合

 


function b(){
   return new Promise( (resolve, reject) =>{
      reject("error!!");
   });
}
async function c(){
   const x = 2;
   const r = await b().catch( e=>console.log( e ) );  // コンソール:error!!
   console.log( r );  // コンソール:undefined
   const y = 4;
   return r * x * y;
}

 

上のコードは、catch()で返された値が変数rにセットされています。
ここでは戻り値を指定していないので、値はundefinedです。
次のように、値を返すようにしておきましょう。

 

catchの戻り値を受け取る

 

function b(){
   return new Promise( (resolve, reject) =>{
      reject("error!!");
   });
}
async function c(){
   const x = 2;
   const r = await b().catch( e =>null );
   if( r === null ) return 0; // エラー判定
   const y = 4;
   return r * x * y;
}

 

ただし自作関数では、できればresolve()を使用して、仕様としてエラーと決めた値をセットするべきです。

 

エラー時にrejectを使用しない

 


function b(){
   return new Promise( (resolve, reject) =>{
      // エラーだったらnullをresolve()する
      resolve(null);
   });
}
async function c(){
   const x = 2;
   const r = await b();
   if( r === null ) { // エラーかどうかチェック
      console.log( "error!!");
      r = 1;
   }
   const y = 4;
   return r * x * y;
}

 

 

awaitは複数指定できる

 

一つのasync関数内で、awaitキーワードは何度でも使用することができます。

 

awaitの複数回使用

 


async c(){

   const x = await b(); // b()処理後、呼び出し元に戻る
   const r = await b();
   const y = await b();

   return r * x * y;
}

 

 

awaitの進行イメージ

 

async内では上から順番にコードが処理されますが、awaitキーワードに到達するとそれ以降はPromiseのコールバックとしてスケジューリングされます。

 

次のようなコードで考えてみます。

 


const b = async  ()=>{
    const x = 10; // ①
    const r = await c(); // ②
    const r2 = await d(); // ③
    return x * r * r2;  // ④
}

 

関数bを実行すると①が処理されます。
次に②の関数cを実行するとPromiseが返されます。
そしてPromiseの最終的なコールバックとして、変数rへの代入と③④の実行が登録され関数bの処理が終了します。

 

関数bを呼び出した一連のコードが終了すると、イベントループでタスクが処理されます。
そのため、async関数のコード上は停止しているように記述されていますが、実際にはタイマーやマウスクリックなどのイベントが発生します。

 

Promiseの結果が出るとコールバックが呼ばれ、変数rへの代入が行われます。
そして③のawaitで同様に残りの処理がコールバック登録され、処理が終了します。

 

再度Promiseの結果を待って、残りの処理が実行されます。

async/awaitの使用例

 

async/awaitを使用した、簡単な例を挙げてみます。

 

実行例

 

『アンケートに答える』を押してアンケートにご協力ください。

あなたの性別は?


 

 

html

 


『アンケートに答える』を押してアンケートにご協力ください。
<button id="openBtn"  >アンケートに答える</button>
<div id="div1" style="display: none">
    <p>あなたの性別は?</p>
    <p><label><input type="radio" name="seibetu"  value="男" checked>男</label>
        <label><input type="radio" name="seibetu"  value="女">女</label></p>
    <p><button id="okBtn">決定</button><button id="canselBtn">キャンセル</button></p>
</div>

 

JavaScript

 


window.addEventListener( "DOMContentLoaded" , ()=> {
    /**
     * アンケート答えるボタンクリック処理
     */
    (()=>{
        const [openBtn,div] = ["openBtn","div1"].map( id=>document.getElementById(id) );

        openBtn.addEventListener("click",()=>{
            [openBtn.disabled,div.style.display] = [true,"block"];
            questionnaire().then(e=>{
                alert(e);
                [openBtn.disabled,div.style.display] = [false,"none"];
            });
        });
    })();
    /**
     * アンケート受付処理
     * @returns {Promise}
     */
    const questionnaire = async () => {
        const res = await decision();
        return res === null ? "キャンセルしました" : `あなたは${res}です`;
    };
    /**
     * 性別取得
     * @returns {Promise}
     */
    const getSeibetu = (()=>{
        const seibetuSelect = document.querySelectorAll("input[name='seibetu']");
        return ()=>seibetuSelect[ seibetuSelect[0].checked ? 0 : 1].value;
    })();
    /**
     * 決定・キャンセルボタン処理
     * @returns {Function}
     */
    const btnOn = (()=>{
        let resolve = null;

        [["okBtn","ok"],["canselBtn","cansel"]].forEach(
            ([id,result]) =>
                document.getElementById( id )
                    .addEventListener("click",()=>{
                        if( typeof resolve === "function" ) {
                            resolve( result );
                            resolve = null;
                        }
                    })
        );
        return r => resolve = r;
    })();
    /**
     * 決定・キャンセルボタンクリック待ち
     * @returns {Promise}
     */
    const decision = () =>
            new Promise( resolve =>btnOn( resolve ) )
                .then( e=> e === "cansel"  ?  null : getSeibetu() );
});

 

アンケートといっても、ここでおこなっていることは次の二つだけです。

 

(1) 『アンケートに答える』ボタンが押されたら、アンケートを表示してアンケートの結果が出るまでボタンを無効にする
(2) 決定またはキャンセルボタンが押されたら結果をアラート表示して、アンケートを消し、アンケートの結果が出るまでボタンを有効にする

 

ここでのポイントは、アンケートの処理をasync関数内に閉じ込め、『アンケートに答える』ボタンのイベント内では、ボタンの有効無効およびアンケート画面の表示非表示の切り替えだけをおこなっている点です。

まとめ

 

async/awaitは、プログラムコードの構成をJavaScriptのシステムが内部で変更しています。
そのため、思っていたのと異なる結果となったと感じる人も多いと思います。

 

Promiseオブジェクトの知識があることが前提のキーワードです。
Promiseがわかり難いのに、さらにasync/awaitがわかり難くしてくれます。

 

非常に初心者泣かせであり、教える側にとってもやっかいな機能です。
慣れれば問題ないのですが…

 

文句を言っていても仕方がないので、頑張って理解するしかないですね。

最後までお読みいただきありがとうございます

記事の内容について

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ


※リンクして頂いた方でご希望者には貴サイトの紹介記事を作成してリンクを設置します。
サイト上部の問い合わせよりご連絡ください。
ただしサイトのジャンルによっては、お断りさせていただくことがあります。