HTMLでテキストファイルを読み込む方法を解説!

HTMLでテキストファイルを読み込む方法をサンプルコード付きで解説します。予め文章を用意しておいて、HTMLでテキストファイルとして読み込みたいという時がよくあります。ここではそのHTMLでテキストファイルとして読み込みを行う2つの方法を紹介します。

コンテンツ [表示]

  1. 1HTMLでテキストファイルを読み込みたい
  2. 2HTMLでテキストファイルを読み込む方法
  3. 2.1HTMLのみでテキストファイルを読み込む方法
  4. 2.2JSを用いてテキストファイルを読み込む方法
  5. 3まとめ

HTMLでテキストファイルを読み込みたい

予め文章を用意しておいて、HTMLでテキストファイルとして読み込みたいというケースを考えます。

ここではそのHTMLでテキストファイルとして読み込みを行う2つの方法を紹介します。

Photo byOpenClipart-Vectors

HTMLでテキストファイルを読み込む方法

ではHTMLでテキストファイルを読み込む方法について解説します。

HTMLのみでテキストファイルを読み込む方法

まずHTMLのみでテキストファイルを読み込む方法について解説します。

HTML要素としてはobject要素を用います。

そしてdata属性に予め用意しているtxtファイルのパスを指定し、type属性にtext/plainと記述します。

ではサンプルコードを用意したので確認してみましょう。

上記のようにsample.txtの中身が表示されていることが分かります。

JSを用いてテキストファイルを読み込む方法

JSを用いてテキストファイルを読み込むにはWeb APIのFileReaderオブジェクトを用います。

早速ですがサンプルコードで確認してみましょう。

txtファイルを選択していただくとテキストエリアにファイルの中身を表示させることができます。

コード解説

JSのコード解説をします。

まずファイルが選択された場合の処理をするためにchangeイベントで記述しています。

event.target.filesには選択されたファイルが配列形式で格納されています。

そしてここでFileReaderをインスタンス化しておきます。

また.readAsTextメソッドを用いてテキスト形式でファイルを読み込みます。

最後に.onloadメソッドを用いてファイルの読み込みが終わるとともに、テキストエリアにファイルの内容が反映されるようコードを記述しています。

まとめ

いかがでしたでしょうか?

ここで紹介した方法を用いてぜひHTMLでテキストファイルを読み込んでみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを7月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを7月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

西村卓也
ライター

西村卓也

HTML/CSS/JSに関する記事を執筆しています。よろしくお願いします。