質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bottle

Bottleは、PythonのWebサーバです。1つのPythonファイルで構成されており、非常に軽量。Web APIの作成や導入が簡単で、DjangoやFlaskに比べ使いやすくシンプルなことが特徴です。

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

7053閲覧

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

KeiL

総合スコア13

Bottle

Bottleは、PythonのWebサーバです。1つのPythonファイルで構成されており、非常に軽量。Web APIの作成や導入が簡単で、DjangoやFlaskに比べ使いやすくシンプルなことが特徴です。

CSV

CSV(Comma-Separated Values)はコンマで区切られた明白なテキスト値のリストです。もしくは、そのフォーマットでひとつ以上のリストを含むファイルを指します。

HttpWebRequest

HttpWebRequestとは.NETにおけるクラスであり、WebRequestクラスをHTTPに導入するものです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/01/20 14:31

編集2019/01/22 15:22

前提・実現したいこと

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/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ん〜、この「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の処理自体は全て一瞬で終わらせて、ブラウザ内部のイベントループ機能で「達成したイベントないかな?」と探し、達成済みのイベントがあれば1つずつ関数を取り出して動かすという風に解決していきます。

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

JavaScript

1// 1000ミリ秒=1秒なので、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

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

KeiL

2019/01/21 00:47 編集

エラーじゃなくて警告でした。 警告についての詳しい説明ありがとうございます。 FetchとPromiseについて調べてみます。 今はローカル環境で動作させています。 あと、発生している問題の部分に不備があったので一部修正しました。
KeiL

2019/01/22 15:20

教えていただいたfetch APIを調べて使ってみたところ、警告も出ず上手く動きました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問