エラーで'�'が出たときの対処法

Question

macのVScodeでvueを使った簡単なじゃんけんゲームを作ろうとしています。ファイルはvueのcliで作成しました。開発の途中見慣れないエラーで詰まってしまいましたので質問させていただきます。

コード
masa@MasaakinoMacBook-Air janken3 % npm run dev
npm run dev

> dev
> npm-run-all --parallel watchify serve


> watchify
> watchify -vd -p browserify-hmr -e src/main.js -o dist/build.js


> serve
> http-server -o -s -c 1 -a localhost

(node:5471) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
(Use `node --trace-deprecation ...` to show where the warning was created)

/Users/masa/Documents/AppCollection/vueApp/Rock-paper-scissors/janken3/assets/janken/cyoki.png:1

�PNG
^
ParseError: Unexpected character '�'

これを解決しようと調べようとしたところ'�'の文字が消えてしまうなど調べる際にも詰まってしまいました。
またエラー内容もパスの記述ないに'�'の文字を書いた覚えもありません。何が原因なのでしょうか？ご教授いただけると助かります。

コードと画像

コード
https://github.com/Masanarea/jankenVue.js.git

追記２

今回のターミナルのコマンドによりcharset=binary　から、charset=UTF−８しようとしたせいかこのような表示のエラーが出ました。
ファイル“cyoki.png”を開けませんでした。
ファイルが壊れているか、“プレビュー”が認識しないフォーマットを使用している可能性があります。

追記３
追記２とは関係ないのですが自分が試したことについて

コード
data () {
    return {
      resultMessage: '',
      srcList: [
        require('../../assets/janken/gu.png'),
        require('../../assets/janken/cyoki.png'),
        require('../../assets/janken/pa-.png')],
      srcNum: 0,
      timer: null
    }
  }

を

コード
data () {
    return {
      resultMessage: '',
      srcList: [
 ー　＋       '../../assets/janken/gu.png',
 ー　＋        '../../assets/janken/cyoki.png',
 ー　＋        '../../assets/janken/pa-.png',
      srcNum: 0,
      timer: null
    }
  }

のようにしましたが同じエラーでした。やはり文字コードが原因らしいです

Comments

[m.ts10806]

タグはJavaScriptだけでは足りないような。

[Maruco2321]

逆にJavaScriptの問題でもないような気がします。

Answer 1

vueについては知らないのでエラーを見ただけの判断ですが、

�PNG
^

PNGファイルをテキストファイルとして読んでいますね。
たぶんテキストファイルでなくバイナリファイルとして読む手段があるのではないでしょうか。

Comments

[Maruco2321]

もともとはテキストファイルなのでしょうか？
コンソールに打ち込んだ際に
MacBook-Air janken % file --mime cyoki.png
cyoki.png: image/png; charset=binary
となってしまっていたのでその時点でbinaryであるからエラーが出てしまっている。なので回答者さんの一人からcharset=binary　から、charset=UTF−８にすればおそらく、『文字コード』が原因となっているため解決するのではとの意見をもらって試したのですが、解決はしませんでした。
その後より考えてみたところ
masa@MasaakinoMacBook-Air janken % file --mime cyoki.png
cyoki.png: image/png; charset=binary

となっていたのを

masa@MasaakinoMacBook-Air janken % nkf -w --overwrite cyoki.png
masa@MasaakinoMacBook-Air janken % nkf -w --overwrite gu.png
masa@MasaakinoMacBook-Air janken % nkf -w --overwrite pa-.png
(それぞれバイナリからUTF -8に変更する)
masa@MasaakinoMacBook-Air janken % file --mime pa-.png
pa-.png: application/octet-stream; charset=binary（ファイル説明）
masa@MasaakinoMacBook-Air janken % file --mime gu.png
gu.png: application/octet-stream; charset=binary
masa@MasaakinoMacBook-Air janken % file --mime cyoki.png
cyoki.png: application/octet-stream; charset=binary
masa@MasaakinoMacBook-Air janken % npm run dev (サーバー起動)

> serve
> http-server -o -s -c 1 -a localhost

/Users/masa/Documents/AppCollection/vueApp/Rock-paper-scissors/janken3/assets/janken/cyoki.png:2

^
ParseError: Unexpected character ''"

のようになったのでエラーで今のところ'�'が出ること自体は無くなったのですが謎の空欄っぽいものの影響でまだWEb上でページを参照できない状態です

[ikadzuchi]

> もともとはテキストファイルなのでしょうか？
質問の意味が分かりません。pngファイルはバイナリファイルですが…。
私はvueについては知らないのでなんとなく読んだ感想ですが、pngファイルをrequireでソースコードの一部として読み込もうとしているように見えます。
あまりそのようなことをすべきとは思えません。
> ～のようになったので
バイナリファイルの文字コードを変換という行為がどのような結果をもたらすのか私には分かりませんが、少なくとも結局テキストファイルとして読んでいることに違いはないので、問題の解決にはならないと思います。

[Maruco2321]

>pngファイルはバイナリファイルですが…。
このことを理解していなかったためわかりにくい内容となっってしまいました。以後気をつけます。
>結局テキストファイルとして読んでいることに違いはない
確かにその通りです。一様'�'が消えただけにすぎないので実際解決もしてないですしその通りかもしれません

Answer 2

以下は Microsoft の .NET アプリの話なので関係ないかもしれませんが、ご参考までに・・・

自分が経験した問題の文字 "�" について調べた時の話ですが、MSDN ライブラリ「.NET で文字エンコーディング クラスを使用する方法」によると "Unicode デコーダーでは、デコードできない 2 バイトのシーケンスが REPLACEMENT_CHARACTER (U+FFFD) に置き換えられます" とのことです。

同じようにデコードできないということかもしれません。

自分のケースではブラウザ上で表示されていたので、Fiddler を使って応答をキャプチャし、文字 "�" のバイト列を調べてみたら EF BF BD となっていました。U+FFFD は UTF-8 のバイト列では EF BF BD となります。

Comments

[Maruco2321]

＞デコードできないということかもしれません。
そうかもしれません。MSDN ライブラリなど聞きなれないものも含んでいたため理解に時間がかかりましたが理解しました。文字 "�"を自分で記述した覚えはないのでデコードできないことが原因なのかなぁと感じました。ただその原因はわからないのでもう少し原因を考えていきたいと思います。上のリンク等も参考にさせていただきます。????‍♂️

↓MSDN ライブラリ等について
https://docs.microsoft.com/ja-jp/dotnet/standard/base-types/character-encoding
https://www.fenet.jp/dotnet/column/environment/3327/#MSDN%E3%81%A8%E3%81%AF%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%EF%BC%9F
http://blog.loadlimits.info/2009/09/%E5%AE%9F%E3%81%AFfiddler%E3%81%8C%E3%81%99%E3%81%94%E3%81%99%E3%81%8E%E3%81%9F%E3%81%AE%E3%81%A7%E3%80%81%E6%A9%9F%E8%83%BD%E3%81%BE%E3%81%A8%E3%82%81%E7%B4%B9%E4%BB%8B/

[退会済みユーザー]

自分が調べた時の話を参考に紹介しておきます。要するに文字化けだったのですが。

ASP.NET Core で文字化け
http://surferonwww.info/BlogEngine/post/2017/06/16/decoding-problem-caused-by-view-created-by-scaffolding-in-aspnet-core-project.aspx

[Maruco2321]

わざわざリンクを載せていただきありがとうございます！参考にさせていただきます。

Answer 3

※ すでに回答がついていますから、その方の回答の補足的なものとしてお読みください。この回答(?)をBAにするぐらいなら先の方の回答をBAにしてくださいますよう。

——————-

おそらく、『文字コード』が原因かと。
ただし、コメントにあるような、『プログラム側が判断するもの』ではなく、『ファイルの文字コード』だと思います。

Web系ではないですが、コマンドプロンプト(Windows)で、Unicodeかなんかの文字コードで指定したbatファイルを動かすと、今回のような文字化け的な『余計な文字』が含まれている系のエラーになります。

それと同じ状態なのではないかと。

ここみたいな方法で確認してみてください。多分、想定された文字コードではないのだと思います。

Comments

[Maruco2321]

'''
masa@MasaakinoMacBook-Air janken % file --mime cyoki.png
cyoki.png: image/png; charset=binary
masa@MasaakinoMacBook-Air janken % nkf -w --overwrite cyoki.png
masa@MasaakinoMacBook-Air janken % file --mime cyoki.png
cyoki.png: application/octet-stream; charset=binary
'''
のようになりました。
nkf -w --overwrite cyoki.png がうまくいってcharset=UTF−８みたいになればおそらく解決しそうですが
charset=binary　から、charset=UTF−８になりませんね。何故か考えていきたいと思います。このアプリはじゃんけんアプリで画面上に画像でグー、チョキ、パーを表示してそのデータがこの
assets/janken/gu.png:1
assets/janken/cyoki.png:1
assets/janken/pa-.png:1
という写真データとなっています。写真のデータがもともとバイナリーデータなのはまあわかるのですが、今回のターミナルのコマンドではなぜcharset=UTF−８できなかったんですかね？ここさえうまくいけばいけそうなんですが...自分の方でも調べていきたいと思います
追記２の方で今回の関係しそうな画像を載せておきたいと思います????‍♂️