1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

日本語の文字化けをhtml上で修正する

Last updated at Posted at 2021-04-14

はじめに

自分のメモ帳みたいなものです.
WebアプリケーションであるNginxにて日本語が文字化けしてしまったのでその解決策の1つを書きます.

スクリーンショット 2021-04-14 11.14.19.png

ソースコードはこちら
なおReactを使っています

<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script type="text/jsx">
     var HelloWorld = React.createClass({
       render: function() {
         return (
           <p>Hello!World!(ハローワールド)</p>
         );
       }
     });

     var m = React.render(<HelloWorld />, document.getElementById('app'));
    </script>
  </body>
</html>

解決法

<head>の中に下記を挿入するだけ

<meta http-equiv="content-type" charset="UTF-8">

ということで最終的なソースコードがこちら

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" charset="UTF-8">
    <script src="http://fb.me/react-0.13.3.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="app">
    <script type="text/jsx">
     var HelloWorld = React.createClass({
       render: function() {
         return (
           <p>Hello!World!(ハローワールド)</p>
         );
       }
     });

     var m = React.render(<HelloWorld />, document.getElementById('app'));
    </script>
  </body>
</html>

結果としてもしっかりと日本語が表示されるようになりました.
スクリーンショット 2021-04-14 11.14.40.png

終わりに

本当はconfファイル等を編集するのがいいと思いますが,ひとまず緊急の際は参考にしてください.

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?