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分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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週間限定）
