問題
今時の若者ならば Heroku 等を利用して手早く Web アプリを作成・公開することが日常茶飯事です。 バックエンドもフロントエンドも今はフレームワークが充実していますから、 高度な処理を簡潔な記述で行うことができます。
しかし非同期処理となると話は別です。
例えばフロントエンドを作るとなると、まず
jQuery
を使うことになるでしょう。
jQuery は洗練された API で DOM 操作を簡単に行うことができますし、
非同期通信についても $.ajax を使えば煩雑なことほぼ知らずに済みます。
例えば
Wikipedia
の検索フォームは入力補完が行われるようになっており、
検索フォーム文字が入力されると関連するページのタイトルが候補として表示されます。
このような処理を書くとなると以下のようなコードになるでしょう:
var showCompletionMenu = function (words) {
...
};
var completeWords = function (partialWord) {
$.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
limit: 100,
search: 'foo',
success: function (data) {
var words = data.data[1];
showCompletionMenu(words);
}
}
});
};
var $form = $('#userInput');
$form.keyup(function () {
completeWords($form.val());
});
このように、イベント処理や非同期通信を行う場合、
- イベントの監視を始める部分(
$form.keyup)と発生したイベントを処理する部分(completeWords) - リクエストを送信する部分(
$.ajax)と受信した結果を処理する部分(showCompletionMenu)
を分離し、前者にコールバック関数として後者を渡す形になります。 普通のプログラムならば上から下へ順次処理が行われるのですが、 このように非同期処理が絡むと実行の流れはソースコードの見た目から背離します。 この単純な例ですら非同期処理が2段も積み上がっており、 とても反射的に読んで意味を理解できるソースコードではありません。
ここで本当に行いたいことは補完候補の表示であって、 その表示タイミングや補完候補のデータの出所は重要ではありません。 しかしコールバックという名の中間層を噛まさざるを得ないため、 本質からやや遠ざかったソースコードになっています。 どうにかしてこの状況を打破できないでしょうか。

