エンコーディングを理解する

## はじめに
エンコーディングについて正しく理解するよう整理します。
ファイルのエンコーディングとは何か、UTF-8をエンコーディングとするとは、HTMLエンコーディングとは、HTMLエンティティとは、デコードとは、をちゃんと迷わず理解するのが目的です。

## エンコーディングとは
「エンコーディング」だけでは曖昧です。
その意味合いを明確にするためには「**ファイルのエンコーディング**」「**テキストのエンコーディング**」などの前置きが必要になる場合がほとんどです。

### 1. **「エンコーディング」という言葉の意味**
- 「エンコーディング」とは、一般的に**「情報を一定のルールに従って変換すること」**を意味します。
  - 文字をバイナリデータに変換する文字コード（例: UTF-8, Shift_JIS）もその一例です。
  - 映像や音声にもエンコーディングがあり、それぞれの分野で使われています（例: MP3やH.264）。

ただし、文脈が曖昧だと何を指しているのか分かりにくいため、「ファイルのエンコーディング」や「文字コード」など、具体的な言葉を補います。

### 2. **「エンコーディング」という言葉に前置きが必要な理由**
- 単に「エンコーディング」と言われると、何を指しているのか曖昧になりがちです。
  - 例えば：
    - 「ファイルのエンコーディング」 → ファイル保存時の文字コード形式（例: UTF-8, Shift_JIS）。
    - 「HTMLのエンコーディング」 → HTML文書内でブラウザに指示する文字コード形式。

#### **「ファイルのエンコーディング」と補足することでの明確化**
- 「UTF-8やShift_JISのこと」と前置きがあることで、「テキストファイルやHTMLがどの文字コードで保存されているか」という具体的な意味を持たせられます。

## ファイルのエンコーディングとは
先ほど記載の通り「ファイルの」と前置きを記載させて頂きます！
**ファイルのエンコーディング**とは、ファイルがどの文字コード形式で保存されているかを指します。

### ファイルのエンコーディング
- **文字コード**（エンコーディング）は、文字（例: 「あ」や「A」）をバイナリデータ（0と1の並び）に変換するルールです。
- ファイルのエンコーディングは、テキストデータをどの文字コード規則で保存するかを決めます。

#### **例**
- **UTF-8エンコーディング**
  - 「あ」はUTF-8形式ではバイナリで `E3 81 82` として保存されます。
- **Shift_JISエンコーディング**
  - 同じ「あ」はShift_JIS形式ではバイナリで `82 A0` として保存されます。

### ファイル形式とエンコーディングの違い
- **ファイル形式**
  - ファイルがどの種類のデータを含むかを定義するものです（例: `.txt`, `.html`, `.xls`）。
  - 例:
    - `.txt`: プレーンテキストデータ
    - `.xls`: Excelのバイナリデータ形式（テキストや数値が含まれる）

- **ファイルのエンコーディング**
  - テキストデータの保存方法（文字コード）を決めるものです。
  - 例:
    - UTF-8, Shift_JIS, EUC-JP, ISO-8859-1 など。

#### **関係性**
- テキストファイル（例: `.txt`や`.html`）はエンコーディングに従って保存されます。
- 一方、ExcelやPDFなどの特定の形式（`.xls`, `.pdf`）では、独自の構造とエンコーディングが定義されています。


### ファイルのエンコーディングを知る方法
1. **テキストエディタで確認**
   - メモ帳、VSCode、Sublime Textなどのエディタでは、開いているファイルのエンコーディングを確認できます。
   - 多くのエディタでは、エンコーディングを変更して保存も可能です。

2. **ブラウザや開発ツール**
   - HTMLファイルの場合、ブラウザがエンコーディングを自動検出して表示します。
   - `<meta charset>`タグやHTTPレスポンスヘッダーで指定されたエンコーディングが使われます。

### エンコーディングの重要性
- **一致する必要がある**
  - ファイルが保存されているエンコーディングと、読み取る際に使用するエンコーディングが一致しないと、文字化けが発生します。

#### **例**
- ファイルを**Shift_JIS**で保存した場合：
  - `<meta charset="Shift_JIS">`を指定すれば正しく解釈されます。
  - `<meta charset="UTF-8">`を指定すると文字化けします。

- ファイルを**UTF-8**で保存した場合：
  - `<meta charset="UTF-8">`を指定すれば正しく解釈されます。

### まとめ
- ファイルのエンコーディングとは、「ファイル内の文字をどの文字コード形式で保存しているか」ということを指します。
- エンコーディングとファイル形式（.txt, .html, .xlsなど）は異なる概念ですが、テキスト形式のファイルではエンコーディングが重要です。
- **保存形式（エンコーディング）と読み取り形式（ブラウザやエディタで指定されるエンコーディング）が一致することが重要**です。

## HTMLエンコーディングとUTF-8、Shift-JISの関係
HTMLエンコーディングとは、HTMLファイル全体がどの文字コード（例: UTF-8, Shift_JIS）で保存されているかを指します。
### 1. **UTF-8やShift_JISでのエンコーディング**
- **UTF-8やShift_JIS**は、文字を**バイト列**として保存または送信する際のルールを定めたものです。
  - 文字をバイナリ（0と1の列）に変換します。
  - 例: 「あ」をバイト列として保存する場合
    - **UTF-8**: `E3 81 82`（3バイト）
    - **Shift_JIS**: `82 A0`（2バイト）

- **ファイルのエンコーディング**
  - ファイル自体がどの文字コード（エンコーディング）で保存されているかを指します。
  - HTMLファイルでも同様に、文字をバイト列で保存しています。

#### **補足**
- UTF-8やShift_JISは、**データ（テキスト）を保存・送信する際に使われるエンコーディング**です。
- ブラウザやテキストエディタは、このバイト列を解釈して「人間が読める文字」に変換します。

### 2. **HTMLエンティティ（例: `&#12354;`）とは？**
- HTMLエンティティ（例: `&#12354;` や `&#x3042;`）は、**文字そのものではなく、文字を表現する特殊な記法**です。
  - 例: `&#12354;` は Unicode コードポイント `U+3042` に対応する「あ」を表します。
  - `&#x3042;` は同じ文字を16進数で表現したものです。

#### **HTMLエンコーディングとエンティティの違い**
1. **HTMLのエンコーディング**
   - **HTMLファイル全体がどの文字コード（例: UTF-8, Shift_JIS）で保存されているかを指します。**
   - これはバイト列で保存され、ブラウザが解釈します。

2. **HTMLエンティティ**
   - 特定の文字をエスケープするために使用されます。
   - HTMLエンティティは文字列としてファイル内に保存されますが、ブラウザがこれを解釈して実際の文字（例: 「あ」）として表示します。

---


### 3. **例で確認**
以下の例で両者を区別して確認できます：

#### ファイルのエンコーディングがUTF-8の場合：
```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8"> <!-- UTF-8で保存されていることを示す -->
  <title>エンコーディングの例</title>
</head>
<body>
  <!-- 文字を直接記述 -->
  <p>直接記述: あ</p>

  <!-- HTMLエンティティで記述 -->
  <p>HTMLエンティティ (10進数): &#12354;</p>
  <p>HTMLエンティティ (16進数): &#x3042;</p>
</body>
</html>
```

#### 結果
1. **直接記述**
   - 「あ」はUTF-8のバイト列 `E3 81 82` として保存され、ブラウザがそのまま解釈して表示します。

2. **HTMLエンティティ**
   - `&#12354;` や `&#x3042;` はファイル内でそのままテキストとして保存されます。
   - ブラウザはこれを解釈し、結果として「**あ**」を表示します。


### 4. **重要なポイント**
- ファイルのエンコーディング（UTF-8やShift_JIS）は、ファイルがどの形式で保存されているかを決めるもので、バイト列で管理されます。
- HTMLエンティティ（例: `&#12354;`）は、特定の文字をエスケープするための記法であり、ファイルのエンコーディングとは別の概念です。

**したがって、HTMLのエンコーディングを指すのはファイル全体の保存形式であり、エンティティ（`&#12354;`）は特定の文字の記述方法です。**



## 再整理
以下はいきなり読むとわかりにくいですが、上記を読むと読みやすいと思います。

「**あ**」の表示で、「**あ**」のように直接記入する場合と、`&#12354;` や `&#x3042;`と記入する場合の違いは？、どちらも「**あ**」が表示されます。
直接記入する場合の流れを記載し、HTMLエンティティとの表示の違いを理解します。

### 1. **直接記入時の流れ**
HTMLやテキストファイルに「**あ**」と直接記入した場合、以下のプロセスを通じて表示されます：

#### **(1) ファイルのエンコーディング**
- **ファイル自体**の文字コード（例えば UTF-8、Shift_JIS など）が「**あ**」を適切にエンコードしています。
  - 例: UTF-8 では「あ」のバイナリ表現は `E3 81 82` です。
- ブラウザは、HTMLの `<meta charset="UTF-8">` やサーバーのHTTPヘッダーで指定されたエンコーディングに従い、このバイナリデータを読み取ります。

#### **(2) デコード**
- ブラウザはバイナリデータをデコードし、Unicode文字として解釈します。
  - 「あ」のUnicodeコードポイントは `U+3042` です。

#### **(3) 表示**
- ブラウザは、フォントを使用して文字をレンダリングし、画面に「**あ**」を表示します。

**ポイント**:
- 普段はエンコード・デコードが自動で行われるため、開発者やユーザーが気にする必要はありません。

### 2. **`&#12354;` や `&#x3042;` を使う場合**
`&#12354;` や `&#x3042;` のように書くと、ブラウザはHTMLエンティティとしてこれを解釈し、対応するUnicode文字（「あ」）を表示します。

#### **(1) 違い**
- この形式は、HTMLコード内で特定の文字をエスケープする必要がある場合に便利です。
  - 例: 特殊文字（`<`, `>`, `&` など）がHTMLの構文と混同されるのを防ぐ。
- 直接文字を記述できない場合（特に、特定のエディタやエンコーディングの制限がある場合）にも使われます。

### 3. **実用例**
例えば、次のコードを考えます：

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字の表示</title>
</head>
<body>
  <!-- 直接記述 -->
  <p>直接記述: あ</p>
  <!-- HTMLエンティティ -->
  <p>16進数エンティティ: &#x3042;</p>
  <p>10進数エンティティ: &#12354;</p>
</body>
</html>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176603/8c8082e7-e816-86ca-d2f6-718b1208da85.png)

特別な理由がなければ、エンティティを使わず、直接文字を書く方が簡単で効率的です。


**以上**