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上で特別なことをやったりする必要はない。