FileReader でファイルを読み取る
選択したファイルをテキストまたはデータ URL として読み取ります。
「FileReader でファイルを読み取る」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
FileReaderとは
FileReaderは、FileオブジェクトとBlobオブジェクトの内容を非同期で読み取るブラウザー API です。<input type="file">からファイルを取得し、テキスト、データ URL、またはバイナリとして読み取れます。
入力からファイルを取得する
ファイル入力からはfilesリストを取得できます。最初に選択されたファイルはインデックス0にあり、name、size、typeなどの便利なプロパティを持っています。
const input = document.querySelector('#picker');
const file = input.files[0];
console.log(file.name);
console.log(file.size);
console.log(file.type);読み取りは非同期で行われる
FileReaderはデータを直接返しません。onloadハンドラーを設定してから、読み取りメソッドを呼び出します。結果は後からreader.resultに格納されます。
const reader = new FileReader();
reader.onload = function () {
console.log('done reading');
console.log(reader.result);
};
reader.readAsText(file);readAsText
readAsTextはファイルをテキスト文字列としてデコードします。.txt、.csv、JSONファイルに適しています。
const reader = new FileReader();
reader.onload = () => {
console.log('contents:', reader.result);
};
reader.readAsText(textFile);readAsDataURL
readAsDataURLはbase64形式のdata: URLを生成します。img.srcに設定して画像をプレビューするのに最適です。
const reader = new FileReader();
reader.onload = () => {
const img = document.querySelector('#preview');
img.src = reader.result;
console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);readAsArrayBuffer
readAsArrayBufferは、生のバイナリデータをArrayBufferとして返します。ファイル形式をバイト単位で解析するときに便利です。
const reader = new FileReader();
reader.onload = () => {
const bytes = new Uint8Array(reader.result);
console.log('byte count:', bytes.length);
console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);エラーを処理する
onerrorハンドラーを設定して、ファイルを読み取れない場合などの読み取り失敗を捕捉します。
const reader = new FileReader();
reader.onerror = () => {
console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);進捗を追跡する
大きなファイルでは、onprogressイベントによって現在までに読み込まれたバイト数が通知されるため、進捗バーに利用できます。
const reader = new FileReader();
reader.onprogress = (event) => {
if (event.lengthComputable) {
const percent = (event.loaded / event.total) * 100;
console.log('loaded ' + percent.toFixed(0) + '%');
}
};
reader.readAsArrayBuffer(bigFile);Promiseでラップする
イベントベースのAPIは扱いにくいことがあります。Promiseでラップすると、awaitを使ってよりすっきりしたコードを書けます。
function readText(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(reader.error);
reader.readAsText(file);
});
}
readText(file).then(text => console.log(text));最新の代替手段：file.text()
最新のブラウザーでは、file.text()、file.arrayBuffer()、file.stream()を直接呼び出してPromiseを返せます。多くの場合、FileReaderよりも簡単です。
async function show(file) {
const text = await file.text();
console.log(text);
}
show(file);FileReaderが重要な理由
FileReaderを使うと、ユーザーが選択したファイルをブラウザーだけで処理できます。画像のプレビュー、CSVの解析、送信前のアップロード内容の検証などが可能です。必要なデータ形式に応じて、テキスト、データ URL、バイナリのいずれかの読み取りメソッドを選択します。次はBlobとオブジェクト URLについて学びます。
const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);確認問題
画像プレビューのsrcに適したbase64文字列を返すFileReaderのメソッドはどれですか。
まとめ：ファイルを読み取る
ファイルの内容を読み取る方法を学びました。
input.filesからファイルを取得し、onloadを使って非同期で読み取ります。readAsText、readAsDataURL、readAsArrayBufferは、それぞれ異なる形式を返します。onerrorとonprogressを処理して、堅牢性を高めます。- 最新の
file.text()とfile.arrayBuffer()は、Promiseベースの代替手段です。
よくある質問
「FileReader でファイルを読み取る」レッスンは無料ですか？
はい。「FileReader でファイルを読み取る」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「FileReader でファイルを読み取る」で何を学びますか？
選択したファイルをテキストまたはデータ URL として読み取ります。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「FileReader でファイルを読み取る」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- FormData オブジェクト
- FileReader でファイルを読み取る
- Blob とオブジェクト URL
- Fetch でファイルをアップロードする