コンテンツにスキップ
非エンジニアのためのVibeCoding入門

待ち時間と非同期という考え方

この章でわかること: 保存・送信・AIの応答など「時間のかかる処理」を、画面を 固めずに扱う非同期という考え方。知っておくと、UXの良いものを指示できます。

なぜ「非同期」が要るのか

Section titled “なぜ「非同期」が要るのか”

送信ボタンを押してから結果が返るまで、一瞬で終わらない処理があります。

  • フォームの送信・データの保存
  • 外部サービス(API)の呼び出し
  • AIの応答、画像処理 など

この間、画面が固まって何も反応しないと、利用者は「壊れた?」と不安になり、 ボタンを連打したりします。そこで「処理は裏で進めつつ、画面は応答し続ける」= 非同期にします。レストランで、注文を受けたら他のお客さんの対応もしつつ、 できたら料理を運ぶのと同じです。

良い体験の型(これを指示する)

Section titled “良い体験の型(これを指示する)”

時間のかかる操作は、だいたい次の流れにすると親切です。

  1. 押した瞬間に**「処理中…」の表示**(スピナーやボタンの無効化)
  2. 完了したら結果を表示(「予約を受け付けました」など)
  3. 失敗したら分かるエラー表示と、やり直せる導線

注意点

Section titled “注意点”
  • 押したら即・結果がある前提で作らない。待ち時間がある前提で、表示を用意する
  • 二重送信を防ぐ(処理中はボタンを無効化)。予約が二重に入る事故を防ぐ
  • 失敗の道を必ず用意。通信は失敗することがある。無言で止まらないように
  • 長い処理は「どれくらいかかるか」の目安(進捗・件数)があると安心

なぜ大事か

Section titled “なぜ大事か”

「動く」だけでなく「待たされても不安にならない」のが良いUX。非同期の考え方を ひとこと指示に足すだけで、デモの完成度がぐっと上がり、顧客の印象も変わります。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”