WebstormでのElectronのコンソール文字化け対策

Electronの日本語文字化け問題

Windows環境下にて、Electronの開発時に console.log() で日本語を出力しようとした際、文字コードの問題でターミナルの出力が文字化けすることが知られています。

console.log("こんにちは! Electronです。");

output

縺薙ｓ縺ｫ縺｡縺ｯ! Electron縺ｧ縺吶・

この件の解決策として、コンソールの文字コードを UTF-8 にするという策がよく知られています。

なのですが、WebstormをはじめとしたIntelliJ IDEの場合は別の解決策があります。

IntelliJ IDEでの解決法

Enable New Terminal で新しい方のターミナルを有効化すると、文字化けしなくなります。

これだけです。New Terminalの場合は補完リストが表示されたりして非常に便利なのでオススメです。ただ beta と呼ばれているだけあって、 menuconfig とかやるとレイアウトがめちゃくちゃになることもあるので注意です（といっても、Electron開発時に menuconfig を叩くようなことはそうそうないと思いますが……¹)。

詳細

New Terminalの場合、自動的に UTF-8 環境下でPowershellを起動するようになっているみたいです。 [Console]::OutputEncoding コマンドを叩いて中身を見てみると分かります。

既存のターミナルの場合

PS> [Console]::OutputEncoding

BodyName          : iso-2022-jp
EncodingName      : 日本語 (シフト JIS)
HeaderName        : iso-2022-jp
WebName           : shift_jis
WindowsCodePage   : 932
IsBrowserDisplay  : True
IsBrowserSave     : True
IsMailNewsDisplay : True
IsMailNewsSave    : True
IsSingleByte      : False
EncoderFallback   : System.Text.InternalEncoderBestFitFallback
DecoderFallback   : System.Text.InternalDecoderBestFitFallback
IsReadOnly        : False
CodePage          : 932

新ターミナルの場合

BodyName          : utf-8
EncodingName      : Unicode (UTF-8)
HeaderName        : utf-8
WebName           : utf-8
WindowsCodePage   : 1200
IsBrowserDisplay  : True
IsBrowserSave     : True
IsMailNewsDisplay : True
IsMailNewsSave    : True
IsSingleByte      : False
EncoderFallback   : System.Text.EncoderReplacementFallback
DecoderFallback   : System.Text.DecoderReplacementFallback
IsReadOnly        : False
CodePage          : 6500

まとめ

この方法を使うことで、Webstormではわざわざ package.json の Scripts に入れたり、ターミナル起動時の起動スクリプトを噛ませたりしなくても、簡単に文字化け問題の解決ができます。ピンポイントすぎる事もあり同様の記事はインターネットになさそうだったのですが、需要はありそうなので纏めてみました。

ターミナル回りの挙動を実験してる際に偶然見つけたのですが、Electron以外でも同じような文字コード周りの問題があれば解決できるかもしれません。逆にSHIFT-JISで出力されているものに関しては、かえって問題を起こすこともありそうですが……。

1. ちなみに私は引っかかりました……
   https://zenn.dev/link/comments/bda37724884b34 ↩