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

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

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

 

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

 

 

CSVファイルとは

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

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

山田,鈴木,佐藤,田中

 

ローカルのCSVを読み込む

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

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

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

<input type="file">

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

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

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

[PR] フロントエンドで挫折しない学習方法を動画で公開中

実際に書いてみよう

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では、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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