どういうタイミングで文字化けするか？

ブラウザでのファイル読み込み時に文字化けしてしまいます

メモ帳でしたら自動判定で正常に表示されます

メモ帳での読み込み .bas (Shift-JIS) 自動判定 正常表示 ブラウザでの読み込み（修正前） .bas (Shift-JIS) UTF-8で解釈 文字化け

そもそも文字化けとは

文字化けは異なる文字コードでエンコーディングすることで発生します。Shift-JISで書かれたファイルをUTF-8として読み込むと、バイナリデータの解釈方法が異なるため、意図しない文字として表示されます。

こんにちは Shift-JIS Text 82 B1 82 F1 82 C9 82 BF 82 CD バイナリデータ 縺薙ｓ縺ｫ縺｡縺ｯ UTF-8として誤読 1. Shift-JISのバイナリデータをUTF-8として解釈 2. バイナリデータの解釈方法が異なるため文字化けが発生

エンコーディングとは

テキスト あいうえお バイナリ 82 A0 82 A2… エンコード → ← デコード 文字コード = テキストとバイナリデータの相互変換規則
Shift-JIS エンコーディング あ → 82 A0 い → 82 A2 UTF-8 エンコーディング あ → E3 81 82 い → E3 81 84 文字化けの原因： 1. 同じ文字でも異なるバイナリ表現 2. 誤った文字コードで解釈すると異なる文字として表示

Shift-JIS

Shift-JISは文字コードの一種です。

文字コードとは？
文字 Shift-JIS UTF-8 あ 82 A0 E3 81 82 A 41 41 1 31 31 文字コード = 文字とバイナリデータの対応表 Shift-JIS: 日本語Windows標準 (2バイト) UTF-8: 世界標準 (可変長バイト)

文字コードとは：

  • コンピュータが文字を扱うための規則
  • 文字とバイナリデータの対応表
  • 同じ文字でも異なる表現方法が存在

Shift-JISの特徴：

  • 主に日本のWindowsで使用
  • VBAなど古いシステムで採用
  • 2バイトで日本語を表現

そのため、Shift-JISで書かれた.basファイルをUTF-8として読み込むと文字化けが発生します。

Blob

Blobは、バイナリデータを扱うためのJavaScriptのオブジェクトです。

Blob バイナリデータのコンテナ Text Image Binary const blob = new Blob([‘Hello World’], { type: ‘text/plain’ });

.basファイル(Shift-JIS) → ArrayBuffer(バイナリ) → Text(UTF-8)の変換で、Shift-JISのバイナリデータをUTF-8として誤って解釈したことが原因です。

↓

処理タイミング：

  1. ファイル読み込み時：バイナリデータとして読み込む
  2. TextDecoder使用時：バイナリ→テキストにデコード
  3. 表示前：適切な文字コードでエンコード

この方法は一般的で、特にShift-JISなど日本語文字コードを扱う際によく使用されます。ブラウザの標準APIを使用しているため、信頼性が高いアプローチです

.bas file Shift-JIS ArrayBuffer Binary Data Blob text/plain Text UTF-8 file.arrayBuffer() new Blob() readAsText()

Blobの主な使用例

ファイル操作

// ダウンロード
const blob = new Blob(['テキストデータ'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'file.txt';
a.click();

データ変換

// バイナリ→テキスト変換
const blob = new Blob([arrayBuffer], { type: 'text/plain' });
const text = await blob.text();

API通信

// ファイルアップロード
const formData = new FormData();
formData.append('file', blob, 'filename.txt');
await fetch('/upload', {
    method: 'POST',
    body: formData
});