見出し画像

文字化けが起こり、動作確認できない【エンコード】

メールの文字化けやHPを開いたら文字化けが起こっていることがたまにありますよね。軽く恐怖を覚えますが時間がたてば勝手に直りますよね。(たまに直らないものもありますが)

プログラミングをしていても文字化けをすることがあるかと思います。

しかし、この文字化けは自分で直さないといけないものです。

文字化けの実例

Visual Studioの開発者コマンドプロンプトで動作確認していた時、以下のような状況になりました。

画像1

この最下行で漢字の羅列があると思います。

もちろん、自分で打ち込んだわけではなく、日本語を入出力した際に起こりました。

この文字の羅列に意味があるのかと思い調べてみると

全て文字化けしているHPでした。htmlで文字コード指定してないとかそういった理由でしょうか。(更新が古いのでいろんな要因がありそうですが浅学のため原因はわかりません)


一応確認のためにhtmlで文字化けを起こすコードを書いて実行してみました。以下のような感じです。

画像2

上図の左側のように文字化けが起こりました。(起こしました)


そのほかにもPCからRaspberryPiにコードをコピペした際にも起こりました。(そのときはVNSでファイル転送できることを知らずに頑張っていました。)

文字化けしたコード

C++は入出力に日本語や全角の文字が入っていれば起こると思います。

C++のコード

#include <iostream>
#include <string>

using namespace std;
int main() {
 string s,t;
 s="佐藤";
 t="加藤";
 std::cout << "おはよう、朝だよ" << endl;
 std::cout << "名前は「"  << t << s <<"」です。"<< endl;
 return 0;
}

(このコードを実行した際、文字化け以前に全角スペースを入れてしまったため、動かなかったです。全角怖いですよね。)

文字化けしたHTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
   <meta charset="EUC-JP">
   <title>文字化け</title>
 </head>
 <body>
   <h1>文字化け</h1>
   <h3>確認</h3>
   <strong>文字化け</strong>
   <li>確認</li>
 </body>
</html>

文字化けしなかったコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
   <meta charset="utf-8">
   <title>文字化け</title>
 </head>
 <body>
   <h1>文字化け</h1>
   <h3>確認</h3>
   <strong>文字化け</strong>
   <li>確認</li>
 </body>
</html>

pythonのコードは全角等関係なくコピペしたことで文字化けしました。

文字化けの解決策

題名にもしましたがエンコードがキーワードです。

エンコードとは符号化という意味で文字をコンピュータが理解しやすいものに変換するということです。

機械が文字を変換するさいに文字コードを使います。この文字はこの文字に対応しているという表のようなものです。

このHPで "あ  →  \u3042"というように変換されています。つまり機械はこのようにして文字を理解しています。

しかし、この変換は文字コードによって異なります。

私が書いた"utf-8"で変換した文字を機械が"unicode"で変換して元の文字に直しているため全然違う文字が出てきているのです。

よって変換している文字コードを指定してあげれば解決します。

開発者コマンドプロンプトの場合(C++)

cl /source-charset:utf-8  /EHsc a.cpp

ファイルを実行する際に、単に"cl"ではなく上記の様に実行すればutf-8で実行できると思います。

画像3

一応実行できました。今では、いろんな意味わからないバグが多発するためなんとも思いませんが慣れない頃はこれを見た瞬間に諦めていました。

全角には気を付けましょう(自分へのメッセージ)

コメントアウトなどもできるだけ全角は使わないようにした方が良いですが英語に慣れてないと苦しみますよね。


htmlの場合

<meta charset="utf-8">

<head></head>の間に文字コードの指定を入れてあげれば文字化けしないと思います。

わざと文字化けさせた方は全然知らない文字コードを入れてありますので変換できなかったというわけです。

pythonの場合

シバンと呼ばれるものでこれをファイルの先頭に入れることで文字化けしなくなると思います。

#!/usr/bin/env python
# -*- coding: utf-8 -*-

こんなやつです。

こいつを付けた瞬間から動作確認ができるようになったため、ぜひつけるようにしてください。(そのときは早く動作確認したかったためシバンを入れ忘れていました。結構忘れること多いので気を付けたいですね。)

最後に

このような文字化けなどよくわからない場合は、

IDE(Integrated Development Environment)と呼ばれるエディタやコンパイラ、デバッガが全てまとまっているものを使うとよいと思います。

私はコマンドで行っているのはよりいろんなことを理解したいため挑戦していたらそっちの方が実行が楽だと思うようになったためです。

大学の講義でもIDEを使っていたため(使い方は言われたとおりにやったため困ることはなかったですがそれ以外のことはよくわかっていない)使ったことはありますがどこがバグっているのかわかりやすくて使いやすかったです。

読んでいただきありがとうございます。

お互い勉強頑張っていきましょう。

おまけ

文字化けしたHTMLがありましたよね。

google先生は日本語に変換できるためやってみました。

画像4

結果は如何に?

画像5

わくわくしてきましたね。お疲れさまでした。

この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?