実現したいこと

ここに実現したいことを箇条書きで書いてください。

指定のフォルダにあるCSVファイルをjavascriptを使って読み込む。
読み込んだものを配列に格納する。
格納した値をwebブラウザにHTML,CSSを用いて表示する。

前提

現在、javascript,HTML,CSSを用いてプログラムを作成しているのですが、ファイル読み込みでnode.jsを使用し、読み込んだ値をwebブラウザに反映させれるか試そうとしたら、node.jsを使っていたら無理だと判明したので今回質問させて貰いました。

発生している問題・エラーメッセージ

document.write(set_count);
^

ReferenceError: document is not defined

該当のソースコード

set.js
1let fainal_time = 0; //計算後の待ち時間
2let set_count = 0; //定食の注文数
3var csvArray= []; // データを入れるための配列
4
5function getCSV(){
6	const fs = require('fs');
7  let text = fs.readFileSync("C:\\Users\\ユーザ名\\Desktop\\卒業研究\\プログラム\\dummy_data.csv", 'utf-8');
8  //console.log(text);
9  convertCSV(text);
10}
11
12function convertCSV(csvfail){
13  console.log(csvfail);
14    var tmp = csvfail.split("\n"); // 改行を基準にデータを行ごとで配列化
15    // 各行ごとにカンマで区切った文字列の配列データを生成
16    for(var i = 0; i < tmp.length; i++){
17        var tmpROW = tmp[i].split(',');
18        if( tmpROW !== '' ){
19          csvArray[i] = tmp[i].split(',');
20        }
21    }
22    console.log(csvArray[0]);
23}
24
25// csvファイルの読み込みを実行
26getCSV();
27console.log(csvArray[0]);
28for(var i = 0; i<csvArray.length; i++){
29    if(csvArray == "定食"){
30      set_count++;
31    }
32}
33
34
35document.write(set_count);

main.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>食堂の混雑状況</title>
6    <link rel="stylesheet" href="main.css">
7  </head>
8
9  <body>
10    <div class="header">各メニューの待ち時間</div>
11
12    <div class="main">
13     <div class="main-item">
14      <tr>
15        <td>定食</td>
16     <span> <script src="set.js"></script></span>
17      </tr>
18     </div>
19     <div class="main-item">
20
21

試したこと

new XMLHttpRequest()でXMLHttpRequestオブジェクトを生成し読み込む方法を試したのですが、エラーが出てしまった。

調査したこと

https://kasumiblog.org/javascript-csv-array/

int32_t

2023/09/21 07:17

CSVが置いてあるマシンとブラウザを動かすマシンは同一のものですか? その場合、ウェブサーバを動かして解決したいですか、動かさないで解決したいですか?

inori333

2023/09/21 08:49

コメントありがとうございます。同一のマシンです。今回は自分のフォルダ内にあるcsvファイルをjavascriptのプログラム内で使えるようにしたいのですが、その場合はどちらが都合が良いでしょうか？あまり知識が無くて申し訳ないです。

行動規範の内容に同意します

回答3件

そのマシンでウェブサーバを立ち上げて、main.html と dummy_data.csv をそのサーバから提供し、main.html 内の JavaScript コードから XMLHttpRequest や fetch() で dummy_data.csv を読み込む

または、

ウェブサーバを使わないで、dummy_data.csv をローカルファイルとしてブラウザに読み込ませる
- <input type=file> と FileReader で実装する、または
- showOpenFilePicker() と FileSystemFileHandle で実装する (現在はChromium系限定)

ウェブサーバを使わない方が、ファイルを指定する手間はありますが簡単だと思います。

node.js のコードはウェブサーバで動くものですが、サーバで CSV をパーズしても結果をそのままブラウザに渡すことはできないのでほとんど意味がないと思います。

投稿2023/09/21 21:55

編集2023/09/21 21:57

int32_t

総合スコア21929

今回は自分のフォルダ内にあるcsvファイルをjavascriptのプログラム内で使えるようにしたい

ということであれば、もしnode.jsを使うのであれば自分のPCをWebサーバー化するか、electronのような形でアプリケーションとして動作させるといった方法が考えられます。node.jsにこだわらないのであれば、--allow-file-access-from-filesという起動オプションをつけて起動したchromeでXHRやfetchを利用することが考えられます。この起動オプションにより、file:///～のファイルをXHRやfetchで読み込めるようになります。

XHRを使う場合↓

js
1const xhr = new XMLHttpRequest();
2xhr.open("GET", "C:/Users/ユーザ名/Desktop/卒業研究/プログラム/dummy_data.csv");
3xhr.onreadystatechange = function() {
4    if (xhr.readyState == 4 && xhr.status == 200) {
5        const csv = xhr.responseText;
6        // ↑変数csvにdummy_data.csvのテキストが代入される
7    }
8};
9xhr.send();

fetchを使う場合↓

js
1(async function(){
2    const response = await fetch("C:/Users/ユーザ名/Desktop/卒業研究/プログラム/dummy_data.csv");
3    const csv = await response.text();
4    // ↑変数csvにdummy_data.csvのテキストが代入される
5})();