ES2015 の機能を使用したイベントフローの制御

Windows 10 Anniversary Update に搭載される Edge がサポートする ECMA Script 2015 (ES2015) の機能を使用した JavaScript の非同期処理の制御について紹介します。 なぜ今、非同期処理の制御が必要なのか? 前回の記事「de:code2016セッション「モダン Web: たった今と、ほんの少し未来の話」フォローアップ」で紹介したように、Single-page Application (SPA) のようなモダンな Web アプリケーションでは、クライアントサイドのロジックとサーバーサイドのロジックの関係は疎結合となるため、処理は非同期を前提として考える必要があります。 そして、非同期処理の完了の通知は JavaScript ではイベントによって行われます。 たとえば、Web API をコールするには、XMLHttpRequest を使用して Web サーバーにリクエストを出し、イベントハンドラ内で完了のステータスを待って値を取り出します。 上記のような処理は、ひとつの大きな単位での処理を完了するのに、1 回で済むとは限らず、複数回発生する可能性があります。 そういった処理を実装する場合には、最終的な処理の完了までに実行される各々の処理の整合性 (順番とタイミング) を保つために、イベントハンドラをネストすることになり、その間に画像のロードやユーザーのアクションについてのイベントのハンドラが入ると、コードはひたすら右側に伸びていくことになります。これでは記述も煩雑になるだけでなく、デバッグも大変です。 これがいわゆる「コールバック地獄」とよばれるものです。 こういった制御を行うために、JavaScript のライブラリやフレームワークが様々な機能を提供してきました。しかし、今最新のモダンブラウザーがサポートしつつある ECMA Script の 2015 や、2016 にはそういった機能が標準で用意されています。 JavaScript によるイベントフロー制御 非同期を制御するための機能として、Ecma Script 2015 (旧 ES6) では以下の機能が標準で提供されています。 Promise…

0

de:code2016セッション「モダン Web: たった今と、ほんの少し未来の話」フォローアップ

de:code 2016、2 日めのセッション ARC-003「モダン Web: たった今と、ほんの少し未来の話」 にお越しくださいました皆さま、ありがとうございました。 そうとう気合いを入れて資料を作ったものの、セッションのビデオを見たら私の喋りがイマイチ(ほんとはイマサンくらい) だったので、猛省して内容を記事にまとめました。 なお、このセッションについては、HTML5 Experts.jp に、以下の驚くほど詳細な記事が載っており、概要であれば同記事で充分と思いますが、 モダンWeb:たった今と、ほんの少し未来のはなし~「de:code 2016」セッションレポート~ このブログの記事では、セッションでは語れなかった内容もふくめて書いていきたいと思います。 なお、デモでお見せした promise, async/await, generator/yield を使用した非同期制御については、後日別記事で紹介させていただきます。   モダン Web: たった今と、ほんの少し未来の話 この記事は、今現在、巷で言われている「モダン Web」、なかでも「モダンな Web アプリケーション」というものがどういうものであるか、また、今後一般的になるであろう「Web アプリケーションの技術的コンセプト」のいくつかを紹介するものです。 「モダン Web」 とは? 「モダン Web」 とはなんでしょう? 数年ほど前からいろいろなところで、この「モダン Web」というキーワードを耳にするようになりましたが、話されている内容というのは人によりまちまちであることが多いようです。 これはなにも話している人がそれぞれに勝手なことを言っているわけではなく、「モダン Web」で括れる範囲がそれだけ広いからに他なりません。 たとえば、一口に「モダン Web」と言っても、Web のフロントエンドからサーバーサイドのバックエンドまでを含めた「モダンな Web システム」のことの場合もあれば、最新の JavaScript のフレームワークや altJS、 プリプロセッサやタスクランナーといった様々なツールを組み合わせて作業を行う「モダンな Web フロントエンドの開発手法」の場合もあり、かと思えば、次々とやむことなく追加されていく「モダンWeb ブラウザーの新機能」を使用していることをさす場合もあります。 この記事では、「モダンな Web アプリケーション」というものがどういうものであるか、また、そういったアプリケーションを開発するのに必要な「モダンな Web…

0

UWP の Hosted Web アプリからの NFC デバイスへのアクセス

de:code 2016、1 日めのセッション DEV-008「Developing on the Edge. ~Web プラットフォームと Cordova~」 にお越しくださいました皆さま、ありがとうございました。 このセッションでは、Windows 10 Anniversary Update で Edge に新たに追加される機能と UWP (Universal Windows Platform) と Cordova で Hosted アプリを作る方法について紹介しました。 その中から実際にデモでご覧いただいた、Web サイトでホストされているページを UWP の Hosted アプリとして NFC を認識させる方法について紹介したいと思います。 UWP Hosted Web アプリからのデバイスアクセスについて UWP の Hosted Web アプリは、単に Web サイトでホストされているアプリとシングルコードベースで開発できるというだけでなく、物理的に同一のリソース (HTML、JS、CSS,各メディアファイルなど) を共用して開発を行います。 もちろん、アプリ側ではそのアドバンテージを活かして、プラットフォーム固有のリソースである連絡先や予定表へアクセスしたり、Cortana との連携なども可能です。 Web サイトにホストされているページを UWP でラップし、適切にアクセス権を設定することで、Web サイトのページ内にある…

0