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

File API とは？

最終更新: 2026年10月4日

💡 選んだファイルを、ブラウザ内で読み取って使う入口

WebブラウザでFileやBlobのデータを読み取るためのAPI群。ユーザーが選択したファイルのプレビューや、テキスト・バイナリの処理などに使われる。

📌 このページのポイント

ファイル選択からFileを受け取り、内容を読む代表例。FileはBlobを継承し、text()などの読み取り方法も使えます。

ひよこ

ブラウザはパソコンのファイルを勝手に全部読める？

ペンギン先生

File APIは、任意のパスを指定してパソコン中のファイルを読める仕組みではないよ。代表的にはファイル選択欄やドラッグ＆ドロップで、ユーザーが渡したFileを扱う。プログラムで作ったFileやBlobを読み取ることもあるんだ

ひよこ

選んだファイルは外に送られないの？

ペンギン先生

このAPIで読むだけなら、サーバーへアップロードせずブラウザ内で処理できるよ。でも、読み取った内容をWebアプリが送信することは可能なんだ。ファイルを渡す前に、そのサイトで何に使うのか確認しよう

ひよこ

内容はどうやって読むの？

ペンギン先生

FileReaderのreadAsText()はテキスト、readAsArrayBuffer()はバイナリを扱うArrayBuffer、readAsDataURL()はData URLとして読み込むよ。読み込みの完了を待たずに処理を進められるので、結果は完了やエラーのイベントに応じて扱うんだ

ひよこ

ほかの読み方もある？

ペンギン先生

FileはBlobを継承しているので、file.text()やfile.arrayBuffer()も使えるよ。これらはPromiseで結果を受け取る。text()はUTF-8として読むので、文字コードを指定できるFileReaderのreadAsText()とは違いがあるんだ

ひよこ

大きなファイルはどう扱うの？

ペンギン先生

全部を文字列やArrayBufferにすると、その分のメモリが必要になるよ。file.slice()で範囲を取り出したり、file.stream()で少しずつ処理したりする方法がある。ただし、読み取った断片を全部ため込めばメモリは増えるので、アプリの処理方法も大切だね

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

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

📖 おまけ：英語の意味

「File API」＝ファイルを扱うAPI

💬 ファイルのデータをブラウザ内のプログラムで扱うためのAPIだよ。アップロード前のプレビューや内容確認にも使えるんだ

参考資料