JavaScript Promiseで
処理に順序をつける！

山口市では朝晩の気温がとても低くなってきていますね。
私は気温の変化についていけず、少し風邪気味です…。
皆様お気をつけくださいね。

さて、本日はES6の「Promise」についてのお話です！
JavaScriptの処理は非同期なので、プログラムした処理は次々に実行されていきます。
しかし、この「Promise」は「この処理が終わったら」というトリガーで処理を実行できます。
これまでは「setTimeout」で時間を指定して無理やり（？）そのような処理を実行していましたが、これを使えばスマートに処理できそうですね。

基本的な仕組み

まずは基本的な仕組みをご説明いたします。まずは以下をご覧ください。

Promiseオブジェクトをインスタンス化した際に指定したコールバック関数には、「resolve」という関数と「reject」という関数が渡されます。
resolveの引数に持たせた値は「then」というメソッドに引き継がれ、 rejectの引数に持たせた値は「catch」というメソッドに引き継がれます。
意味合いとしてはresolveは解決したこと、つまりは処理の成功であり、rejectは拒否されたこと、つまりは処理の失敗となります。
Promiseで順をもたせた処理を実行したい場合は、「then」メソッドへ処理を引き継ぐことで、「この処理が成功したら」という処理を作ることができる、という仕組みです。
次に、この処理をつなげることで、順をもたせた一連の処理を作成しましたので、ご覧ください。

使用例

この処理は「山口　レッカスグルーヴ　クリエイターズブログ」という文章を少しずつ表示させ、最後に下線をアニメーションで表示する、というものです。
ボタンをクリックすると処理が走りますので、お試しください。
Promiseを次々につなげることで順をもたせています。
少し複雑に見えますが、Promiseの中にPromiseを入れ込む、というようにすることで、次々と処理を実行することができます。
次の処理は「resolve()」が実行されたタイミングで走りますので、このタイミングをずらしておけば、処理の間隔を取ることも可能です。

ブラウザ対応について

PromiseはES6の機能ですので、アロー関数などと同様、IEは11まで非対応です。
Polyfillが公開されているようですので、使用される際はPolyfillの導入を忘れずにしたいところです。
IEでは非対応とはいえ便利なオブジェクトなので、ぜひとも使えるようにしたいですね！