回答編集履歴
2
冒頭の挨拶をコメントへ退避、その他若干の修正
test
CHANGED
|
@@ -1,21 +1,3 @@
|
|
|
1
|
-
お疲れ様、これ別の側面から原因をある程度知っていないと
|
|
2
|
-
正解にたどり着くのがかなり難しい部類の問題です。
|
|
3
|
-
|
|
4
|
-
この時点で質問に来るのは良いタイミングであり、
|
|
5
|
-
回答者の私に通じるような質問文も書けてるし、非常に良い質問だと思います。
|
|
6
|
-
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
まず、世の中の文字コードはすでにUTF-8を中心に回っています。
|
|
10
|
-
今どきShift-JISを使っているのはWindowsくらいのものです。
|
|
11
|
-
|
|
12
|
-
ブラウザやJavaScriptファイル等が動いている環境、とりまく環境も全てUTF-8です。
|
|
13
|
-
一応大昔の日本語サイトにはShift-JISで書かれているものもあり
|
|
14
|
-
ギリギリ文字化けせずに表示してくれますが、
|
|
15
|
-
内部のJavaScript変数世界はUTF-8環境で動いていたりします。
|
|
16
|
-
|
|
17
|
-
---
|
|
18
|
-
|
|
19
1
|
ReactはいわゆるJSフレームワークと呼ばれるものです。
|
|
20
2
|
HTMLテンプレートっぽいものを読み込ませてDOMツリーを作っている状態で
|
|
21
3
|
React世界の変数の値を更新すると最新のDOMツリーに勝手に書き換わってくれる事が特徴です。
|
|
@@ -24,18 +6,28 @@
|
|
|
24
6
|
色んなライブラリを肉付けしてくれる人は居ますが、
|
|
25
7
|
Reactの仕事と文字コードの変換はかけ離れているのでそんなライブラリ作っている人も皆無でしょう。
|
|
26
8
|
|
|
27
|
-
この辺の事情から「react upload 文字化け」「react csv 読み込み」等のワードで検索するのは無駄です。
|
|
28
|
-
|
|
9
|
+
---
|
|
29
|
-
DataTransfer.filesは何者やねんの切り口から追っていく事になるでしょう。
|
|
30
10
|
|
|
31
|
-
|
|
11
|
+
次に基本的な文字コードの説明をします。
|
|
12
|
+
世の中の文字コードはすでにUTF-8を中心に回っています。
|
|
13
|
+
今どきShift-JISを使っているのはWindowsくらいのものです。
|
|
14
|
+
|
|
15
|
+
ブラウザやJavaScriptファイル等が動いている環境、とりまく環境も全てUTF-8です。
|
|
16
|
+
一応大昔の日本語サイトにはShift-JISで書かれているものもありギリギリ文字化けせずに表示してくれますが、
|
|
17
|
+
一応Webブラウザが対応しているというだけの話です。
|
|
18
|
+
|
|
19
|
+
内部のJavaScript変数世界はUTF-8環境であり、Shift-JISを扱えて当然というわけではありません。
|
|
20
|
+
|
|
21
|
+
そういう事情があるので「react upload 文字化け」「react csv 読み込み」等のワードで検索するのは無駄です。
|
|
22
|
+
今回のケースでは、JavaScript＋文字コードの問題でしかないので
|
|
23
|
+
DataTransfer.filesは何者やねんの切り口から追っていく必要があります。
|
|
32
24
|
|
|
33
25
|
`Array.from()`は配列っぽいけど配列ではないものに対して
|
|
34
26
|
配列として動くよう強要する命令です。
|
|
35
27
|
つまり`event.dataTransfer.files`は配列ではない？
|
|
36
28
|
|
|
37
29
|
では何者なのか？
|
|
38
|
-
MDNが結構詳しくて正確なので
|
|
30
|
+
MDNが結構詳しくて正確なので探してみましょう。
|
|
39
31
|
|
|
40
32
|
- [DataTransfer.files](https://developer.mozilla.org/ja/docs/Web/API/DataTransfer/files)
|
|
41
33
|
- [FileList](https://developer.mozilla.org/ja/docs/Web/API/FileList)
|
1
ちょっと言い回しを変更
test
CHANGED
|
@@ -1,23 +1,32 @@
|
|
|
1
|
+
お疲れ様、これ別の側面から原因をある程度知っていないと
|
|
1
|
-
|
|
2
|
+
正解にたどり着くのがかなり難しい部類の問題です。
|
|
2
|
-
今どきShift-JISを使っているのはWindowsくらいのものです。
|
|
3
3
|
|
|
4
|
-
ブラウザやJavaScriptファイル等が動いている環境も全てUTF-8です。
|
|
5
|
-
一応大昔の日本語サイトのHTMLはShift-JIS等で書かれているものもあり、
|
|
6
|
-
|
|
4
|
+
この時点で質問に来るのは良いタイミングであり、
|
|
7
|
-
|
|
5
|
+
回答者の私に通じるような質問文も書けてるし、非常に良い質問だと思います。
|
|
8
6
|
|
|
9
7
|
---
|
|
10
8
|
|
|
9
|
+
まず、世の中の文字コードはすでにUTF-8を中心に回っています。
|
|
10
|
+
今どきShift-JISを使っているのはWindowsくらいのものです。
|
|
11
|
+
|
|
12
|
+
ブラウザやJavaScriptファイル等が動いている環境、とりまく環境も全てUTF-8です。
|
|
13
|
+
一応大昔の日本語サイトにはShift-JISで書かれているものもあり
|
|
14
|
+
ギリギリ文字化けせずに表示してくれますが、
|
|
15
|
+
内部のJavaScript変数世界はUTF-8環境で動いていたりします。
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
11
|
-
|
|
19
|
+
ReactはいわゆるJSフレームワークと呼ばれるものです。
|
|
12
20
|
HTMLテンプレートっぽいものを読み込ませてDOMツリーを作っている状態で
|
|
13
21
|
React世界の変数の値を更新すると最新のDOMツリーに勝手に書き換わってくれる事が特徴です。
|
|
14
22
|
|
|
15
23
|
基本的にこれ以外の仕事はしません
|
|
16
24
|
色んなライブラリを肉付けしてくれる人は居ますが、
|
|
17
|
-
と
|
|
25
|
+
Reactの仕事と文字コードの変換はかけ離れているのでそんなライブラリ作っている人も皆無でしょう。
|
|
18
26
|
|
|
19
|
-
この辺の事情から「react upload 文字化け」「react csv 読み込み」等のワードで検索するのは
|
|
27
|
+
この辺の事情から「react upload 文字化け」「react csv 読み込み」等のワードで検索するのは無駄です。
|
|
28
|
+
今回のケースですと、JavaScriptの問題として扱い
|
|
20
|
-
|
|
29
|
+
DataTransfer.filesは何者やねんの切り口から追っていく事になるでしょう。
|
|
21
30
|
|
|
22
31
|
---
|
|
23
32
|
|
|
@@ -33,7 +42,7 @@
|
|
|
33
42
|
- [File](https://developer.mozilla.org/ja/docs/Web/API/File)
|
|
34
43
|
|
|
35
44
|
なるほど、Fileの集まりなわけですね。
|
|
36
|
-
そしてこれらのメソッドが
|
|
45
|
+
そしてFileにはこれらのメソッドが生えているようです。
|
|
37
46
|
|
|
38
47
|
- text()→Promise<String>で取り出す
|
|
39
48
|
- arrayBuffer()→Promise<ArrayBuffer>で取り出す
|
|
@@ -65,7 +74,7 @@
|
|
|
65
74
|
|
|
66
75
|
JavaScriptやNode.jsではUTF-8以外扱えないから、
|
|
67
76
|
配列に数値突っ込んでいる擬似的なShift-JISになりますよって言ってるわけです。
|
|
68
|
-
(まぁ、この辺はJavaScriptがUTF-8でしか動かないと知らなければわからないと思います)
|
|
77
|
+
(まぁ、この辺の事情はJavaScriptがUTF-8でしか動かないと知らなければわからないと思います)
|
|
69
78
|
|
|
70
79
|
バイナリデータというのは00-FFの羅列
|
|
71
80
|
これを16進数に変換すると0-255の数字の配列と読み替える事が可能です。
|