【VSCode】文字化けを解消する方法

このページにはプロモーションが含まれています

このページでは、VSCode で発生した「文字化けを解消する方法」について解説していきます。

例えば下の図のようなソースコードを作成したのに、

VSCode でファイルを開いてみたら文字化けしていた！という経験ありませんか？

この文字化けを解消しないと、プログラムも正常に動作してくれません（上の例だと表示される文字列がぐちゃぐちゃ…）。

ただ、この文字化けは、基本的には VSCode で操作すれば修正することができます（ソースコード作成時点ですでに文字化けしていたら修正できないので注意してください）。

ということで、この文字化けを解消する方法について解説していきたいと思います。

Contents

なぜ文字化けが起こるのか？
- 異なる文字エンコードで開いていることが原因
- VSCode が扱う文字エンコードは UTF-8
文字化けの解消方法
まとめ

なぜ文字化けが起こるのか？

と、その前に、文字化けが発生する原因はご存知でしょうか？

この原因を知っていると、今後の手順を理解しやすくなりますし、VSCode 以外で文字化けが発生した際にも何をすれば良いかがすぐに分かるようになります。

ですので、まずは文字化けが起こる原因について簡単に解説しておきたいと思います。すでに文字化けが起こる原因をご存知の方は、次の文字化けの解消方法までスキップしていただければと思います。

異なる文字エンコードで開いていることが原因

文字化けが発生するのは「ファイル自体の文字エンコードとファイルを開いた時に指定した文字エンコードとが異なる」のが原因です（元々のファイルが既に文字化けしているのでなければ）。

文字エンコードとして有名なのは Shift JIS や UTF-8 等が挙げられると思います。

テキストファイルでは、ファイルに対して文字エンコードを設定することが可能です。

ファイルに設定する文字エンコードは、テキストファイル作成時や保存時等に指定することが可能であり、その文字エンコードによって保存されるファイルの中身が異なります。

例えば、テキスト編集アプリで「あいうえお」だけ入力して保存した場合、文字エンコードが UTF-8 の場合のファイルの中身は下の図のようになります（バイナリエディタで開くと下の図のような生のデータを表示することができます）。

それに対し、同じようにテキスト編集アプリで「あいうえお」だけ入力して保存したとしても、文字エンコードが Shift JIS の場合のファイルの中身は下の図のようになります。

意味の分からない数字や英字が並んでいますが、この数字や英字自体はそこまで重要ではなく、文字エンコードによってファイルの中身が変わってしまうというところがポイントです。ファイルの中身が異なるのですから、単にファイルを開くだけだと当然異なるテキストが表示されることになります。

なので、テキストファイルを開く際には、ファイルをどの文字エンコードで開くのかを指定してやる必要があります（テキストを開くアプリによっては指定しなくても自動判別してくれる場合もある）。

そして、ここで指定する文字エンコードが、実際のファイルの文字エンコードと異なる場合、文字化けが発生する可能性があります。

MEMO

多くの半角英数字は文字化けしないはずなので、

そういった文字だけ使われている場合はエンコードが異なっても文字化けしません

例えば、UTF-8 が設定されているファイルを、文字エンコード UTF-8 で開いた場合に下の図のように表示されたとしても、

同じファイルを文字エンコード Shift JIS で開いた場合は下の図のように表示され、文字化けが発生してしまうことになります。

こんな感じで、ファイルに設定されている文字エンコードと開く際に指定する文字エンコードが異なる場合に文字化けが発生します。

今まで文字エンコードの指定を意識したことがないという方もおられるかもしれませんが、基本的にテキスト編集アプリ等ではデフォルト（初期設定）の文字エンコードが設定されていますので、その文字エンコードを利用してファイルの保存が行われているだけです。

また、開く際にもデフォルトの文字エンコードが指定されることも多いですし、自動的に文字エンコードを判別して開いてくれることもあります。

VSCode が扱う文字エンコードは `UTF-8`

ここで VSCode について話を戻すと、VSCode では、デフォルト設定で文字エンコードは UTF-8 を使用するようになっています。

より具体的には、ソースコード等のテキストファイルを保存する際には文字コード UTF-8 を指定して保存されますし、テキストファイルを開く際にも文字コード UTF-8 を指定するようになっています。

ですので、VSCode で作成して保存したファイルに関しては、保存する際も開く際も UTF-8 が指定されるので文字化けは基本的には発生しません（デフォルト設定ならね）。

それに対して、他のテキスト編集アプリで作成・保存したファイルに関しては、異なる文字エンコードを指定することも可能ですし、デフォルト設定で他の文字エンコードが指定されるようになっていることもあります。よく利用されるのが Shift JIS ですね。

そして、そういった文字エンコード UTF-8 以外が指定されたファイルを VSCode で開くと、文字化けが発生してしまうことになります。

ですので、VSCode で文字化けが発生するのは「VSCode で開いたファイルの文字エンコードが UTF-8 以外である」ことが原因であると言うことができます。

ただ、これは VSCode で開く際に指定される文字エンコードのデフォルト設定が UTF-8 になっているからであって、UTF-8 以外の文字エンコード、具体的には開くファイルの文字エンコードに合わせて設定を変更してやることで、文字化けなくファイルを開くことができます。

ここからは、その具体的な方法を解説していきます。

MEMO

ここで UTF-8 について捕捉しておきます

エディタ等によっては UTF-8 を下記のように表記する場合がありますが、これらは本ページで扱う UTF-8 と同義の文字エンコードになります

UTF-8N
UTF-8（BOMなし）

それに対し、下記に関しては本ページで扱う UTF-8 とは異なる文字エンコードなので注意してください

UTF-8（BOMあり）

文字化けの解消方法

それでは、文字化けの解消方法について解説していきます。

具体的には、下記の３つの方法について解説します。一番手っ取り早いのは２番目の自動で文字化けを解消する（Files: Auto Guess Encoding）になると思います。

手動で文字化けを解消する
自動で文字化けを解消する（Files: Auto Guess Encoding）
VSCode の文字エンコード設定を変更する

手動で文字化けを解消する

VSCode で開いたファイルが文字化けしている場合、そのファイルに合わせた文字エンコードを選択し直すことで、文字化けを解消することができます。

ファイルを開く際の文字エンコードを変更する

まず、文字化けしてしまうファイルを開き、開いた後に VSCode のウィンドウ下部のバーに注目してみましょう。そこにファイルを開く際に指定された文字コードが表示されるはずです。前述の通り、デフォルトではファイルを開く際に UTF-8 が指定されますので、UTF-8 と表示されているはずです。

開く際に指定する文字エンコードを変更するためには、その UTF-8 と表示されている部分をクリックします。

これにより、下の図のようなウィンドウが表示されますので、エンコード付きで再度開く をクリックします（英語表記の場合は Reopen with Encoding）。

すると、下の図のように選択可能な文字エンコードの選択肢が表示されます。ここで、開いたファイルに元々指定されていた文字エンコードをクリックして選択します。

上の図のように、VSCode が自動的にファイルの文字エンコードを推測し、推測結果の文字エンコードが コンテンツから推測 と表記されて一番上に表示されるようになっています。なので、大体の場合は一番上に表示される項目を選択すれば良いはずです（推測が外れている場合もあるかもしれないですが…）。

文字化けを解消するためには開くファイルの文字エンコードを正しく指定する必要がありますので、ここで異なった文字エンコードを選択すると文字化けが解消できないので注意してください。

もし、開くファイルに指定されている文字エンコードが正しく選択されれば、表示されているファイルの文字化けが解消されているはずです。さらに、ウィンドウ下部のバーに表示されている文字エンコードも、指定したものに変化しているはずです。

以上の手順によって、VSCode で UTF-8 以外の文字エンコードでファイルを開くことができ、文字化けを解消することができます。

ただし、文字エンコードが原因ではなく、元々のファイル自体に文字化けが発生している場合は文字化けは解消できないので注意してください。

ファイル自体の文字エンコードを変更する

上記の手順により VSCode で UTF-8 以外の文字エンコードでファイルを開くことができ、文字化けを解消することができました。

ただし、上記の手順で行われたのは、ファイルを開く際の文字エンコードの指定のみであり、ファイル自体の文字エンコードが変更されたというわけではありません。なので、ファイル自体の文字エンコードは元のままです。

そのため、上記の手順で文字化けが解消されたとしても、そのファイルを閉じて再度開いた際には、再び文字エンコードに UTF-8 が指定されるため、また文字化けが発生してしまうことになります。

流石に毎回文字化けを解消するために上記の手順を繰り返すのは面倒ですので、ここからは恒久的に文字化けが防げるようにするための方法を説明していきたいと思います。

その方法の１つ目として、まずここで紹介するのは「ファイル自体の文字エンコードを変更する」になります。

要は、VSCode から開いたファイル自体の文字エンコードを UTF-8 に指定し直します。ファイル自体の文字エンコードが UTF-8 になれば、以降 VSCode を開いた際にはファイル自体の文字エンコードと開く際の文字エンコードが一致して文字化けを防ぐことができるようになります。

手順としては、まずファイルを開く際の文字エンコードを変更するで解説した内容に従って文字化けを解消させます。

この時、ウィンドウ下部のバーには、UTF-8 以外の文字エンコードが表示されているはずです（手順の中で選択したファイル自体の文字エンコードが表示されているはず）。

ここで、再度その文字エンコードが表示されている部分をクリックします。

そうすると、下の図のようなウィンドウが表示されるはずですので、今度は エンコード付きで保存 をクリックします（英語表記の場合は Save with Encoding）。

さらに、下の図のようなウィンドウが表示されますので、今度は保存する際に指定する文字エンコードとして UTF-8 をクリックして選択します。

これにより、開いていたファイルの文字エンコードが UTF-8 に変更された状態で保存されますので、ファイルを閉じて再度開いた場合でも文字化けを解消した状態で表示することができます。

例えば、元々全てのファイルの文字エンコードを UTF-8 に統一していたのに、他の環境からファイルコピーするなどして Shift JIS のものが紛れ込んだような際には、上記の手順でファイルの文字エンコードを変更することで、全てのファイルを UTF-8 に統一し直すことができます。

自動で文字化けを解消する（`Files: Auto Guess Encoding`）

先程は手動で文字化けを解消する手順を解説しましたが、ファイルに応じて自動で VSCode が開く際の文字エンコードを切り替えるように設定を行うことも可能です。

このためには、まず VSCode のウィンドウ左下にある歯車マーク（管理ボタン）をクリックし、表示されるメニューの中から「設定（英語の場合は Settings）」を選択します。

すると、設定画面が表示されますので、まず画面上部の検索窓に encoding と入力し、それによって表示された検索結果の中の Files: Auto Guess Encoding のチェックボックスをクリックしてチェックを入れます。これで設定完了です。

Files: Auto Guess Encoding の説明欄にも記述されていますが、チェックを入れることにより、ファイルを開く際にファイルの文字エンコードを VSCode が推測するようになります。そして、その推測結果に基づいて文字エンコードが指定されてファイルが開かれるようになります。

チェックを入れた後に、文字化けが発生していたファイルを再度開けば、VSCode の推測が上手くいっていれば文字化けが解消されていることが確認できると思います。

ファイルによって文字エンコードが自動的に切り替わるので、一つ一つのファイルに対して手動で設定する必要がなく、とにかく文字化けを防ぎたいという場合は一番楽な方法になると思います。

ただし、これは開く際に指定する文字エンコードが自動的に切り替わるようになっただけであり、ファイル自体の文字エンコードが変更されているわけではない点に注意してください。

ファイル自体の文字エンコードを変更した場合は、ファイル自体の文字エンコードを変更するで紹介した手順を踏む必要があります。

また、上記の手順だと、Files: Auto Guess Encoding がユーザー単位で設定されることになりますが、ワークスペース単位で個別に Files: Auto Guess Encoding 機能の ON / OFF を切り替えることもできます。

もしワークスペース単位で Files: Auto Guess Encoding 機能を ON にしたい場合は、設定画面で ワークスペース タブ選択後に Files: Auto Guess Encoding にチェックを入れてください。

この時、ユーザー タブ側の Files: Auto Guess Encoding にチェックを入れておくと、結局ワークスペース単位ではなくユーザー単位で機能の ON が設定されることになるので、個別のワークスペースのみで機能を ON にしたい場合は、ユーザー タブ側の Files: Auto Guess Encoding のチェックは外しておいた方が良いです。

Files: Auto Guess Encoding だけでなく、他の VSCode の設定に関しても、ユーザー単位で行うか、ワークスペース単位で行うかは、先程紹介した ユーザー タブと ワークスペース タブによって切り替えることができます。

これは次に紹介する VSCode の文字エンコード設定の変更に関しても同様ですので、変更する際には、ユーザー単位で設定するかワークスペース単位で設定するかに応じてタブを切り替えて設定するようにしてください。

VSCode の文字エンコード設定を変更する

最後は、VSCode の文字エンコード設定を変更する手順を解説していきます。

これによって、VSCode でテキストファイルを扱う際の文字エンコードを UTF-8 以外のものに変更することができます。

UTF-8 以外の文字エンコードを使って開発を行いたいような場合や、すでに他の文字エンコードを使って開発を進めていたプロジェクトで途中からエディターを VSCode に切り替えたいような場合には、この VSCode のデフォルト設定の変更が有効だと思います。

このための手順としては、まず VSCode のウィンドウ左下にある歯車マーク（管理ボタン）をクリックし、表示されるメニューの中から「設定（英語の場合は Settings）」を選択します。

すると、設定画面が表示されますので、まず画面上部の検索窓に encoding と入力し、それによって表示された検索結果の中の Files: Encoding のプルダウンメニューをクリックします。これにより文字エンコードの選択肢が表示されますので、選択肢の中から VSCode で使用したい文字エンコードを選択します。これで設定完了です。

この設定により、以降でファイルを開いた際には、先程選択した文字エンコードでファイルが開かれますし（Files: Auto Guess Encoding も ON にしている場合は自動的に文字エンコードが切り替わる）、新規で作成したファイルに関しても、先程選択した文字エンコードが自動的に設定されるようになります。