ローカルのエディタでは正常なのに、JavaScriptファイルをサーバーにアップした途端、ファイル内の日本語がブラウザで文字化けする——Web制作の現場でときどき遭遇するトラブルです。

結論から言うと、原因は「サーバーがJSファイルの文字コードをブラウザに伝えていないこと」で、次の2つのどちらかで確実に解決できます。

1. JSファイルを「UTF-8 with BOM」で保存し直す（手軽・ファイル単位）
2. .htaccessでJSファイルの文字コードを指定する（根本解決・サイト全体）

この記事では、文字化けが起きる仕組みから2つの解決手順、現場での使い分けまでを解説します。原因を理解しておくと、同じ症状に出くわしたときに迷わず対処できます。

症状：エディタでは正常なのに、ブラウザで見ると文字化けする

まずは典型的な症状を確認します。JavaScriptファイルをサーバーにアップし、ブラウザでソースコードを表示すると、コメントアウトに書いた日本語が次のように文字化けして表示されることがあります。

やっかいなのは、テキストエディタで開いている間はきれいに表示されている点です。手元では何も問題がないため、原因に気づきにくいのがこのトラブルの特徴といえます。

コメント部分だけの文字化けであれば実害はほとんどありません。しかし放置できないのは、JavaScriptで日本語テキストを画面に出力しているケースです。たとえばjQueryの.text()で日本語を挿入していると、ユーザーの目に触れる表示テキストそのものが化けてしまいます。

// このコメントが文字化けする環境では…
$('.message').text('お問い合わせありがとうございます'); // ← この日本語も文字化けして表示される

問い合わせ完了メッセージやバリデーションのエラー文など、動的に出す日本語が崩れると、サイトの信頼性に直結します。原因を正しくつかんで対処しましょう。

原因：ブラウザがJSファイルの文字コードを判別できていない

「文字コードが怪しい」と当たりをつけて確認しても、次のように一見どこにも問題が見当たらないことがほとんどです。

• HTMLファイルには<meta charset="utf-8">を指定している
• 該当のJSファイルもエディタ上では「UTF-8」で保存されている

それでも化けてしまう理由は、HTMLの<meta charset>が効くのはそのHTMLファイル自身に対してだけで、外部から読み込むJSファイルには適用されないためです。ここが多くの人がハマるポイントです。

外部JSファイルの文字コードは、本来サーバーがレスポンスヘッダー（Content-Type）でブラウザに伝えます。ところがサーバーの設定によっては、JSファイルに文字コード（charset）を付けずに返すことがあります。すると受け取ったブラウザは文字コードを推測するしかなく、Shift_JISなど別のコードとして解釈した結果、日本語部分が崩れてしまうわけです。

実際にサーバーが文字コードを伝えているかどうかは、ブラウザの開発者ツールで確認できます。「Network」タブで対象のJSファイルを選び、レスポンスヘッダーのContent-Typeを見てください。application/javascript; charset=UTF-8のようにcharsetが付いていれば正常、付いていなければ今回のパターンに該当します。「エディタでは正常・ブラウザでは文字化け」という症状は、このヘッダー欠落がほぼ原因です。

解決方法①：JSファイルを「UTF-8 with BOM」で保存する

1つ目は、ファイル側で対処する方法です。UTF-8には「BOM付き」と「BOM無し」の2種類があります。BOM（Byte Order Mark）はファイルの先頭に付く数バイトの目印で、これが付いているとサーバーからの情報がなくても、ブラウザは「このファイルはUTF-8だ」と確実に判別できます。つまり、ヘッダーが欠けていてもファイル自身が名乗ってくれる状態にするわけです。

Visual Studio Codeでの保存手順は次のとおりです。

手順1：画面右下の「UTF-8」をクリック

VS Codeの画面右下に表示されている「UTF-8」の箇所をクリックします。

手順2：「エンコード付きで保存」を選択

画面上部にアクションの選択肢が表示されるので、「エンコード付きで保存」をクリックします。

手順3：「UTF-8 with BOM」を選択して保存

エンコードの選択肢が表示されるので、「UTF-8 with BOM」を選んで保存します。

正しく保存できると、画面右下の表示が「UTF-8」から「UTF-8 with BOM」に切り替わります。

このファイルをサーバーにアップし直してブラウザで確認すると、日本語が化けずに表示されます。ファイル単位でその場で完結できるため、対象が少ないときに向いた方法です。

解決方法②：.htaccessでJSファイルの文字コードを指定する

2つ目は、サーバー側で対処する方法です。1ファイルずつ保存し直すのが手間な場合や、サイト内の複数のJSファイルをまとめて対処したい場合は、こちらのほうがスマートに解決できます。

Apacheサーバー（エックスサーバーをはじめ多くのレンタルサーバーが該当）であれば、サイトのルートにある.htaccessへ次の1行を追加します。

AddCharset UTF-8 .js

これで、サーバーが「.jsファイルはUTF-8です」とレスポンスヘッダーで伝えるようになり、BOMの有無にかかわらず文字化けが解消します。原因そのものを取り除く対処なので、根本解決といえます。

同じ理由でCSSファイルが化けることもあるため、まとめて指定しておくと安心です。

AddCharset UTF-8 .js .css

どちらの方法を選ぶべきか

2つの解決法は、状況によって向き不向きがあります。判断の目安を整理しておきます。

方法	向いているケース
UTF-8 with BOM保存	対象ファイルが少ない／サーバー設定を触れない環境
.htaccessで指定	サイト全体で対処したい／今後の運用も見据えたい

根本原因は「サーバーが文字コードを伝えていないこと」なので、可能であれば.htaccessでの指定が本質的な解決策です。一方、サーバー設定に触れられない案件や、納品先の環境が事前に分からない場合は、BOM付き保存でファイル単体に完結させておくほうが確実です。

ただし注意点もあります。BOM付きUTF-8はJavaScriptやCSSでは問題なく動作しますが、PHPファイルでは先頭のBOMが出力に混ざり、ヘッダー送信エラーや余分な空白の原因になることがあります。BOM付きにするのはJS・CSSなど影響のないファイルに限定し、PHPには使わないようにしてください。

まとめ

• エディタでは正常なのにブラウザで文字化けするのは、サーバーがJSファイルの文字コードをブラウザに伝えていないことが原因
• HTMLの<meta charset="utf-8">は外部JSファイルには効かない。伝達の有無は開発者ツールのContent-Typeで確認できる
• 解決法は「UTF-8 with BOMで保存」または「.htaccessでAddCharset UTF-8 .jsを指定」の2つ
• サーバー設定を触れるなら.htaccessでの指定が根本解決。BOMはJS・CSS限定でPHPには使わない

JavaScriptで日本語テキストを扱う場面は思いのほか多いものです。仕組みを押さえておけば、文字化けに気づいたときすぐに正しい手を打てます。