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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

reactでのweb開発で、ブラウザの日本語が文字化けする。

banana3232
banana3232

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

196閲覧

投稿2023/02/05 16:29

編集2023/02/05 18:02

実現したいこと

reactでのweb開発で、
ブラウザの日本語が文字化けする現象を解決したいです。

前提

開発環境でreactを使ったWEB画面を作成しています。
その際、日本語をWEB画面に表示させると文字化けしてしまいます。

イメージ説明

該当のソースコード

pakage.json

1{ 2 "name": "", 3 "version": "1.0.0", 4 "description": "", 5 "keywords": [], 6 "main": "src/index.tsx", 7 "dependencies": { 8 "@chakra-ui/icons": "1.0.4", 9 "@chakra-ui/react": "1.2.1", 10 "@emotion/react": "11.1.4", 11 "@emotion/styled": "11.0.0", 12 "@types/react-router-dom": "5.1.7", 13 "axios": "0.21.1", 14 "framer-motion": "3.3.0-beta.22", 15 "react": "17.0.1", 16 "react-dom": "17.0.1", 17 "react-router-dom": "5.2.0", 18 "react-scripts": "4.0.0" 19 }, 20 "devDependencies": { 21 "@types/react": "17.0.0", 22 "@types/react-dom": "17.0.0", 23 "typescript": "4.0.5" 24 }, 25 "scripts": { 26 "start": "react-scripts start", 27 "build": "react-scripts build", 28 "test": "react-scripts test --env=jsdom", 29 "eject": "react-scripts eject" 30 }, 31 "engines": { 32 "node": "16.x" 33 }, 34 "browserslist": [ 35 ">0.2%", 36 "not dead", 37 "not ie <= 11", 38 "not op_mini all" 39 ] 40}

index.html

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <link rel="icon" href="%PUBLIC_URL%/favicon.png" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 <meta name="theme-color" content="#000000" /> 8 <meta 9 name="description" 10 content="Web site created using create-react-app" 11 /> 12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" /> 13 <!-- 14 manifest.json provides metadata used when your web app is installed on a 15 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 16 --> 17 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 18 <!-- 19 Notice the use of %PUBLIC_URL% in the tags above. 20 It will be replaced with the URL of the `public` folder during the build. 21 Only files inside the `public` folder can be referenced from the HTML. 22 23 Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will 24 work correctly both with client-side routing and a non-root public URL. 25 Learn how to configure a non-root public URL by running `npm run build`. 26 --> 27 <title>Devconsultation</title> 28 </head> 29 <body> 30 <div>文字化テスト</div> 31 <noscript>You need to enable JavaScript to run this app.</noscript> 32 <div id="root"></div> 33 <!-- 34 This HTML file is a template. 35 If you open it directly in the browser, you will see an empty page. 36 37 You can add webfonts, meta tags, or analytics to this file. 38 The build step will place the bundled scripts into the <body> tag. 39 40 To begin the development, run `npm start` or `yarn start`. 41 To create a production bundle, use `npm run build` or `yarn build`. 42 --> 43 </body> 44</html> 45

試したこと

projects\app\public\index.html に下記を追加しましたが変わりませんでした。。

<meta charset="UTF-8" />

他にどこを確認、修正すれば解決できそうかご教授いただけますと幸いです。

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

hoshi-takanori

2023/02/05 17:47

日本語を表示してる部分のソースはどうなってますか? また、そのファイルの文字コードは?
banana3232

2023/02/05 18:08

ありがとうございます。 ファイルの文字コードがUTFではありませんでした。 ご教授ありがとうございました。

回答1

0

自己解決

ファイルの文字コードがUTFではなかったので変更。

投稿2023/02/05 18:08

banana3232

総合スコア2

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。