JavaScript | Web API：ファイル・データ操作 － File API

JavaScript JavaScript
スポンサーリンク

File API は「ユーザーが選んだファイルをブラウザから触るための窓口」

まず一番大事なことから。

JavaScript は、勝手にユーザーのパソコンの中を覗いたり、
好きなファイルを読みまくったりはできません。
それをやられたら、プライバシーもセキュリティも崩壊します。

そこで登場するのが File API です。

ユーザーが
「このファイルをブラウザに渡してもいいよ」
と明示的に選んだファイルだけを、
JavaScript から安全に扱えるようにする仕組み——
それが File API です。

代表的な入り口は次の 2 つです。

  • <input type="file"> で選ばれたファイル
  • ドラッグ＆ドロップでブラウザに落とされたファイル

ここから File オブジェクトを受け取り、
中身を読んだり、プレビューしたり、サーバーに送ったりします。

基本の流れ：「ファイルを選ぶ → File オブジェクトを受け取る」

input 要素から FileList を受け取る

一番シンプルな例からいきます。

HTML:

<input type="file" id="fileInput">

JavaScript:

const input = document.querySelector("#fileInput");

input.addEventListener("change", () => {
  const files = input.files; // FileList
  console.log(files);
});
JavaScript

input.files の正体は FileList です。
配列っぽいオブジェクトで、中に File が入っています。

const file = files[0]; // 最初のファイル
console.log(file.name);      // ファイル名
console.log(file.size);      // バイト数
console.log(file.type);      // MIME タイプ（"image/png" など）
JavaScript

ここで押さえておきたいのは、

  • File は「ファイルそのもの」ではなく「ファイルへのハンドル」
  • 中身を読むには、さらに別の手段（FileReader など）が必要

ということです。

複数ファイルを選べるようにする

HTML 側で multiple を付けると、複数選択できます。

<input type="file" id="fileInput" multiple>

input.files に複数の File が入るので、
for や forEach で回して処理します。

Array.from(input.files).forEach(file => {
  console.log(file.name);
});
JavaScript

重要ポイント：File は「メタ情報＋中身への入口」

File オブジェクトで分かること

File には、主に次のような情報が入っています。

file.name   // "photo.png" など
file.size   // バイト数（例: 123456）
file.type   // "image/png" など（MIME タイプ）
file.lastModified // 最終更新日時（ミリ秒）
JavaScript

ここまでは「メタ情報」です。
中身のバイナリやテキストは、まだ読んでいません。

中身を読むには FileReader を使う

File API とセットでよく出てくるのが FileReader です。

const reader = new FileReader();

reader.addEventListener("load", () => {
  console.log("読み込み完了:", reader.result);
});

reader.readAsText(file, "utf-8");
JavaScript

readAsText を使うと、
テキストファイルの中身を文字列として読めます。

他にも、

  • readAsDataURL(file) で Base64 データ URL として読む
  • readAsArrayBuffer(file) でバイナリとして読む

といった読み方があります。

ここが File API の「中身に触る」部分です。

例題①：テキストファイルを読み込んで画面に表示する

HTML

<input type="file" id="fileInput" accept=".txt">
<pre id="output"></pre>

accept=".txt" は「拡張子 .txt を主に選んでね」というヒントです（強制ではない）。

JavaScript

const input = document.querySelector("#fileInput");
const output = document.querySelector("#output");

input.addEventListener("change", () => {
  const file = input.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.addEventListener("load", () => {
    output.textContent = reader.result; // 中身のテキスト
  });

  reader.readAsText(file, "utf-8");
});
JavaScript

流れを整理すると、

  1. ユーザーがファイルを選ぶ
  2. input.files[0] から File を受け取る
  3. FileReader で readAsText する
  4. load イベントで reader.result に中身が入る
  5. それを <pre> に表示する

というシンプルなものです。

ここで「File → FileReader → result」という流れを体で覚えておくと、
画像やバイナリを扱うときにも応用しやすくなります。

例題②：画像ファイルを選んでプレビュー表示する

HTML

<input type="file" id="fileInput" accept="image/*">
<img id="preview" alt="プレビュー" style="max-width: 200px;">

JavaScript（FileReader を使うパターン）

const input = document.querySelector("#fileInput");
const img = document.querySelector("#preview");

input.addEventListener("change", () => {
  const file = input.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.addEventListener("load", () => {
    img.src = reader.result; // Data URL が入る
  });

  reader.readAsDataURL(file);
});
JavaScript

readAsDataURL を使うと、
reader.result に data:image/png;base64,... のような文字列が入ります。
それを img.src にセットすると、そのまま画像として表示できます。

JavaScript（URL.createObjectURL を使うパターン）

もう一つよく使われるのが URL.createObjectURL です。

input.addEventListener("change", () => {
  const file = input.files[0];
  if (!file) return;

  const url = URL.createObjectURL(file);
  img.src = url;
});
JavaScript

これは、ファイルに対して「一時的な URL」を発行してくれる仕組みです。
大きなファイルでも効率よく扱えるので、画像プレビューではよく使われます。

初心者のうちは、

  • テキスト → FileReader + readAsText
  • 画像プレビュー → createObjectURL

くらいの使い分けで十分です。

重要ポイント：ブラウザは「勝手にファイルを読めない」

ユーザーの操作が必須

File API の大前提として、

  • JavaScript は勝手に C:\ や ~/ を覗けない
  • 必ずユーザーが「このファイルを選ぶ」という操作をする
  • その結果として得られた File だけを扱える

という制約があります。

これは、セキュリティのために絶対に守られているルールです。

「ブラウザからローカルの任意のファイルを読みたい」は、
基本的にできない、と思ってください。

読み込んだファイルはサーバーに送ることもできる

File API で読み込んだ File は、
FormData と組み合わせてサーバーに送ることができます。

const formData = new FormData();
formData.append("file", file);

fetch("/upload", {
  method: "POST",
  body: formData
});
JavaScript

ここでは中身を自分で読む必要はなく、
File をそのまま送れば OK です。

「プレビューはブラウザで」「保存はサーバーで」
という役割分担がしやすくなります。

例題③：ドラッグ＆ドロップでファイルを受け取る概要

ドラッグ＆ドロップも、File API の入り口の一つです。

HTML:

<div id="dropzone" style="width:200px;height:100px;border:2px dashed #666;">
  ここにファイルをドロップ
</div>

JavaScript（ざっくり）:

const dropzone = document.querySelector("#dropzone");

dropzone.addEventListener("dragover", (event) => {
  event.preventDefault(); // ドロップを許可
});

dropzone.addEventListener("drop", (event) => {
  event.preventDefault();
  const files = event.dataTransfer.files; // FileList
  const file = files[0];
  console.log(file.name);
});
JavaScript

ここでも結局、
event.dataTransfer.files から FileList を受け取り、
中の File を扱う、という流れは同じです。

「input から来るか」「ドロップから来るか」の違いだけで、
その先は File API の世界です。

初心者として File API で本当に掴んでほしいこと

File API は「ユーザーが選んだファイル」を扱うための仕組み
<input type="file"> やドラッグ＆ドロップから File を受け取る
File からは name / size / type などのメタ情報が取れる
中身を読むときは FileReader（readAsText / readAsDataURL / readAsArrayBuffer）を使う
画像プレビューには URL.createObjectURL(file) もよく使われる
ブラウザはユーザーの許可なしにローカルファイルを勝手に読めない

まずは、

テキストファイルを選んで中身を <pre> に表示する
画像ファイルを選んで <img> にプレビュー表示する

この 2 つを自分の手で書いてみてください。

「ファイルはローカルにあるのに、ブラウザの中で中身を扱える」
という感覚が一度でも掴めると、
File API はただの仕様ではなく、
「ユーザーの手元のデータと、Web アプリをつなぐための橋」 に見えてきます。

スポンサーリンク
タイトルとURLをコピーしました