うた「大きな栗の木の下で」の再生を例としてasync非同期処理を説明します

非同期処理

プログラムって実行すると、コードを上から順に1行ずつ実行していきますね。
その処理の1つに時間のかかる処理があると、その実行が完了するまで、次の行には進みません。
例えば、五線譜によって、ピアノの音声ファイルを再生する時には、音声ファイルを一つずつ再生することが必要になります。この場合は同期処理だけで出来ません、非同期処理が必須です。

何故asyncを利用するのか

ES6以前の非同期処理って面倒です。JavaScriptではいわゆるコールバック地獄というやつにしばしば陥りがちです。
ES6からはPromiseを利用して、簡潔に非同期処理が書けました。

asyncとは

非同期関数を定義する関数宣言のことです。
以下のように関数の前にasyncを宣言することにより、非同期関数（async function）を定義できます。
・async functionは呼び出されるとPromiseを返します。
・async functionが値をreturnした場合、Promiseは戻り値をresolveします。
・async functionが例外や何らかの値をthrowした場合はその値をrejectします。

asyncの利用例

以下は、うた「大きな栗の下で」の再生を例として非同期処理をやってみましょう。

#async.html

<script language="javascript">
    const playMusic = async function() {
        //大きな栗の木下で
        await play(4, 1).then((p) => { console.log("await:" + p);});
        await play(8, 1).then((p) => { console.log("await:" + p);});
        await play(8, 2).then((p) => { console.log("await:" + p);});
        await play(8, 3).then((p) => { console.log("await:" + p);});
        await play(8, 3).then((p) => { console.log("await:" + p);});
        await play(4, 5).then((p) => { console.log("await:" + p);});
        await play(8, 3).then((p) => { console.log("await:" + p);});
        await play(8, 3).then((p) => { console.log("await:" + p);});
        await play(8, 2).then((p) => { console.log("await:" + p);});
        await play(8, 2).then((p) => { console.log("await:" + p);});
        await play(2, 1).then((p) => { console.log("await:" + p);});
    }

    //signature：2→二分符、4→四分符、8→八分符
    //note：1→ド、2→レ、3→ミ、5→ソ
    const play = function(signature, note) {
        return new Promise((resolve, reject) => {
            let waitTime = signature * 500;
            //let mp3FileNm =getMp3FileNm();
            //mp3音声ファイルを再生する
            //play(mp3FileNm);
            console.log("play");
            let p = "signature:" + signature + " note:" + note;
            setTimeout(resolve, waitTime, p);
        });
    }   
</script>

実行結果：