ファイルアップロード体験を 改善する Progress Toast 2025/11/14 React Tokyo #11 株式会社HRBrain 渡邉 佑 axiosで作る 

2 AGENDA ● 自己紹介 ● 何を作ったのか ● 技術的アプローチ ● 実装①：配列管理とグローバル配信 ● 実装②：一方向の状態遷移で論理的整合性を保つ ● 実装③：前回アップロードとの競合を防ぐ ● まとめ 

3 ● 株式会社HRBrain ● X: https://x.com/tasuku_web ● 新潟県の佐渡島出身 ● 新卒で外交船航海士の道へ ● ウェブ制作やアナリティクスに転向 ● Vue Fes Japan 2025 参加 ● 相撲部屋や洞窟探検のYoutubeを観てます 自己紹介 渡邉 佑 Tasuku Watanabe 

Progress Toast 4 何を作ったのか ● リアルタイム進捗表示 ● 複数の独立したトースト ● キャンセル機能 ● 結果に応じたステータス表示 

5 何を作ったのか 進捗割合を表示 結果に応じてステータスが変化 

onUploadProgress コールバック ● ProgressEvent.loaded: 送信済みバイト数 ● ProgressEvent.total: 総バイト数 ● リアルタイムで進捗率を計算・更新 6 技術的アプローチ 

7 実装①：配列管理とグローバル配信 ● 配列で複数のProgress Toastを保持 ● Context経由でアプリ全体からアクセス可能 ● 各コンポーネントが独立してトーストを追加・削除 

8 実装②：一方向の状態遷移で意図しない更新を防止 ● 一方向遷移で状態の論理が明確（progress→success） ● ユーザーに混乱を与える、誤った状態変化を防ぐ（success→progress） 

9 ● useRefでAbortController参照を永続化 ● 新規アップロード時の前回処理の中断 ● 状態競合を防ぐ識別機構で安全性確保 実装③：前回アップロードとの競合を防ぐ 

● onUploadProgressでリアルタイム進捗表示 ● Context配信でアプリ全体からアクセス可能 ● AbortControllerで安全な中断制御 ● 一方向状態遷移で意図しない更新を防止 10 まとめ 

ご清聴ありがとうございました！