JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでCSVファイルを読み込む方法について現役エンジニアが解説しています。CSVファイルはカンマで区切られたデータのことです。JavaScriptでCSVファイルを読み込むにはFileReaderクラスを使います。HTMLでフォームを作成して読み込んでみましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
高田 悠
JavaScriptでファイルを読み込む方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
- JavaScriptによるファイルの読み込み
- 実際にファイルを読み込んでみよう
- 読み込んだファイルの種類を判別しよう
- FileReaderで読み込んだファイルを解析する
- 読み込んだテキストを表示してみよう
- 読み込んだ画像ファイルを表示してみよう
- 補足：複数のファイルを同時にアップロードする
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでファイルを読み込む方法について詳しく説明していくね！
お願いします！
JavaScriptによるファイルの読み込み
Webサイトでは、ファイルをアップロードすることでアプリケーションの機能を利用することがよくあります。
例えばマイページがあるようなサイトで、自身のプロフィール画像を登録するために画像ファイルを登録する時には、ファイルをアップロードすることになります。
本記事では、ファイルの読み込み方法と、読み込んだ後の処理の方法について、ファイルの種類別に解説していきます。
実際にファイルを読み込んでみよう
ファイルを読み込んで、JavaScriptで取得するまでの一連の手順を紹介します。
1．input要素をHTMLに記述する
ファイルを読み込むには、まずHTMLに要素を追加する必要があります。
追加する要素はinput要素で、type属性に”file”を指定します。
また、あとでJavaScriptで取得できるよう、任意のidをつけておきましょう。
<input id="upload-file" type="file">
ブラウザで確認してみると、ファイルを選択できるボタンが設置されています。
「ファイルを選択」より任意のファイルを選ぶと、ブラウザ内に自動的にファイルが読み込まれます。
2．input要素をJavaScript側で取得する
1で指定したid属性の値によって、input要素を取得します。
idによる要素の取得には、document.getElementByIdを用います。
const input = document.getElementById('upload-file');
3．ファイルの読み込みを検知する
ファイルを取得するには、「input要素にファイルが指定された」というイベントを検知する必要があります。
ファイルのアップロードは、changeというイベント名で取得できます。
changeイベントを取得するには、addEventListenerを用いて以下のように書きます。
input.addEventListener('change', (e) => {
console.log('ファイルが検知された！');
});
1行目の後半から始まる関数は、イベントリスナの「コールバック関数」と呼ばれ、指定したイベントが発生したタイミングで実行されます。
コールバック関数の関数の引数として、 e という変数が指定されていますね。
引数 e は、ファイルの情報を取得するための重要な引数です。
eについて、次の項目で詳しく説明します。
4．読み込まれたファイルを取得する
3では、「ファイルが読み込まれた」という状態を検知しましたが、まだファイルの中身は取得できていません。
アップロードされたファイルの情報を得るには、イベントリスナのコールバック関数の引数を利用します。
input.addEventListener('change', (e) => {
console.log(e.target.files[0]);
});コールバック関数の引数（ここではe）には、発生したイベントに関する情報が入っています。
そのなかで、e.target.filesは、アップロードされたファイルが配列になっています。
アップロードされたファイルが1つならば、e.target.files[0]でそのファイルを取得できます。
※複数ファイルのアップロードについては本記事の最後に紹介します。
一連の処理を行ってみよう
それでは、解説した1〜4の処理を実際に行ってみましょう。
完成形のコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="upload-file" type="file">
<script>
//JavaScriptの記述
const input = document.getElementById('upload-file');
input.addEventListener('change', (e) => {
console.log(e.target.files[0]);
});
</script>
</body>
</html>
上記のHTMLをブラウザで実行して、任意のファイルをアップロードしてみましょう。
ファイルの読み込みが検知され、コンソールに読み込んだファイルの情報が表示されました！
読み込んだファイルの種類を判別しよう
読み込んだファイルを正しく処理するためには、そのファイルが画像なのか、テキストなのか、また別の形式なのかを判別する必要があります。
ファイルの種類の判別は、MIMEタイプと呼ばれるファイルのタイプによってできます。
おさらいになりますが、読み込んだファイルの情報は、以下のようなコードで取得できました。
input.addEventListener('change', (e) => {
console.log(e.target.files[0]);
});
ここで、例えばtest.txtというテキスト形式のファイルをアップロードすると、以下のようにコンソールに表示されます。
赤枠をみると、typeというプロパティに”text/plain”とあります。
これがファイルのMIMEタイプです。
この情報を用いてif文で条件判定をすると、そのファイルがテキストファイルであることがわかります。
input.addEventListener('change', (e) => {
const file = e.target.files[0]
if (file.type === 'text/plain') {
//テキストファイルだった時の処理
}
});
file typeには様々ありますが、以下のようなものが頻繁に用いられます。
- text/pain : プレーンテキスト
- text/csv：CSV形式のテキスト
- image/png：png形式の画像
- image/jpeg：jpeg形式の画像
- application/json：jsonファイル
その他にもたくさんのtypeがあり、こちらのMDNドキュメントにて参照できます。
アプリケーションの仕様に応じて、適切なMIMEタイプ判定を行いましょう。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
FileReaderで読み込んだファイルを解析する
前の章では、アップロードしたファイルをJavaScriptで取得できました。
しかし、このままでは画像ファイルの画像情報や、テキストファイルの文章を利用できません。
読み込んだファイルを解析し、Webサイト上で使用できるようにするには、FileReaderという機能を使います。
FileReaderは、以下のようなコードの記述で使用できます。
const reader = new FileReader();
//ファイルの情報を取得できた時に実行される
reader.onload = () => {
//解析結果がreader.resultに代入されている
console.log(reader.result);
};
//テキストファイルの場合
reader.readAsText(file);
//画像ファイルの場合
reader.readAsDataURL(file);
この記述は基本的には決まり文句のようなものなので、形として覚えてしまうとよいでしょう。
画像ファイルとテキストファイルで、呼び出すメソッド名が異なることに注意が必要です。
次の章以降では、FileReaderを用いて、より実践的なコードを解説します。
読み込んだテキストを表示してみよう
ここでは、テキストファイル(.txt)をアップロードし、その中身のテキストをコンソールに表示してみます。
一連のコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="upload-file" type="file">
<script>
const input = document.getElementById('upload-file');
//FileReaderの定義
const reader = new FileReader();
input.addEventListener('change', (e) => {
const file = e.target.files[0];
//ファイルの種類を絞る
if (file.type === 'text/plain') {
reader.onload = () => {
console.log(reader.result);
}
reader.readAsText(file);
}
});
</script>
</body>
</html>
複雑なコードに見えますが、分解していくとこれまでの章で解説した内容が組み合わさってできています。
処理の大まかな流れは以下の通りです。
- input要素のchangeイベントにより、ファイルのアップロードを検知
- 読み込まれたファイルがtext/plain形式かどうかを判別
- FileReaderで解析した内容をコンソールに表示
「あいうえお」と書かれたテキストファイルで実行してみると、以下のようになります。
コンソールに「あいうえお」と表示できました。
読み込んだ画像ファイルを表示してみよう
画像ファイルは、Webサイトにアップロードするファイルの種類としては代表的なものです。
ここでは、読み込んだ画像ファイルを実際にHTML上に表示するサンプルを紹介します。
前の章で用いたコードを少し改変します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input id="upload-file" type="file">
<!-- 画像を表示するためのimg要素を追記-->
<img id="image" src="" width="250" height="250">
<script>
const input = document.getElementById('upload-file');
//追加したimg要素を取得
const image = document.getElementById('image');
//FileReaderの定義
const reader = new FileReader();
input.addEventListener('change', (e) => {
const file = e.target.files[0];
//ファイルの種類を絞る
if (file.type === 'image/png') {
reader.onload = () => {
//img要素のsrcに解析結果を代入
image.src = reader.result;
}
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
基本的にはテキストファイルのときと同じ考え方ですが、readAsDataURLメソッドを使っていること、img要素のsrc属性にreader.resultを代入していることがポイントです。
実行すると以下のようになります。
補足：複数のファイルを同時にアップロードする
多くの場合、アップロードするファイルの数は1つですが、時には複数の画像を同時にアップロードしたい場合などがあります。
複数ファイルをアップロードするには、input要素にmultiple属性を追記します。
<input id="upload-file" type="file" multiple>
multiple属性を指定したことで、複数のファイルを選択できます。
それぞれのファイルは配列形式で受け取ることができます。
input.addEventListener('change', (e) => {
const files = e.target.files; //配列形式で複数ファイルを取得
files.forEach((file) => {
//それぞれのファイルに対する処理
})
})
まとめ
それでは、まとめです。
- ファイルアップロードはinput要素にtype=”file”を指定する
- ファイルアップロードの検知はinput要素のchangeイベントを使用する
- ファイルの種類はMIMEタイプで識別できる
- ファイルの内容を解析するにはFileReaderを用いる
ファイル操作をマスターできると、リッチなWebアプリケーションの開発に必要なスキルの1つを習得できたことになります。
本記事を参考に、ぜひ何度も実践してみてください！
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
