みなさん、こんにちは！
普段、スマホでLINEやSNSを使っていて「なんでこんなにサクサク動くんだろう？」と感じたことはありませんか？
実はその裏側では、「同期通信」と「非同期通信」という大事な仕組みが働いているんです。
プログラミングを学び始めたときは、「順次」「繰り返し」「分岐」という3つの基本を中心に勉強します。
これはプログラムの世界を理解するうえで欠かせない第一歩です。
でも、いざ実際にWebアプリやサービスを作る段階になると、初めて「非同期通信」という考え方に出会います。
非同期通信とは、かんたんに言えば「待っている間にアプリ全体が止まらないようにする仕組み」。
実務の開発ではこれが当たり前で、SNS、動画サービス、ECサイトなど、私たちが毎日使っているほとんどのサービスは非同期通信で成り立っています。
では、「同期通信」と「非同期通信」では具体的にどんな違いがあるのでしょうか？
その違いを、みなさんにとって身近なやりとりに例えて説明していきます！
同期通信のイメージ
同期通信とは「処理が終わるまで次に進めない」方式のことです。
たとえば、
- 友だちにLINEで「宿題の答え教えて！」と送って、返事が来るまでスマホをじーっと見て待っている
といったイメージです。
その間はゲームも動画もできず、次の行動に移れません。
また、他の例を挙げれば
- コンビニのレジに並んで、「前の人の会計が終わるまで、あなたは自分の番を待つ」
- 赤信号で立ち止まっているとき、「青になるまでは進めない。 」
これが「同期的」な動きです。
プログラムで同期通信を使うと、通信が終わるまでアプリ全体がストップしてしまいます。
例えばサーバーからデータを取得するのに3秒かかると、その3秒間は画面が固まったように見えるのです。
Webアプリにとってこれは大きなストレスになります。
非同期通信のイメージ
非同期通信とは「待っている間にも他のことができる」方式です。
- LINEで「宿題の答え教えて！」と送っても、返事が来るまではゲームをしたり動画を見たりできる
- 返事が届いたら通知が来て、そのタイミングで答えを確認すればOK
これが非同期通信のイメージです。
他にも
- 洗濯機が動いている間に宿題をしたり、ご飯を食べたりできる
- 終わったら「ピーピー」と音が鳴って教えてくれる。
- 飲食店で料理を注文したとき、料理が運ばれてくるまで席に座って待ちながら、友達と会話をしたりスマホを見たりできる
- 料理ができたら店員さんが持ってきてくれる＝通知が来る
プログラムにおける非同期通信も同じです。
データをサーバーにリクエストしても、その間アプリ全体が止まらずに他の処理を進められるので、ユーザーは快適に操作を続けられます。
コード例で見てみよう
実際のJavaScriptコードで「非同期通信」を使う例を見てみましょう。
以下はサーバーからデータを取得する関数です。
async function fetchData(url, options) {
try {
const response = await fetch(url, options);
// → LINEを送信！（「宿題の答え教えて！」）
const data = await response.json();
// → 返事が届いたら開いて読む
return data;
} catch (error) {
console.error("Error:", error);
// → 「あれ？送信失敗！電波ないのかな？」とエラー処理
return null;
}
}
このように、await を使うと「結果が返ってくるまで待つ」動きになりますが、アプリ全体は止まりません。
つまり「LINEの返事を待ちながらゲームする」ように、他の処理を同時に進められるのです。
まとめ
- 同期通信 = 返事が来るまでじっと待つ
- 非同期通信 = 返事を待ちながら他のこともできる
私たちが普段使うWebアプリやSNSが快適に動くのは、この「非同期通信」のおかげです。
プログラムの世界もLINEのように考えると、意外と身近に感じられますよね！
最後に
私たちのサービス開発でも、この非同期通信の仕組みを活用し、ユーザーの皆さんにストレスのない体験を提供しています。
今後も快適に使えるサービスを目指して開発を続けていきます。
コメント