環境構築
💻 Live Serverで日本語ファイル名が文字化けする
ファイル名に日本語を使っている
😰 こんな症状
ファイル名に日本語を使うとLive ServerのURLで問題が起きる。日本語ファイル名で起きるよ。
🔍 原因
ファイル名やフォルダ名に日本語を使うと、Live ServerのURLエンコードで問題が起きるよ。URLは基本的にASCII文字（半角英数字）しか使えないから、日本語はパーセントエンコーディング（%E3%81%82等）に変換されるんだ。この変換がうまくいかないとファイルが見つからなくなるよ。
❌ エラーが起きるコード
$ Live Serverで日本語ファイル名が文字化けする
# エラー発生✅ 直し方
1. ファイル名・フォルダ名を半角英数字とハイフンのみに変更する。 2. 日本語フォルダ内にプロジェクトがある場合は、英語名のフォルダに移動する。 3. ユーザー名が日本語の場合はパスに影響するので、英語名のユーザーを作成することも検討する。
✅ 修正後のコード
# ファイル名・フォルダ名は半角英数字とハイフンのみ使用する。この解決法は役立ちましたか？
🔗 関連するエラー
- Live Serverが起動しない — Live Server 拡張機能が正しく動作していない
- Live Serverが起動しない（ポート競合） — ポートが他のプロセスに使われている
- GitHub Pagesで404が表示される — Pages設定またはindex.htmlの配置が間違っている
- VS Code拡張が動かない — 拡張機能が正しくインストールされていない
- npm installが失敗する — パッケージのインストールでエラーが出る
🔗 別カテゴリの関連エラー
📖 この問題を学べるレッスン
📝 関連ブログ記事
- プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
- VS Codeのインストール方法 — インストールと初期設定を図解で解説
- プログラミング初心者が最初にやるべきこと5選 — 目的を決めて環境構築から