JavaScriptでcsvファイルを読み込んでブラウザに出力したいのですが、文字化けしてしまいます。

JavaScriptでcsvファイルを読み込んでブラウザに出力したいのですが、文字化けしてしまいます。
csvはutf-8で保存しています。サーバーは、Xサーバーです。
文字化けせずにcsvファイルから読み取り、出力するにはどうすれば良いでしょうか？

test.csv
20170404,イチロー,いちご

JavaScript
1function getCSV(){
2    var req = new XMLHttpRequest();
3    req.open("get", "test.csv", true);
4    req.send(null);
5		
6    req.onload = function(){
7	convertCSVtoArray(req.responseText);
8    }
9}
10
11function convertCSVtoArray(str){
12    var tmp = str.split(",");
13    alert("データ1："+tmp[0]+"データ2："+tmp[1]+"データ3："+tmp[2]);
14}
15getCSV();

07JP27

2017/04/04 23:12

表示するHTMLのheadに<meta charset="UTF-8" />は書かれていますか？

chibi

2017/04/05 12:26 編集

回答していただき、ありがとうございます！<meta charset="UTF-8" />は書いています。

Lhankor_Mhy

2017/04/08 06:07

文字化けした出力結果を見せていただくことは可能ですか？

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

回答1件

次のようなスクリプトで実験してみました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta http-equiv="Content-Type" content="text/Shift-JIS; charset=utf-8" />
5 <title>csv test</title>
6 <script type="text/javascript">
7//---------- from ----------
8function getCSV(){
9  var req = new XMLHttpRequest();
10  req.open("get", "test.csv", true);
11  req.send(null);
12
13  req.onload = function(){
14    var reshdr = req.getResponseHeader("content-type") //for debug
15    console.log(reshdr)                                //for debug
16    convertCSVtoArray(req.responseText);
17  }
18}
19
20function convertCSVtoArray(str){
21    var tmp = str.split(",");
22    alert("データ1："+tmp[0]+"データ2："+tmp[1]+"データ3："+tmp[2]);
23}
24//---------- to ----------
25 </script>
26</head>
27<body>
28 この行はShift-JISでエンコードしてあります。
29 <form>
30  <input type="button" value="show csv" onClick="getCSV()">
31 </form>
32</body>
33</html>

HTML自体はShift-JISでエンコード
ブラウザー(firefox: テキストエンコーディングを「日本語(Shift-JIS)」「自動判別：解除」)

上記ページのボタンをクリックするとalertの内容は文字化けしていませんでした。
なお、上記javascriptでcsvファイルを受け取ったときのレスポンスヘッダーの"content-type"をコンソールに出していますが"text/csv; charset=UTF-8"となっていました。

また、サーバーはちょっといい加減なものを使っており応答の際にcharsetを無条件にutf-8にしているのですが、firefoxのテキストエンコーディングを「unicode」「自動判別：解除」にするとHTMLドキュメント上の文字列やalertの「データ1」などは文字化けしますが、受信したcsvデータ自体は文字化けしません。

つまり「サーバーから応答されたtest.csvのレスポンスがcharset=utf-8になっていないかまたはサーバー上にあるtest.csv自体がutf-8でないかのいずれかではないかと思いました。

追記：まず事実を確認してみるとよいと思います。

server上のtest.csvはutf-8になっているか

小さなテストデータなので確認は容易だと思います。例えばlinux/unix上であれば下記と同じ結果になればutf-8であることは確実です。(通常はLANG=ja_JP.UTF-8となっている端末上でcat test.csvとして文字化けしてなければutf-8であるといった確認をするでしょうけども)

$ od -c test.csv
0000000   2   0   1   7   0   4   0   4   , 343 202 244 343 203 201 343
0000020 203 255 343 203 274   , 343 201 204 343 201 241 343 201 224  \n
0000040

serverからtest.csvを受信した際のcharset

上述の実験コードのようにリクエストオブジェクトに対してgetResponseHeader("content-type")メソッドの呼び出しで文字セットが確認できます。

補足しますと、自分はwebアプリケーションの知識に乏しいため、「どういう確認ができるか」を考え上記のような実験をしてみた次第です。まず上記を確認して「推測した通りの不整合がみつかったなら」その先を調査するようにしたほうがよいでしょう。サーバーからの応答のcharsetがutf-8になっていないかも知れないという推測のままで前へ進むのは時間を無駄にする可能性があると思います。

投稿2017/04/05 01:16

編集2017/04/05 20:35

KSwordOfHaste

総合スコア18394

chibi

2017/04/05 13:59 編集

回答をいただき、また実験までしていただき、ありがとうございます。 >つまり「サーバーから応答されたtest.csvのレスポンスがcharset=utf-8になっていないかまたはサーバー上にあるtest.csv自体がutf-8でないかのいずれかではないかと思いました。 test.csvはutf-8になっているので、「サーバーから応答されたtest.csvのレスポンスがcharset=utf-8になっていない」のかもしれません。その場合はどうすれば良いのでしょうか？

KSwordOfHaste

2017/04/05 20:12

> 「サーバーから応答されたtest.csvのレスポンスがcharset=utf-8になっていない」のかもしれません。こうした場合、まず事実を確認するのがよいと思います。

chibi

2017/04/06 00:30

macなのですが、test.csvのレスポンスを確認するにはどうしたら良いのですか？

KSwordOfHaste

2017/04/06 01:06

回答の追記部分をごらんいただければと思います。

chibi

2017/04/06 02:42

コンソールに、下記のように出ます…。 Uncaught ReferenceError: getCSV is not defined at HTMLInputElement.onclick

KSwordOfHaste

2017/04/06 03:28

javascriptの関数getCSVを私のサンプルコードのよう書いて、そのHTML内で使えるように定義してください。 scriptタグの書き方について少々知識不足の点がありそうですね。そこをまずは学んでおいてください。そこが曖昧だとHTMLを書くのが厳しいと思います。

chibi

2017/04/06 18:57

エラーは出なくなりましたが、コンソールに何も表示されません。

KSwordOfHaste

2017/04/06 20:10 編集

当方にはchibiさんがどのようなスクリプトを書いていてどのようなテストをされているかはわかりません。意図通りに動かなかった場合、なんらかの手がかりをつかむことが肝心と思います。コンソールに何も表示されなかったのなら、console.logが実行されなかったか、実行されたがブラウザーの設定かなにかでログが残らないケースがあるのか(そういうことがあるかどうか自分にもわかりません)またはconsole.logが出たかどうかの確認の仕方をchibiさんが間違っておられるのか…どういう可能性があるか自分にははっきりわかりません。ためしにgetCSVの先頭でconsole.log('abc')とやってそれがブラウザーのデバッグコンソールに出るかどうか試してみてはいかがでしょう？

chibi

2017/04/06 23:11 編集

;をつけるのを忘れてたのですが、;をつけたら、コンソールに「text/csv」と出ました。これはutf-8じゃないってことなんでしょうか？

KSwordOfHaste

2017/04/07 01:11 編集

自分も追加で実験しました。サーバーの動作を変更しレスポンスのContent-Typeを"text/csv"のみにしましたが文字化けは起きません。(念のためcsv受信時のレスポンスをブラウザーのplug-in(HttpFox)と、上記回答に示したJavascriptからのconsole.log出力の両方確認しましたが、charsetは確かに無指定になっています。)この辺りになると自分の知識範囲ではあやふやな推測しかできません。XMLHttpRequestオブジェクトはAjaxに使われる組み込みモジュールということらしいので、動作はブラウザーに依存すると推測します。自分のテスト環境はWindows10(64bit)、Firefox 52.0.2(32bit)「エンコーディングはunicode、自動判別解除」の状態です。chibiさんの環境をできるだけ詳しく書くと詳しい方がコメントくださるかも知れません。質問を編集して情報を追記してみてはどうでしょう？ --- ちなみに自分の環境でもサーバー設定を変更し、わざとうそのcharset(Shift_JIS)を送信するとちゃんと(w;)文字化けしました。

KSwordOfHaste

2017/04/07 01:17

ところで、原因究明とは別に解決方法なら自分にもいくつか思いつきます。どうすべきか判断に自身がないですが・・・ (1) サーバーから、レスポンスヘッダーにtext/csv; charset=UTF-8を応答するようにする。 =>chibiさんがサーバーサイドの開発責任をもっているか設定に文句を言える立場ならこれがよいのではないでしょうか。 (2) サーバーの設定を変更できない事情があるとき、ブラウザ側で無理やりContent-Typeを上書きしてしまう。（よくわからないですが、これは乱暴な方法に思えます。）XMLHttpResponseにoverrideMimeTypeという関数がありそれで上書きできます。具体的には`req.send(null);`の直前に `req.overrideMimeType('text/csv; charset=UTF-8');`の行を挿入するとできます。

chibi

2017/04/07 03:04 編集

`req.send(null);`の直前に`req.overrideMimeType('text/csv; charset=UTF-8');`を挿入してみたのですが、文字化けが解消されないです…。

KSwordOfHaste

2017/04/07 03:30

ということは自分の環境(Win10, Firefox)とは明らかに動作が異なりますね。自分の環境ではそこに text/csv; charset=Shift_JIS を上書きしてやるとちゃんと(w;)文字化けしますよ。つまりoverrideMimeTypeの指定に従ってレスポンスの文字列がデコードされる動きになっています。やはりchibiさんの環境を詳しく書かれた方がよいと思います。またサーバーの設定変更ができる立場にあるかどうかも書かれた方がよいと思います。

chibi

2017/04/07 03:42 編集

サーバーの設定変更する権限はありますが、どうやるか分からないです。

KSwordOfHaste

2017/04/07 03:42

ところで、回答の「追記」に書きましたが、サーバー上にあるtest.csvをodコマンドなどでダンプした結果は自分の回答と同じデータになったでしょうか？またwebサーバーの種類や設定を質問文に追記することをお勧めします。閲覧者のみなさんがあなたの環境を知れば知るほど解決は早くなると思います。

KSwordOfHaste

2017/04/07 03:44

> サーバーの設定変更する権限はありますが、どうやるか分からないです。それは自分にはどうにもできないです。自分は自宅のWin10上にnodejsで適当に書いたserverを動かしているにすぎずまともなwebサーバー(アパッチとか?)は一度も触ったことがないのです...

chibi

2017/04/07 12:55

odコマンドでダンプするのは、htmlの中に書けば良いのですか？