【JavaScript】ファイルの読み込み方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptにおけるファイルの読み込み方法をご紹介しています。

JavaScriptでファイルの読み込み処理を実装したいんだけど、どうすればいいの？

上記の疑問にお答えしています。

では、解説していきます。

JavaScriptでファイルを読み込む方法

JavaScriptでファイルを読み込むのには、File APIを利用します。File APIはブラウザからローカルに保存されたファイルの属性や内容を取得することができるAPIです。JavaScriptでFile APIを使ってファイルを読み込むためには、大まかに下記のステップに沿って処理を作成することになります。

input[type=file]でファイルを読み込む
input[type=file]のchangeイベントを取得する
input[type=file]のfilesプロパティからFileオブジェクトを取得する
FileReaderオブジェクトでファイル内容を読み込む

ここまでが基本的な流れで、以降はファイルの種類によって出力する処理が異なります。本記事ではテキストファイルを使用して、ファイルを読み込む方法を解説していきます。少し長くなりますが最後までお付き合いいただければ幸いです！

では、各ステップの内容を詳しく紹介していきます。

input[type=file]でファイルを読み込む

ファイルを読み込むにあたって、最初に必要なるのがローカルからファイルを取得するための機能です。これはHTMLのフォームで実装します。幸いフォームのinputにはファイルを扱うためのtypeが用意されているため、簡単に実装することができます。ここではサンプルとして簡易的なフォームを作成していきます。

HTML

<form>

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

</form>

以上でユーザのローカルからファイルを受け取ることができます。上記は単一ファイルが選択された場合を想定していますが、もし複数のファイルを読み込む場合は、下記のようにinputにmultiple属性を追加してください。

HTML

<form>

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

</form>

以上でフォームを経由してファイルを受け取れるようになりました。続いてinputからファイルが選択された際にJavaScriptでchangeイベントを取得する処理を作成してきます。

input[type=file]要素のchangeイベントを取得する

前項で作成したフォームからファイルが選択された際にchangeイベントを取得するところまでを作成します。input[type=file]のidを指定してinput要素を取得し、取得した要素に対してイベントを設定します。

JS

let input = document.getElementById('file');
input.addEventListener('change', () => {

    alert('ファイルを読み込みました！');

});

ここまで実装すると下記のデモのようになるかと思います。ファイルの選択によってイベントが発火すると、アラートが表示されます。

See the Pen
6055-1 by ryohei (@intotheprogram)
on CodePen.

続いてfilesプロパティからFileオブジェクトを取得し、ファイルを読み込む処理を作成していきます。

input[type=file]のfilesプロパティからFileオブジェクトを取得する

ユーザーが選択したファイルからFileオブジェクトを取得します。filesプロパティはFileListオブジェクト（配列）を返すので、ループで処理を作っていきます。複数のファイルが選択された場合にも対応できるので、ループで処理した方が良いかと思います。

JS

let input = document.getElementById('file');
input.addEventListener('change', () => {

    for(file of input.files){

        console.log(file);

    }

});

動作を確認するためにsample.txtというファイルを読み込んでみます。下記はファイルを読み込み時の実行結果です。コンソールに出力しています。選択されたファイル自体の情報が表示されているかと思います。

実行結果



[Object File] {

  lastModified: 1607132846575

  lastModifiedDate: Sat Dec 05 2020 10:47:26 GMT+0900 (日本標準時) {}

  name: "sample.txt"

  size: 23

  type: "text/plain"

}

Fileオブジェクトの取得は以上で完了です。上記ではFileオブジェクトをそのままコンソールに出力していますが、ファイル名だけ取得したい！というケースもありますよね。オブジェクトの各メンバーには下記のようにアクセスできますので、必要に応じてほしい情報だけ取得していただけます。

file.lastModified;

file.lastModifiedDate;

file.name;

file.size;

file.type;

これでFileオブジェクトの欲しい情報が取得できるようになりました。後はファイルの中身を読み込むだけですね。FileReaderオブジェクトでファイルの内容を読み込んでいきましょう！

FileReaderオブジェクトでファイル内容を読み込む

FileReaderオブジェクトは下記の方法でインスタンス化することができます。

let reader = new FileReader();

FileReaderオブジェクトはJavaScriptによって提供されていますので、特別にライブラリを読み込んだりする必要はありません。楽でいいですね！

FileReaderオブジェクトのプロパティやメソッドは下記の通りです。

FileReaderのプロパティ

FileReader.error	ファイル読み込み中に発生したエラーを保持する読み取り専用プロパティ
FileReader.readyState	ファイルの読み込み状態を数値で表す読み取り専用プロパティ 0: 読み込み前 1: 読み込み中 2: 読み込み終了
FileReader.result	ファイルの読み込みが完了した際にファイルの内容を保持する読み取り専用プロパティ

FileReader.error

ファイル読み込み中に発生したエラーを保持する読み取り専用プロパティ

FileReader.readyState

ファイルの読み込み状態を数値で表す読み取り専用プロパティ

0: 読み込み前
1: 読み込み中
2: 読み込み終了

FileReader.result

ファイルの読み込みが完了した際にファイルの内容を保持する読み取り専用プロパティ

FileReaderのメソッド

FileReader.abort()	読込処理を中断し、結果を`FileReader.readyState`に格納する
FileReader.readAsArrayBuffer()	ファイルの読み込みが終了後、読み込み結果を`FileReader.result`に「ArrayBuffer」形式で格納する
FileReader.readAsBinaryString()	ファイルの読み込みが終了後、読み込み結果を`FileReader.result`に「バイナリデータ」形式で格納する
FileReader.readAsDataURL()	ファイルの読み込みが終了後、読み込み結果を`FileReader.result`に「data:」のURL形式で格納する
FileReader.readAsText()	ファイルの読み込みが終了後、読み込み結果を`FileReader.result`に「テキスト」形式で格納する

より詳しい情報は下記のMDNドキュメントをご参照ください。

https://developer.mozilla.org/ja/docs/Web/API/FileReader

ではFileReaderのプロパティやメソッドを使用してファイルの内容を読み込んでみます。動作確認にはこれまで使用してきた「sample.txt」の内容を出力するスクリプトで行います。今回はテキスト形式でコンソールに出力したいので、FileReaderの使用するメソッドはFileReader.readAsText()にします。果たしてファイルの内容はどうなっているのでしょうか。

JS

let input = document.getElementById('file');

let reader = new FileReader();
input.addEventListener('change', () => {

    for(file of input.files){

        //Fileオブジェクト(テキストファイル)のファイル内容を読み込む

        reader.readAsText(file, 'UTF-8');

        //ファイルの読み込み完了後に内容をコンソールに出力する

        reader.onload = ()=> {

            console.log(reader.result);

        };

    }

});

実行結果は下記の通りです。

実行結果

"ここまで

お疲れ様でした！"

無事ファイル内容の読み込みができましたね。本来であればエラーが発生した際の処理も必要になるのですが、それはまた別の機会にご紹介できればと思います。最後まで長々とお付き合いいただきありがとうございました。お疲れ様でした！

上記のデモを埋め込んでおきますので、動作確認などにご利用ください！

See the Pen
6055-2 by ryohei (@intotheprogram)
on CodePen.

最後に

「よし、ファイルを読み込む方法を復習もかねて記事にしよう！」と意気込んで本記事を書き始めたのですが、想定していた文字数の倍以上になってしまいまいた。書き始める前は2000文字くらいになる予定だったのですが、どうしてこうなったのやら……。

でもFileオブジェクトやFileReaderにしてもそうですが、ドキュメントを読み直していると仕様が変わっていたり、知らないイベントやプロパティ、メソッドなんか出会えたりして、知らなかったことを知って、頭の中の情報が更新されていくのはすごく新鮮な気持ちになりますよね。私自身フロントエンドエンジニアとしてのキャリアはそれほど長いわけではないので、知らないことの方が圧倒的に多いんですけどね……技術の進歩は日進月歩、追いつけることはないでしょうけど('_')

とこのままだとかなり脱線してしまいそうなのでまとめを！

JavaScriptでファイルを読み込むためには多くのステップを踏まなければならないですが、ファイルの読み込みはフロントエンドを扱う方の必須スキルですので、自分の手でスクリプトを書いて描いて掻きまくって覚えていきましょう！（自分に言い聞かせる）

以上、JavaScriptでファイルの読み込み方法のご紹介でした！