ダイアログで選んだテキストファイルを読み込む - JavaScriptのチュートリアル

このレッスンでは、 ファイルダイアログを開いて、 その中から選んだテキストファイルの中身を 出力してみたいと思います。 今ダイアログボックスを開いて、 その選んだファイルの情報を 取得するところまで JavaScriptコードが書けています。 まずは form、 name、form ですね、から、 フォームの要素を取得して、 そのフォームの要素から、 name、file ですね。 そして、これが type、file の input 要素なんですが、 その要素を取ってきます。 そうしたら、addEventListener で、 フォームの要素の変更があった場合という イベント、change ですね、 そこでリスナー関数を実行し、 file から files プロパティ、 ファイルリストのオブジェクトですね。 その中から1個だけ 選んでいるはずですので、 0番で file のオブジェクト、 ファイルオブジェクトと 言うんですけれども、 それを取ってきて、その name プロパティ、 ファイルの名前ですね、それを表示すると。 コンソールに出すというところまで 出来ています。確認しておきましょう。 「type」が「file」のインプット要素は、 この「ファイルを選択」という ボタンになっていますので、 これをクリックします。 そうすると、ダイアログが開きます。 テキストファイルはこれですね。 こんなファイルなんですが、 開くと「Console」に、 ファイルオブジェクトのプロパティで、 「name」、ファイルの名前ですね、 が表示されています。 それから、「type」が「file」の input属性というのは、 選んだファイルの名前が、この右側に 出てくることになっていますので、 同じ情報が示されています。 選んだファイルのオブジェクトは 取得できましたので、 ファイルを読み込むということに なるんですが、そのためにはもうひとつ オブジェクトの助けが必要です。 変数に入れるんですけれども、 ファイルリーダーというオブジェクトです。 ですから名前も fileReader にしましょう。 オブジェクトを作ります。 JavaScriptでオブジェクトを作るときは、 約束は、new という記号ですね。 そのあとに、オブジェクトの名前、 fileReader と、（）ですね。…