別ページから特定のタブが開いた状態へダイレクトリンク
2026.07.08
VSCodeでISO-2022-JP（JISコード）のHTMLメルマガを編集する方法
- 公開日
- 最終更新日
HTMLメルマガのコーディングでは、Webサイト制作とは勝手が違う注意点がいくつもあります。その代表格が文字コードで、HTMLメルマガで今も広く使われている文字コードのひとつがISO-2022-JP（JISコード）です。
結論から言うと、VSCodeは標準ではISO-2022-JPに対応しておらず、そのまま開くと文字化けします。ただし拡張機能「ConvertToISO-2022-JP」を入れれば編集でき、編集中はUNICODE、保存前にISO-2022-JPへ戻すという流れを押さえれば、ブラウザでも正しく表示されるメルマガを作れます。
この記事では、そもそもなぜメルマガでISO-2022-JPが使われるのかという背景から、VSCodeで文字化けする理由、拡張機能の導入と変換の手順までを順に解説します。
目次
なぜメルマガでISO-2022-JPが使われるのか
そもそも文字コードとは何か、から簡単に整理します。コンピュータは0と1しか扱えないため、人間が使う文字（あ・い・う…）をそのままでは理解できません。そこで「文字と番号の対応表」を用意し、その対応関係の規則を定めたものが文字コードです。UTF-8やShift-JIS、そしてISO-2022-JPも、この規則のひとつです。
数ある文字コードの中で、メール（特にHTMLメルマガ）ではISO-2022-JPが標準的に使われてきました。これは、かつて日本語メールの標準として広く採用された歴史があり、古い環境や一部の配信システムでも文字化けせず届きやすいためです。UTF-8が主流のWeb制作に慣れていると見落としがちですが、メルマガでは「受け手の環境を選ばない」ことが重視され、今もISO-2022-JPが指定される案件が残っています。
VSCodeでISO-2022-JPを開くと文字化けする理由
ISO-2022-JPのファイルをVSCodeで開くと、下の画像のように文字化けしてしまいます。
原因はシンプルで、VSCodeがデフォルトではISO-2022-JPに対応していないためです。UTF-8やShift-JISは標準で開けますが、ISO-2022-JPは対象外のため、正しく解釈できず崩れてしまいます。裏を返せば、対応させる仕組みさえ用意すれば解決できるということです。
拡張機能「ConvertToISO-2022-JP」をインストールする
そこで、拡張機能「ConvertToISO-2022-JP」を導入し、VSCodeでISO-2022-JPを扱えるようにします。利用にはまずインストールが必要です。
VSCode左側のサイドバーから「拡張機能」を開き、検索バーに「ConvertToISO-2022-JP」と入力して検索します。
検索結果から目的の拡張機能を選び、「インストール」をクリックします。インストール後にVSCodeを再起動すると、拡張機能が有効になります。
ISO-2022-JP → UNICODEに変換して編集する
拡張機能が有効になったら、先ほどのISO-2022-JPのファイルをあらためて開きます。この時点ではまだ文字化けした状態ですが、次の手順で正しく読める状態に変換できます。
コマンドパレット（Ctrl + Shift + P／⌘ + Shift + P）を開き、「Convert ISO-2022-JP」と入力して実行します。
これでISO-2022-JPからUNICODEへ変換され、化けていた文字が正しく表示されます。以降は、画面右下のステータスバーに表示される「Convert ISO-2022-JP」をクリックするだけで、ISO-2022-JPとUNICODEを行き来できます。
編集後はUNICODE → ISO-2022-JPに戻して保存する
UNICODEに変換できれば、あとは通常どおりコーディングを進められます。ただし、ここで見落としがちな落とし穴があります。編集し終えたファイルをそのまま保存すると、今度はブラウザで開いたときに文字化けしてしまうのです。
これは、HTMLの<head>内で文字コードをISO-2022-JPと宣言しているのに、ファイル自体はUNICODEで保存されてしまい、宣言と中身が食い違うために起こります。
<meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
この食い違いを防ぐには、保存前にファイルの文字コードをUNICODEからISO-2022-JPへ戻します。ステータスバーの「Convert ISO-2022-JP」をクリックすれば、今度はUNICODEからISO-2022-JPへ変換されます。
変換するとエディター上は再び文字化けした表示になりますが、これは正常です。その状態でファイルを保存し、ブラウザで開けば正しく表示されます。宣言（ISO-2022-JP）と中身（ISO-2022-JP）が一致した状態になっているためです。
まとめ：作業の流れ
VSCodeでISO-2022-JPのHTMLメルマガを扱うときは、次の流れを押さえておけば文字化けに悩まされません。
- 拡張機能「ConvertToISO-2022-JP」をインストールして再起動する
- ファイルを開いたら、ISO-2022-JP → UNICODEに変換して編集する
- 編集が終わったら、UNICODE → ISO-2022-JPに戻して保存する
「編集はUNICODE、保存はISO-2022-JP」という一往復さえ覚えておけば、メルマガ特有の文字コード対応もスムーズです。ISO-2022-JP指定の案件に出会ったときの備えとして役立ててください。
