JavaScriptでアクセス時にサーバーからcsvファイルを取得し処理を行いたい

前提・実現したいこと

RaspberryPi上ののbottleサーバーを使用し、そこにアクセスしたときにJavaScriptでcsvファイルをサーバーから取得し、そのファイル情報を基に処理を行いたい。

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

csvファイルの取得を行ってみたが、XMLHttpRequestが同期読み込みは推奨されていないらしく~~エラー~~警告が出てしまい、代替方法が分からず困っています。
追記：上手く動作しないときがあります。

(index):23 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3 
4<head>
5    <meta charset="UTF-8">
6    <title>CSV読み込みサンプルページ</title>
7</head>
8 
9<body>
10    <h1>CSV読み込みサンプル</h1>
11    <p>読み込んだCSVが開発コンソールに表示されます。</p>
12</body>
13 
14<script>
15function loadCSV(targetFile) {
16 
17    // 読み込んだデータを1行ずつ格納する配列
18    var allData = [];
19 
20    // XMLHttpRequestの用意
21    var request = new XMLHttpRequest();
22    request.open("get", targetFile, false);
23    request.send(null);
24 
25    // 読み込んだCSVデータ
26    var csvData = request.responseText;
27 
28    // CSVの全行を取得
29    var lines = csvData.split("\n");
30 
31    for (var i = 0; i < lines.length; i++) {
32        // 1行ごとの処理
33 
34        var wordSet = lines[i].split(",");
35 
36        var wordData = {
37            name: wordSet[0],
38            age: wordSet[1],
39        };
40 
41        allData.push(wordData);
42    }
43 
44    console.log(allData);
45}
46 
47loadCSV("/static/sample.csv");
48 
49</script>
50</html>

csv
1太郎,21
2二郎,18
3三郎,15

python
1#!/usr/bin/env python
2from bottle import run, route, template, request, static_file
3
4@route("/")
5def test():
6  return template("sample.html")
7
8@route('/static/<file_path:path>')
9def static(file_path):
10    return static_file(file_path, root='.')
11
12run(host="0.0.0.0", port=8080)

試したこと

ソースコードは以下のサイトを参考にしました。
https://joyplot.com/documents/2017/03/01/xmlhttprequest-javascript-csv/

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

回答1件

ベストアンサー

ん〜、この「RaspberryPi上ののbottleサーバ」はインターネット上に広く公開するんですか？
ローカルのLAN内で完結してるなら別にそれで良いんじゃね？と思いますがいかがでしょう。

推奨されていないらしくエラーが出てしまい、代替方法が分からず困っています。

エラーじゃなくて警告じゃないんですか？
では何故警告が出るか解説していきます。

JavaScriptはシングルスレッドです。
そして(非推奨ですが)document.writeでHTML文字列を無理やり記述してパーサーに解析させる機能が備わっている以上、ブラウザの全ての動作が停止します。

つまり、JavaScriptの実行が終了しなければブラウザがフリーズします。
もし試すなら、下記のJavaScriptを実行してみてください。
見事にブラウザのタブが応答しなくなるはずです。

JavaScript
1var i = 0;
2while (true) {
3  i++;
4}

まぁ、XMLHttpRequestはAjaxと呼ばれる技術であり、
その実態は裏側でHTTPリクエストをWebサーバに飛ばしてレスポンスを受け取るという一連の流れです。

ローカルのLAN内同士の通信ならともかく、南米にあるようなサーバだと軽く1秒掛かったりします。
日本のサーバでも負荷がかかって応答に時間が掛かってるような状態だと普通に2〜3秒待たされることもあります。
この2〜3秒が致命的なんですね。
ボタンクリックやリンクのクリックなど、全ての動作がキャンセルされてまるでフリーズしたかのような挙動になります。

なのでファイルアクセスやネットワークアクセスのような遅くなりがちな処理は、
JavaScriptの管轄内ではやらないよ！イベントループという概念で処理していくよ！
…という思想でやっています。

イベントループの詳細はぐぐっていただくとして、
大雑把に言えばイベント置き場に「イベント達成条件、発火する関数」をセットで登録しておきます。
JavaScriptの処理自体は全て一瞬で終わらせて、ブラウザ内部のイベントループ機能で「達成したイベントないかな？」と探し、達成済みのイベントがあれば１つずつ関数を取り出して動かすという風に解決していきます。

「イベントの達成条件」というのはaddEventListenerで指定出来る他にも山のように存在し、
例えばnミリ秒待ってから実行するようなものも存在します。

JavaScript
1// 1000ミリ秒＝1秒なので、１秒後にコンソールに表示される
2setTimeout(function () {
3  console.log('hello world');
4}, 1000);

代替方法が分からず困っています。

もしJavaScript流儀に従うのであれば非同期でやりましょう。
XMLHttpRequestは大昔のIEがなんかよくわからんけど便利かもしれないから入れておこうと実装した機能です。

2002年にGoogleMapというWebアプリがヒットしてAjaxとして爆発的に普及しましたが、
このXMLHttpRequestが非常にクソな実装であり難解、多くのエンジニアを地獄に叩き落としてきました。
2006年にサードパーティのjQueryライブラリが普及し、エンジニアはAjaxを簡単に実装できるようになりました。

また、2013年頃にはHTML5という仕様でFetch APIが定義され、
IE以外の現行のブラウザの多くはFetch APIをサポートしています。
ローカルで使う予定ならChrome等を使うことになると思うのでFetch APIで実装してみると良いでしょう。
Fetch API - MDN

Fetch APIの関数を発火すると、戻り値がPromiseのインスタンスで帰ってきます。
Promise

Promiseは次世代の非同期処理の表現手法なので勉強してみてください。

投稿2019/01/20 16:06