背景
Claudeのプロジェクト機能にJavaScriptファイル(35KB、860行)をアップロードしたところ、日本語コメントが文字化けしました。原因究明から解決までの過程をまとめます。
// 正常なコード: // オプション解析
// プロジェクト表示: // オプション解æž
1. 症状はバイト境界で発生していた
調査の結果、114行・3901byteまでは正常表示、3902byte以降が文字化けという、特定のバイト数境界で発生する問題でした。
UTF-8では日本語1文字が3バイトで構成されます。
// オプション解析
↓
[E3 82 AA][E3 83 97][E3 82 B7][E3 83 A7][E3 83 B3]...
オ プ シ ョ ン
3901byte地点でマルチバイト文字が途中で切断される(例: [E3]だけで2バイト欠損)と、そこから後ろの文字コード解釈がズレて文字化けが起きていました。
2. 効果がなかった対処
以下は試したが効果がありませんでした。
- 改行コードの変更(
dos2unix/unix2dos) - ファイル拡張子の変更(
.js→.txt) - VSCodeで単純に「UTF-8」として保存
3. 解決策:UTF-8 with BOMで保存する
VSCodeで「UTF-8 with BOM で保存」を選択すると解決しました。
| 項目 | UTF-8 | UTF-8 with BOM |
|---|---|---|
| ファイルサイズ | 35KB | 28.83KB |
| 表示行数 | 114行(切り詰め) | 864行(全文) |
| 日本語表示 | 文字化け | 正常 |
BOM(EF BB BF)がファイル先頭に付くことで、エンコーディングが明確になり、マルチバイト文字の切断が起きなくなったと推測されます。
BOMが実際に付いているかは以下で確認できます。
xxd -l 3 publish.js
# 0000000: efbb bf ← これがあればBOM付き
複数ファイルを一括変換する場合はこちらです。
for file in scripts/*.js; do
if ! head -c 3 "$file" | xxd -p | grep -q "efbbbf"; then
printf '\xEF\xBB\xBF' | cat - "$file" > "${file}.tmp"
mv "${file}.tmp" "$file"
echo "BOM added: $file"
fi
done
4. 注意点:BOMがNode.js実行時にエラーを起こすことがある
BOM付きファイルをそのままnodeで実行するとSyntaxError: Invalid or unexpected tokenになる場合があります。実行用(BOMなし)とClaude確認用(BOM付き)でファイルを分けるか、GitHub MCP経由でリポジトリを直接参照する方法に切り替えるとこの問題自体を回避できます。
まとめ
Claudeプロジェクト機能でのマルチバイト文字化けは、UTF-8 with BOMで保存することで解消できます。ただし継続的な開発ではファイルサイズ制限やBOM管理の手間があるため、GitHub MCP経由でのアクセスの方が根本的に楽です。