File APIとは何ですか？

Webブラウザ上でユーザーのローカルファイルを安全に読み取ることができるAPI。ファイルアップロードやドラッグ＆ドロップでのファイル処理、プレビュー表示などに使われる。

File APIのポイントは？

ユーザーが選択したローカルファイルの内容をJavaScriptで読み取れる。FileReaderでテキスト・バイナリ・Data URLなど様々な形式で読み込み可能。画像プレビューやCSVインポートなど、アップロード前のクライアント側処理に活用される

【ファイルエーピーアイ】

File API とは？

💡 ブラウザからローカルファイルを安全に覗ける、Webアプリのファイル操作の入口

📌 このページのポイント

ユーザーが選択したローカルファイルの内容をJavaScriptで読み取れる
FileReaderでテキスト・バイナリ・Data URLなど様々な形式で読み込み可能
画像プレビューやCSV インポートなど、アップロード前のクライアント側処理に活用される

File APIのイメージ

ひよこ

ブラウザからパソコンのファイルが読めるって、セキュリティ的に大丈夫なの？

ペンギン先生

ユーザーが明示的にファイルを選択するかドラッグ＆ドロップしない限り、ブラウザはローカルファイルにアクセスできないから安心してね。input type="file"やドロップイベントを通じてのみファイルを取得できる設計なんだ

ひよこ

ファイルの中身はどうやって読むの？

ペンギン先生

FileReaderオブジェクトを使うよ。readAsText()でテキストとして、readAsDataURL()でBase64エンコードされたData URLとして、readAsArrayBuffer()でバイナリデータとして読み込めるんだ。画像ファイルをData URLで読めばプレビュー表示にそのまま使えるよ

ひよこ

最近はもっと簡単な方法もあるって聞いたけど？

ペンギン先生

file.text()やfile.arrayBuffer()のようにPromiseベースのメソッドが追加されたんだ。FileReaderのイベントベースより書きやすいよ。さらにFile System Access APIを使えば、ファイルの保存ダイアログを開いて書き込みもできるようになったんだ

ひよこ

大きなファイルを読み込んでもブラウザは大丈夫なの？

ペンギン先生

数百MB以上のファイルをまるごと読むとメモリを圧迫するから注意が必要だよ。大きなファイルはFile.slice()でチャンクに分割して少しずつ読んだり、ReadableStreamとして扱ったりするのがベストプラクティスだね

まとめ：ざっくりこれだけ覚えればOK！

「File API」って出てきたら「ブラウザでローカルファイルを読み取るAPI」と思えればだいたいOK！

📖 おまけ：英語の意味

「File API」＝ファイル API

💬 ユーザーのローカルファイルをWeb上で扱えるようにするAPIだよ。昔はサーバーにアップロードしないとファイルの中身を見られなかったんだ

← 用語集にもどる