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

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

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

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

Q&A

3回答

2280閲覧

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

Maruco2321

総合スコア118

JavaScript

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

0グッド

2クリップ

投稿2021/12/30 01:42

編集2022/01/12 10:55

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

追記2
イメージ説明

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

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

コード 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 } }

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

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

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

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

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

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

m.ts10806

2021/12/30 10:11

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

2021/12/30 17:41 編集

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

回答3

0

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

�PNG
^

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

投稿2022/01/02 00:07

ikadzuchi

総合スコア3047

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

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

Maruco2321

2022/01/03 03:01 編集

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

2022/01/05 14:46

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

2022/01/06 05:17

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

0

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

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

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

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

投稿2021/12/30 02:54

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

Maruco2321

2021/12/30 05:29 編集

>デコードできないということかもしれません。 そうかもしれません。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/
Maruco2321

2021/12/30 19:46

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

0

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

——————-

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

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

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

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

投稿2021/12/30 06:26

BeatStar

総合スコア4958

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

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

Maruco2321

2021/12/30 20:08 編集

''' 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−8みたいになればおそらく解決しそうですが charset=binary から、charset=UTF−8になりませんね。何故か考えていきたいと思います。このアプリはじゃんけんアプリで画面上に画像でグー、チョキ、パーを表示してそのデータがこの assets/janken/gu.png:1 assets/janken/cyoki.png:1 assets/janken/pa-.png:1 という写真データとなっています。写真のデータがもともとバイナリーデータなのはまあわかるのですが、今回のターミナルのコマンドではなぜcharset=UTF−8できなかったんですかね?ここさえうまくいけばいけそうなんですが...自分の方でも調べていきたいと思います 追記2の方で今回の関係しそうな画像を載せておきたいと思います????‍♂️
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問