JavaScriptでCSVファイルを読み込む方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでCSVファイルを読み込む方法について現役エンジニアが解説しています。CSVファイルはカンマで区切られたデータのことです。JavaScriptでCSVファイルを読み込むにはFileReaderクラスを使います。HTMLでフォームを作成して読み込んでみましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでCSVファイルを読み込む方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでCSVファイルを読み込む方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

CSVファイルとは

Comma Separated Valuesの略で、平たく言うとカンマで値が区切られたファイルのことです。エクセルという表計算のアプリで、CSVファイルのデータを扱ったことがある方も多いのではないでしょうか。

下記のように、,(カンマ)で区切られているデータファイルがcsvファイルです。

山田,鈴木,佐藤,田中

 

ローカルのCSVを読み込む

記述するのは主に下記の2つです。

1、HTMLにて読み込むファイルを指定する部品を用意する

inputタグでタイプにfileを指定するだけです。

<input type="file">

下記のようなファイルを選択する部品が表示されます。

JavaScriptのFileReaderでCSVファイルを読み込むために用意したHTMLのファイルを読み込むためのフォーム。

2、JavaScriptにて、HTML側でファイルが指定された際の読み込み処理を記述する

FileReaderオブジェクトを使うことで簡単に読み込みができます。こちらは実際のソースで具体的に紹介します。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

JavaScriptの処理を記述する前に、CSVファイルとHTMLのファイル指定部品を用意します。CSVファイルは、下記のデータを「読み込み用.csv」という名前のファイルで作成しました。

山田,鈴木,佐藤,田中

HTMLは、ファイルを指定する部品にJavaScriptからのアクセスようにidをfileという名前で設定しました。

<input type="file" id="file">

JavaScriptのソースです。

let fileInput = document.getElementById('file');
let fileReader = new FileReader();
fileInput.onchange = () => {
  let file = fileInput.files[0];
  fileReader.readAsText(file);
};

fileReader.onload = () => console.log(fileReader.result);

 

解説

ブラウザで用意した「読み込み用.csv」を選択すると、コンソールにファイルの内容(山田,鈴木,佐藤,田中)が表示されます。

document.getElementById(“file”)にて、HTMLのファイルを指定する部品を読み込んでいます。new FileReader()にて、ファイルを読み込む部品を用意しています。fileInput.onchangeにて、HTML側でファイルが指定された際の処理を記述しています。

onchangeは、HTMLで用意したinputタグにファイルを指定した際に呼ばれるchangeイベントを処理するイベントハンドラです。HTMLのファイルを指定する部品は、選択したファイルを配列で渡すのでfileInput.files[0]として1つ目のファイルを取得しています。

fileReader.readAsText(file)にて、ファイルの読み込みを開始します。fileReader.onloadは、ファイルの読み込みが終わった際に呼ばれるloadイベントを処理するイベントハンドラです。

ファイルの読み込みが完了すると、fileReaderのresultに読み込んだファイルの内容が格納されているので、fileReader.resultとしてコンソールに出力しています。

筆者プロフィール

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。