HTML5のWeb Workersを追加してさらに高速仕訳入力

Cloud SQLで学ぶ業務・基幹系アプリ再入門（3）

　連載の第2回と第3回では、データエントリでの徹底した高速化を検討しています。第2回では、仕訳データ入力にHTML5のWeb Storageを摘要し、勘定コード入力からの勘定科目表示を実質待ち時間なし（1ミリ秒またはそれ以下）にする方法を見てきました。ただし入力データのクラウドDB登録では0.5秒ほど時間がかかり、ここで若干待ち時間が発生しています。またこの待ち時間は、ネットワークやユーザ環境の違いによってはもっと大きくなることも十分考えられます。今回はこのDB登録の待ちを実質ゼロにする方法として、HTML5のWeb Workersの適用を検討してみます。

　結果から言えば、Web Workersの適用を追加することによって、仕訳データ入力およびクラウドDB登録のUI操作の処理過程で、待ち時間を実質すべてゼロにすることが可能になります。またこのサンプルではDBでクラウド上のMySQL（Google Cloud SQL）を使用していますが、これをオンプレミスのDBに置き換えても、もちろん同様の効果が得られます。

サンプルシステムの構成

• サンプルサイト： http://erp2.swsgaejpgm3.appspot.com/

図1　連載第3回のサンプルシステム構成

　図1は今回のサンプルシステム構成です。構成としては前回の構成にWebクライアント側でWeb Workersが追加されていますが、それ以外は同じです。次に今回構成に追加されたWeb Workersについて最初に見ていきます。

Web Workers

　Web Workersは、JavaScriptでバックグラウンドでのスクリプト実行を可能にする機能で、HTML5の関連APIとしてW3Cで標準化が進められています。Web Workersにより、これまでJavaScriptでは不可能であった「2つのスクリプトを並行して実行」できるようになります。

Web Workersによるバックグラウンド処理

図2　Web Workersによるバックグラウンド処理

　Web Workersは、Webアプリケーションのクライアント側JavaScriptで、バックグラウンドでのコンカレント（並行）処理を可能にする技術です。これまで、JavaScriptで作成されたスクリプトは単一のプロセスで実行され、そのプロセスはユーザ操作を交えた会話型処理を行うのが通常です。従って、JavaScriptでバッチ型の、時間をかなり要するような処理を行わせた場合には、その処理が完了するまでユーザは会話型処理を中断して、バッチ型の処理が終了するまで、画面の前で待っていなければならないことになります。

　このような問題を解決するのがHTML5のWeb Workersで、図2はWeb Workersを使用した場合の処理概念図です。図のように、フォアグラウンドで実行されるJavaScriptは、これまで通りに会話型処理を実行します。そして、その処理の途中でバックグラウンドスクリプト（ワーカ）のオブジェクトを生成してリクエストを送り、時間の掛かるバッチ処理実行を任せることができます。従って、ワーカがバッチ処理をJavaScriptで実行している間も、フォアグラウンドの会話型処理は待たされるようなこともなく、スムーズに処理を継続することができる訳です。

　バックグラウンドで実行されるワーカスクリプトはフォアグラウンドとは別途のスクリプトファイルになりますが、このファイルを複数用意することによって複数のワーカ処理を同一のフォアグラウンドから実行させることもできます。またフォアグラウンドからのワーカ生成とデータ受け渡しは簡単な処理で行うことができますが、これについてはこの後のサンプルで紹介します。