こんにちは！ 昨今は文字コードといえば「UTF-8」で統一されつつありますが、フロントエンド界隈にいると、Shift-JISやEUC-JPあたりの文字コードが使われている案件をみることも少なくありません。
私の場合はたまたま携わっている案件でshift-jisが多いのですが、そこに思わぬ落とし穴がありました。
それが、「VSCodeのLive ServerでShift-JISのファイルを開くと、盛大に文字化けする問題」です。
今回は、この文字化け問題の原因と、シンプルなローカルサーバーを使ってサクッと解決した方法を、自分への備忘録も兼ねてまとめておきます。同じ現象で焦っている方の参考になれば嬉しいです！
なぜLive ServerでShift-JISが文字化けするのか？
普段のローカル開発では、VSCodeの拡張機能「Live Server」が手放せません。保存したら自動でブラウザがリロードされる（ホットリロード）機能、本当に神…！
しかし、今回の案件はHTMLの文字コードが Shift_JIS でした。 いつものように右下の「Go Live」をポチッと押してブラウザを開くと……
見事な文字化け（はてなマークや謎の漢字の羅列）が発生しました。HTMLのヘッダーにはちゃんと <meta charset=”Shift_JIS”> と書かれているのに、なぜ？
気になってブラウザの検証ツール（Networkタブ）でレスポンスヘッダーを調べてみたところ、原因が判明しました。
実は、Live Serverはファイルをブラウザに送る際、HTTPヘッダーで「これはUTF-8のファイルですよ（Content-Type: text/html; charset=UTF-8）」と強制的に指定してしまう仕様だったのです。
ブラウザはHTML内の<meta>タグよりも、サーバーから送られてくるHTTPヘッダーの指示を優先します。そのため、「UTF-8として解釈しろと言われたからUTF-8で読んだら、中身がShift-JISだったから文字化けした」というのが真相でした。
「Live Serverの設定で文字コードを変えられないかな？」と探したのですが、手軽にパッと切り替えるのは難しそう。そこで出会ったのがローカルサーバーツールたちです。
【事前準備】Node.jsのインストール
後述するツールを使うには、大前提としてパソコンに「Node.js」がインストールされている必要があります。「まだ入れてない！」という方は、以下の手順でサクッと入れてしまいましょう。
- Node.jsの公式サイト にアクセスする。
- 画面に表示されている「Node.jsを入手」 のボタンをクリック。
- 自分の環境に適したインストーラーをダウンロード。
- ダウンロードしたファイルを実行し、基本的には「Next（次へ）」を押していくだけでインストール完了です。
VSCodeのターミナルを開いてnode -vと入力し、v20.x.x のようにバージョン番号が表示されれば準備OKです！
便利ツール「node-static」に行き着いた
まず「余計なHTTPヘッダー（charset）を強制付与しない、シンプルなローカルサーバーを使えばいいのでは？」と思い至り、最初に行き着いたのが node-staticというツールです。
これを使えばファイルをそのままブラウザに渡してくれるので、ブラウザが素直にHTMLの<meta charset=”Shift_JIS”>を読み取って正常に表示してくれます。
node-staticの入れ方と使い方
ターミナル（※WindowsならPowerShell等、Macならターミナルアプリ）で以下のコマンドを打ちます。
npm install -g node-staticこれでパソコンのどこからでも使えるようになります。あとは作業フォルダで
staticと打ち込めば、http://127.0.0.1:8080でサーバーが立ち上がります。これで見事に文字化けは解消されました！
……と、最初はこれで喜んでいたのですが、記事を書きながら色々と調べているうちに、フロントエンド界隈の「最新の常識」を知ってしまったので追記します。
【注意点】node-staticは数年間更新が止まっている
実はnpm（パッケージの管理サイト）を確認したところ、node-staticはもう何年もアップデートされていませんでした。
セキュリティの脆弱性が見つかっても修正されない可能性が高いため、使うとしても「自分のパソコンの中だけで一時的に確認する用途」に限定する必要があります。
「さすがに更新が止まっているツールをブログでおすすめするのはどうなんだ…？」と思い、現在の主流を調べてみました。
今の最適解は「npx http-server」だった！
現在のフロントエンド開発において、最も標準的で今も活発にアップデートされているローカルサーバーはhttp-serverだそうです。これも余計な文字コードを強制しないので、Shift-JIS案件にピッタリです。
しかも、今の時代は-g（グローバル）でパソコンにインストールして環境を散らかすのはあまり推奨されていません。 代わりに、インストール不要でその場だけツールを借りてこれるnpxという魔法のコマンドを使います。
http-serverの使い方
作業フォルダをVSCodeで開き、ターミナルで以下のコマンドを打つだけです。（事前のインストールは一切不要！）
npx http-server※このとき、ターミナルに
Need to install the following packages: http-server... Ok to proceed? (y) と聞かれることがあります。これは「一時的にダウンロードして動かしていい？」という確認なので、そのまま y を入力してEnter を押してください。
これだけで最新版のhttp-serverが一時的にダウンロードされ、スッとローカルサーバーが立ち上がります。使い終わってCtrl + Cで終了すればパソコンには何も残りません。
めちゃくちゃスマートですね……！
まとめ
今回の学びをまとめます。
- Live ServerはHTTPヘッダーでUTF-8を強制するため、Shift-JISのファイルは文字化けする。
- レガシーな案件（Shift-JISなど）の確認には、余計なヘッダーをつけないシンプルなローカルサーバーが必要。
- 今の時代の最適解は、インストール不要のnpx http-serverをターミナルで叩くこと！
Live Serverのホットリロード機能は確かに便利ですが、ツールにはそれぞれ「得意・不得意」があります。
「何かおかしいな？」と思った時にネットワークタブを見て原因を突き止め、別の最適なツールにサッと切り替えることができたのは、自分でも少しフロントエンドエンジニアとしての成長を感じられた出来事でした。
モダンな開発環境にどっぷり浸かっていると忘れがちですが、レガシー案件と戦うための「シンプルな道具」も引き出しに持っておくと安心ですね。
それでは、皆さんも快適なコーディングライフを！
