フロントエンドカンファレンス名古屋 2026
LT(5分)

見た目は同じなのに検索でヒットしない:ファイルアップロード実装の落とし穴と設計を考える

wabi_1318 wabi wabi_1318

ライブラリを使わず <input type="file"> を用いて実装されたファイルアップロード機能を扱った際、 macOS から送信されたファイル名だけがサーバー側の検索と一致せず、データ取得に失敗する問題に遭遇しました。

見た目は同じ文字列でも、 OS や入力経路(フォルダ選択・テキスト入力)の違いによって内部表現(NFC / NFD)が異なる場合があります。今回の問題は、その差異がブラウザを経由してアプリケーション層まで持ち込まれていたことが原因でした。

本トークでは実際の再現手順を示しながら、この不整合がどのように発生するのかを整理します。その上で、ブラウザ標準APIでファイルアップロードを実装する際に、どの境界で正規化や比較責務を持つべきかという設計判断を取り上げます。

環境差異に依存しない、堅牢なアップロード実装のプラクティスを持ち帰っていただくことを目指します。