Visual StudioのReact.jsで日本語が文字化けする
Visual StudioでReact.jsを使ったWebアプリが文字化けする
Visual StudioのReact.jsで文字化けが発生した経緯と、その対応策について。
環境
Visual Studio Community 2017 ver 15.7.1
.NET Framework ver 4.7.03056
npm ver 5.6.0
文字化けが発生した経緯
Visula Studioを起動して「ファイル」-「新規作成」-「プロジェクト」から ASP.NET Core Web アプリケーションを作成する。
テンプレートに React.js を選択する。
ビルドをかけると下記のエラーが出た。
Message "Cannot find module './wwwroot/dist/vendor-manifest.json'\r\nError(以下略)
この対応策はこちら。
Visual StudioでReactを遊んでみる。
ASP.NET Core application won't run
プロジェクトフォルダのnode_modulesがある場所で以下のコマンドを実行すると良い。
node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js
node node_modules/webpack/bin/webpack.js
いよいよ本題。
components.NavMenu.tsx の一部を日本語に書き換えてみる。
<Link className='navbar-brand' to={ '/' }>リアクトWebシステム</Link>
</div>
<div className='clearfix'></div>
<div className='navbar-collapse collapse'>
<ul className='nav navbar-nav'>
<li>
<NavLink to={ '/' } exact activeClassName='active'>
<span className='glyphicon glyphicon-home'></span> ホーム
</NavLink>
</li>
<li>
<NavLink to={ '/counter' } activeClassName='active'>
<span className='glyphicon glyphicon-education'></span> カウンター
調査と対応策
問題が発生している箇所を絞り込みたいので、Views.Shared._Layout.cshtml の一部にも日本語を書いてみる。
<title>@ViewData["Title"] - Webサイト</title>
こっちは文字化けしない。(ブラウザのタブに表示されている「Webサイト」の部分。)
ということは NavMenu.tsx だけに問題がありそうで、このファイルの文字コードを修正してあげれば良さそう。
Visual Studio の外側で、NavMenu.tsx をテキストエディタで開く(以下の例ではエディタはMeryを使用)。
Meryはウインドウ下部のステータスバーに文字コードが表示される。
ファイルはシフトJISで保存されていることが判明。WebサイトはUTF-8で表示させたいので、文字コードの変更をする。
「名前を付けて保存」から「エンコード」の選択を『UTF-8(BOM無し)』に変更して保存し、ファイルを更新する。
ファイルの文字コードは一度更新すると保持されるので、エディタでこの作業を繰り返したり、Visual Studio上で特別なことをやったりする必要はない。
Author And Source
この問題について(Visual StudioのReact.jsで日本語が文字化けする), 我々は、より多くの情報をここで見つけました https://qiita.com/miltood/items/0dbeb532c47df4931503著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .