画面がフリーズする…？
非同期処理で解決した話

JavaScriptは一度に一つのことしかできない

サーバー側の並列処理に慣れていた私には衝撃でしたが、ブラウザのJavaScriptは基本的に「一度に一つの作業」しかできません。重い画像変換をそのまま実行してしまうと、その間ブラウザは他の操作（ボタンを押すなど）をすべて無視してしまいます。これが「フリーズ」の正体でした。

await で「待ち」を入れる

これを解決するのが 非同期処理（Async/Await） です。重い処理の前に await をつけると、その処理が終わるまで「ブラウザ全体の動きを止めずに、その関数の実行だけを待機」させることができます。

// "async" をつけて非同期関数にする
async function handleImage(file) {
  showLoading(); // ローディングを出す
  
  // "await" で重い変換処理が終わるのを待つ
  // この間、他のUIはフリーズしません
  const converted = await heic2any({ blob: file });
  
  hideLoading(); // 終わったら消す
}

UXを損なわずに重い処理をこなすには、この非同期のコントロールが不可欠でした。インフラで言うところの「非同期キュー」に近い感覚で理解できた時、スッと腑に落ちました。