導入
クラウドホスティングサービスの無料プランを活用してWebアプリを公開する際、避けて通れないのがサーバースペック（処理能力）の制限です。重いデータを処理させた際、画面が「処理中…」のままフリーズしてしまった経験はありませんか？本記事では、システムがタイムアウトした際の「サイレントエラー」を防ぎ、利用者がストレスなく連続して使える直感的なUI（ユーザーインターフェース）へ改善するアプローチを解説します。
1. 画面がフリーズする「サイレントエラー」の正体
容量の大きいファイルや複雑なデータをアップロードした際、数分経っても結果が返ってこないことがあります。これは多くの場合、無料サーバー側のメモリ不足や、処理のタイムアウト（時間切れ）による強制終了が原因です。厄介なのは、裏側でサーバーが力尽きているにもかかわらず、画面側（フロントエンド）がそのエラーを受け取れず、永遠にローディングアニメーションを表示し続けてしまう現象です。利用者は「まだ処理中なのかな？」と待ち続けてしまい、非常に悪いユーザー体験（UX）につながります。
2. 連続利用を想定したUIのリセット機能
このような不具合を防ぎ、かつアプリを業務ツールとして快適に使うためには、フロントエンドの細やかな制御が必要です。AIアシスタント（Claude Codeなど）に以下のようなUI改善の指示を出して改修を行います。
- 状態の即時クリア：新しいファイルをドラッグ＆ドロップした瞬間に、前回の成功メッセージやエラー表示をすべて消去する。
- 自動リセット機能：処理が成功してファイルがダウンロードされた後、4秒経過したら画面全体（ボタンの有効化状態やファイル名表示）を初期状態に自動で戻す。
この改修により、「毎回ブラウザの更新（リロード）ボタンを押さなければいけない」という利用者の勘違いを防ぐことができます。
3. AIに既存コードを分析・改修させるコツ
今回のようなUIの改修をAIに依頼する際、単に「連続で使えるようにして」と指示するだけでは不十分な場合があります。開発環境のターミナルからAIを起動し、実際のファイルパス（絶対パス）を指定して「この変換結果を見て、どう直すべきか自発的に考えて修正して」と指示を出すのが効果的です。優秀なAIであれば、「同じファイルを再度選んだ時にイベントが発火しないHTMLの仕様（<input type=”file”>の挙動）」などの隠れたバグまで見つけ出し、併せて修正してくれます。
まとめ
バックエンド（サーバー側）の処理能力には限界があっても、フロントエンド（画面側）の工夫次第でアプリの使い勝手は劇的に向上します。「自動リセット」のような細やかな配慮を実装することで、プロが作ったような洗練された業務ツールへと進化させることができます。
編集後記
システム開発において、正常に処理が進む「ハッピーパス」を設計するのは比較的簡単ですが、エラーが起きた時や、ユーザーが想定外の操作（同じファイルを何度も連続で入れる等）をした時の処理を作り込むのに最も時間がかかります。昔は一つ一つデバッガーを回してテストしていましたが、最近のAIアシスタントは指示を出すだけで「無効なファイルが選択された時の内部ステータスのクリア」といった、人間が見落としがちなエッジケースまで自発的にカバーしてくれるようになりました。この精度の高さには毎回驚かされます。