axiosで作る：ファイルアップロード体験を改善する「Progress Toast」

Transcript

1. ファイルアップロード体験を 改善する Progress Toast 2025/11/14 React Tokyo #11 株式会社HRBrain 渡邉 佑 axiosで作る
2. 2 AGENDA • 自己紹介 • 何を作ったのか • 技術的アプローチ • 実装①：配列管理とグローバル配信 • 実装②：一方向の状態遷移で論理的整合性を保つ • 実装③：前回アップロードとの競合を防ぐ • まとめ
3. 3 • 株式会社HRBrain • X: https://x.com/tasuku_web • 新潟県の佐渡島出身 • 新卒で外交船航海士の道へ • ウェブ制作やアナリティクスに転向 • Vue Fes Japan 2025 参加 • 相撲部屋や洞窟探検のYoutubeを観てます 自己紹介 渡邉 佑 Tasuku Watanabe
4. Progress Toast 4 何を作ったのか • リアルタイム進捗表示 • 複数の独立したトースト • キャンセル機能 • 結果に応じたステータス表示
5. 5 何を作ったのか 進捗割合を表示 結果に応じてステータスが変化
6. onUploadProgress コールバック • ProgressEvent.loaded: 送信済みバイト数 • ProgressEvent.total: 総バイト数 • リアルタイムで進捗率を計算・更新 6 技術的アプローチ
7. 7 実装①：配列管理とグローバル配信 • 配列で複数のProgress Toastを保持 • Context経由でアプリ全体からアクセス可能 • 各コンポーネントが独立してトーストを追加・削除
8. 8 実装②：一方向の状態遷移で意図しない更新を防止 • 一方向遷移で状態の論理が明確（progress→success） • ユーザーに混乱を与える、誤った状態変化を防ぐ（success→progress）
9. 9 • useRefでAbortController参照を永続化 • 新規アップロード時の前回処理の中断 • 状態競合を防ぐ識別機構で安全性確保 実装③：前回アップロードとの競合を防ぐ
10. • onUploadProgressでリアルタイム進捗表示 • Context配信でアプリ全体からアクセス可能 • AbortControllerで安全な中断制御 • 一方向状態遷移で意図しない更新を防止 10 まとめ
11. ご清聴ありがとうございました！