JavaScriptでWEBプログラミングをしていると、同期処理、非同期処理が混じるのでややこしい。 例えば、同期処理が三つ続く場合だと、順番に処理が進む。 これは普通の処理だ。 一方、非同期処理が混じると、処理1から実行された非同期処理2が実行中にもかかわらず同期処理3に行ってしまう。 まあ、これで問題ない場合もあるが、同期処理3が非同期処理2の結果を利用する場合には、これでは問題が起こる。 つまり、同期処理3を開始する時点で、非同期処理2が完了している事が保証されないからだ。 この記事ではJavaScriptのPromiseの機能を使って非同期処理の完了を待ってから次の同期処理を実行する手法を紹介したい。 同期処理が非同期処理の結果を使う典型的な例 例えば、以下のようなhtmlだと [クリック] ボタンが表示される。 <button onclick="func1()">クリック</bu