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