用語集 › 🕸️ Web › File API
【ファイルエーピーアイ】

File API とは？

公開:
💡 ブラウザからローカルファイルを安全に覗ける、Webアプリのファイル操作の入口
📌 このページのポイント
File API — ブラウザでのファイル読み取り ユーザー操作 ファイル選択 ドラッグ＆ドロップ File オブジェクト name / size type / lastModified FileReader readAsText() readAsDataURL() readAsArrayBuffer() 活用例 画像プレビュー readAsDataURL CSVインポート readAsText バイナリ解析 readAsArrayBuffer
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だよ。昔はサーバーにアップロードしないとファイルの中身を見られなかったんだ
🔗 あわせて読みたい
← 用語集にもどる