非同期通信（Asynchronous Communication）

非同期通信（Asynchronous Communication）とは、サーバーへの問い合わせを、画面の動きを止めずに裏側で行う通信のやり方のことです。返事を待つ間も、利用者は操作を続けられます。

現実世界に例えると、非同期通信は料理を注文したあと、届くまで会話を続けられる状態のようなものです。全員が黙って待つ必要はありません。届いたぶんから順に手を付ければよい、という考え方です。

同期通信 図解

非同期通信図解

同期通信との違い

画面が固まらない

利用者から見た最大の違いがこれです。通信の返事を待つ間も、入力やスクロールといった操作を受け付け続けられます。同期の通信では、返事が来るまで画面が反応しなくなり、待たされている感覚が強くなります。

必要な部分だけ書き換える

もう一つの利点があります。ページ全体を読み込み直さず、更新された部分だけを差し替えられます。検索窓に文字を打つと候補がその場で出る、地図を動かすと続きが読み込まれる。こうした動きは、いずれもこの仕組みによるものです。

Ajaxという言葉

歴史の話も押さえておきましょう。この考え方をWebで広めたのがAjaxと呼ばれる手法で、2000年代半ばに大きく注目されました。当時は特別な技術でしたが、いまでは当たり前の作りになり、言葉としてはあまり使われなくなっています。

どうやって実現するか

ブラウザ側の仕組みを使います。現在はFetch APIという命令で通信を行い、返事が届いたときの処理をあらかじめ書いておく形が主流です。古い方式も残っていますが、新しく作るならこちらが選ばれます。

順序が保証されない

作る側が最初につまずく点です。先に出した問い合わせの返事が、後から出したものより遅く届くことがあります。届いた順に処理すると、古い結果で新しい表示を上書きしてしまいます。順番の管理は自分で行う必要があります。

失敗したときの見せ方

設計上、忘れられがちな点です。裏側で通信しているぶん、失敗しても利用者が気づきません。通信中であることを示す表示、失敗したときの案内、もう一度試すための手立て。この三つを用意しておかないと、無言のまま何も起きない画面になります。

Web以外でも使う言葉

用語としては広い意味を持ちます。メールのように、送った側が返事を待たずに次へ進む形の通信も、同じく非同期と呼ばれます。システム同士をつなぐ場面では、相手が止まっていても処理を続けられる利点から、あえてこの形が選ばれます。

あわせて知っておきたい用語

• Ajax：
  非同期通信でページを部分的に更新する手法です。
• Fetch API：
  ブラウザから通信を行うための現在の標準的な命令です。
• JavaScript：
  ブラウザの中で動く、代表的なプログラム言語です。
• API：
  ソフトウェア同士が機能をやり取りするための窓口です。