目的 Webアプリケーションを作成する際に、一旦サーバ上の設定ファイルやレンダリング用のモデルデータを事前に読み込んでおきたい場合に、どうしてもシーケンシャル（同時にアクセスしたくない場合）がある。jQueryのDeferredでも同じことができるが、fetch、async/awaitを用いることでもっと単純に処理ができるので、備忘として記載する。同じことを示した記事はいろいろとあるけど、どれもsetTimeoutやjQueryのDeferred、generatorなどの経緯も込みで書いてあるので、それはそちらにまかせて、ここではfetch + async/awaitのみを書く。 fetch + async/await これでOK getConfig = async() => { var conf1 = await (await fetch("/conf/conf1.yml?_="+(ne

この記事を書くにあたり.. いわゆるカメラアプリをブラウザで実装するにあたり，canvas要素をpng形式に変換する処理が150msほどかかってしまっていて，その間にブラウザに映し出される映像がカクついてしまったという問題が発生しました． その問題を解決する中で，Web上で色々な記事を読んでいると，JavaScriptの非同期処理を並列処理と勘違いしている人が結構いたので，今回はそんな初心者から中級者になろうとしている人のための記事です． ＊JavaScript上級者の方は．何か間違っていることがあればコメントください． そもそも非同期処理とは プログラムが記述された通りに実行されるものを同期処理と言います． しかし，同期処理だと，1行のプログラムに時間がかかったら，全体が重くなってしまいます． (例えば，サーバーにリクエストしてそれが何秒もかかって，UIまでもがフリーズしたら，何だこのペ

はじめに 今更ですが、JavaScriptのasync/awaitに関する備忘録になります。 「今まで$.Deferred()やPromiseなどで非同期処理は書いたことがあるが、async/awaitはわからない」 「$.Deferred()やPromiseなどの非同期処理の書き方より、もっと簡潔に書ける書き方があれば知りたい」 「今までの非同期処理の書き方と比べて何が良いのかわからない」 といった人達向けの記事です。 $.Deferred()やPromiseなどで非同期処理を書いたことがある前提のため、非同期処理自体に関する説明は記載しておりません。 記載している利用例のコードはChrome（最新）のコンソール上で動きますので、コンソール上で実行して動作を確認してみると理解が深まりやすいと思います。 本記事で用いている用語 Promiseを返す Promiseオブジェクトを返すこと。