FileReader でローカルファイル読み込み — const fr = new FileReader(); fr.onload = e => console.log(e.target.result)
FileReader はブラウザで「ユーザーが選んだローカルファイル」を読み込むためのAPIです。テキストや画像などを JavaScript で扱えるようになります。初心者がまず触れるのは「テキストファイルを読み込んで表示する」ケースです。
基本の流れ
<input type="file">でユーザーにファイルを選んでもらう。- 選ばれたファイルを
FileReaderに渡す。 - 読み込み完了イベント (
onload) で結果を受け取る。 resultに読み込んだ内容が入る。
基本コード例（テキストファイルを読み込む）
<input type="file" id="fileInput">
<pre id="output"></pre>
<script>
const input = document.getElementById("fileInput");
const output = document.getElementById("output");
input.addEventListener("change", () => {
const file = input.files[0]; // 選択された最初のファイル
if (!file) return;
const fr = new FileReader();
// 読み込み完了時の処理
fr.onload = (e) => {
output.textContent = e.target.result; // ファイル内容を表示
};
// テキストとして読み込む
fr.readAsText(file);
});
</script>
- ポイント:
readAsText(file)でテキストとして読み込む。 - 結果:
e.target.resultに文字列が入る。
よく使うテンプレート集
画像ファイルを読み込んで表示
<input type="file" id="imgInput">
<img id="preview" style="max-width:200px">
<script>
const input = document.getElementById("imgInput");
const preview = document.getElementById("preview");
input.addEventListener("change", () => {
const file = input.files[0];
if (!file) return;
const fr = new FileReader();
fr.onload = (e) => {
preview.src = e.target.result; // DataURLをimgに設定
};
fr.readAsDataURL(file); // Base64形式で読み込む
});
</script>
- ラベル:
readAsDataURL(file)を使うと画像を直接<img>に表示できる。
バイナリデータを読み込む
const fr = new FileReader();
fr.onload = (e) => {
const arrayBuffer = e.target.result; // ArrayBuffer
const bytes = new Uint8Array(arrayBuffer);
console.log("バイト数:", bytes.length);
};
fr.readAsArrayBuffer(file);
- ラベル:
readAsArrayBuffer(file)でバイナリを扱える。音声やPDF解析などに使う。
実務でのコツ
- ユーザー操作必須: セキュリティ上、ユーザーが
<input type="file">で選んだファイルしか読めない。勝手にPC内のファイルを読むことはできない。 - 読み込み方法を選ぶ:
- テキスト →
readAsText - 画像表示 →
readAsDataURL - バイナリ処理 →
readAsArrayBuffer
- テキスト →
- エラー処理:
fr.onerrorで読み込み失敗を検知できる。 - 大きなファイル: 数MB〜数百MBでも扱えるが、処理が重くなるので注意。
ありがちなハマりポイントと対策
- ファイルが選ばれていない:
- 対策:
if (!file) return;でチェック。
- 対策:
- 文字化け:
- 対策:
readAsText(file, "utf-8")のようにエンコーディングを指定できる。
- 対策:
- 画像を表示できない:
- 対策:
readAsDataURLを使う。テキスト読み込みでは<img>に表示できない。
- 対策:
練習問題（CSVファイルを読み込んで表示）
<input type="file" id="csvInput">
<table id="table" border="1"></table>
<script>
const input = document.getElementById("csvInput");
const table = document.getElementById("table");
input.addEventListener("change", () => {
const file = input.files[0];
if (!file) return;
const fr = new FileReader();
fr.onload = (e) => {
const lines = e.target.result.split("\n");
table.innerHTML = "";
lines.forEach(line => {
const tr = document.createElement("tr");
line.split(",").forEach(cell => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);
});
table.appendChild(tr);
});
};
fr.readAsText(file, "utf-8");
});
</script>
- 効果: CSVファイルを読み込んで表形式で表示できます。
直感的な指針
- FileReader = ユーザーが選んだファイルを読み込む道具。
- 読み込み方法を選んで、
onloadでresultを使う。 - テキスト・画像・バイナリの3パターンを覚えると応用が広がる。