FileReader.resultプロパティについて

Question

（file_reader.html）

<form>
    <label for="file">file</label>
    <input id="file" type="file" />
</form>
<hr /> 
<pre id="result"></pre>
<script src="file_reader.js"></script>

（file_reader.js）

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('file').addEventListener('change', function (e) {
        var input = document.getElementById('file').files[0];
        var reader = new FileReader();
        console.log('bbb');
        reader.addEventListener('load', function () {
            console.log('aaa');
            document.getElementById('result').textContent = reader.result;・・・①
        }, true);
        reader.readAsText(input, 'UTF-8');・・・②
        
    }, true);
});

上記のプログラムなのですが、ブラウザ上で読み込んだファイルのテキストが正常に表示されます。
しかし、②のreadAsTextの処理が終わるまではresultプロパティの中身はは空ではないのでしょうか？
②の`reader.readAsText(input, 'UTF-8')を①よりも前に書かないと、textContentに空文字列が代入されたままになってしまうのでは？と思ったのですが、上記の書き方でも②の処理が終わった後にtextContentの中身がアップロードしたファイルのテキストの内容に書き変わるのはどうしてでしょうか。

Answer 1

readAsTextの処理が終わるまではresultプロパティの中身は空ではないのでしょうか？

空となる解釈で概ね合っています。
FileReader#Properties
イベントの状態は EMPTY > LOADING > DONE と変化しますが、EMPTY 段階で初期化され、DONE で result を参照できるようになります。
※実際に試していませんが、 EMPTY, LOADING 段階で参照しても undefined が返却されるかもしれません（概ねと書いた理由です）。

書き変わるのはどうしてでしょうか。

document.getElementById('result').textContent = "anyTextData";
は、要素内をまるごと書き換えます。

textContent

ノードにこのプロパティに値を設定すると、そのノードのすべての子供が取り除かれて、指定された値をもつ単一のテキストノードに置き換わります。

とあるように、ご質問の ファイル内容は １つのTextNode として扱われます。

Comments

[退会済みユーザー]

質問は「どうして書いた順番に(リスナを含め) 上から順番に実行されないのか？」ということだと思います。

違いますか？ > 質問者さん

[AkitoshiManabe]

SurferOnWwwさんの解釈も合っていると思います。
私も「リスナをアタッチする順番を気にしてるのかな？」とは感じました。
とりあえず、表題と文中の疑問文から判断して回答を作成したわけです。
しかし、読み手による解釈の違いは起こるものですね。

[theplace]

ありがとうございます。
「DONE」とは「addEventListenerのloadイベントが終了した」という状態ですよね？
順番としては、reader.readAsTextの処理が終わってから、上に書いたaddEventListenerのloadイベントが発生するため、reader.readAsText終結後にaddEventListenerのfunction()が実行されるということでしょうか。

[AkitoshiManabe]

その通りです。詳細は、MDNのページをリンクしていますので、時間のあるときにでもご確認ください。

[退会済みユーザー]

load イベントを発生させるのは FileReader です。細かいことを言うようですが、誤解してないか注意してください。

[theplace]

無事解決できたと思います。
ありがとうございました。
MDNのページはまだ途中ですが、関連しているプロパティの箇所については一通り読んでおきます。

Answer 2

(2) で読み込みが完了すると、load イベントが発生し、(1) でそのイベントにアタッチされているリスナ (function) が動くからだと思います。

Comments

[theplace]

ありがとうございます。
書いた順通りには処理されていないということでしょうか。
console.log('bbb');が終わった後にすぐにreader.addEventListener('load', function ()・・が実行されると思っていたのですが、これはこの段階では実行されずにいったん無視され、次のreader.readAsText・・が終わってから、上に書いたaddEventListenerが呼び出されるのでしょうか。

[退会済みユーザー]

イベントへのリスナのアタッチは即行われますが、リスナが呼び出されるのはイベント発生時です。(別の言い方をすると、load イベントが発生しないと function は実行されません)

[theplace]

イベントが発生すればaddEventListenerで定義したリスナーの関数が実行されるということは理解しているのですが、addEventListenerのイベントの「load」がいつ発生するのかについて自分の中でよくわかっていないのですが、このloadイベントについては、reader.readAsText(input, 'UTF-8');によってファイルが読み込まれなければイベントが発生しないので、この処理を待って終わってからはじめてaddEventListener内のリスナーが実行されるという流れでしょうか。
書いた順番通りに処理されると思っていたので、もやもやしていたのかもしれません。

[退会済みユーザー]

同期・非同期の違いが分からないとモヤモヤがとれないかもしれませんね。

質問に書いてあるように reader.readAsText の処理が終わらないと reader.result で結果は取得できないというのはその通りです。処理が終わると load イベントが発生するので、そのタイミングを待って reader.result で結果を取得します。その前のタイミングでは取得できないので、イベントとリスナを使わざるを得ないです。

[退会済みユーザー]

一つ言い忘れましたが、reader.readAsText は非同期で動きます。

[theplace]

同期・非同期の処理の違いが関係していたんですね。
ここでテキストが止まってしまっていたのですが、「処理が終わると load イベントが発生する」と聞いて納得することができました。
ググったページを読みながら1人でずっと悩んでいたので大変助かりました。
同期・非同期処理についてはテキストの最終章付近にajax、promiseオブジェクトなどがあったので、そちらのページも含めて学習したいと思います。