開発者のためのエンコーディング基礎
Web開発では、データを安全かつ効率的に送信・保存するために様々なエンコーディング方法が使用されます。主なエンコーディング方法について学びましょう。
1. Base64エンコーディング
概念
バイナリデータをASCII文字列に変換するエンコーディング方法です。
特徴
- 64種類の安全なASCII文字（A-Z、a-z、0-9、+、/）を使用
- バイナリデータをテキストに変換
- 主にメール添付ファイルやWeb上の画像送信に使用
使用例
hljs javascript
// エンコード
const text = "Hello World!";
const encoded = btoa(text);
console.log(encoded); // "SGVsbG8gV29ybGQh"
// デコード
const decoded = atob(encoded);
console.log(decoded); // "Hello World!"
2. URLエンコーディング
概念
URL内の安全でない文字をパーセントエンコーディングに変換する方法です。
特徴
- 特殊文字、スペース、Unicode文字を%XX形式に変換
- 主にURLパラメータ値に使用
- encodeURIComponent()とencodeURI()関数を使用
使用例
hljs javascript
// URLコンポーネントのエンコード（推奨）
const param = "Hello World!";
const encoded = encodeURIComponent(param);
console.log(encoded); // "Hello%20World%21"
// 完全なURLのエンコード
const url = "https://example.com/search?q=hello world";
const encodedUrl = encodeURI(url);
console.log(encodedUrl); // "https://example.com/search?q=hello%20world"
3. HTMLエンティティエンコーディング
概念
HTMLで特殊文字を安全に表示するためのエンコーディングです。
主なエンティティ
- < → <
- > → >
- & → &
- " → "
- ' → '
使用例
hljs html
<!-- ユーザー入力を安全に表示 -->
<p><script>alert('XSS')</script></p>
4. JSONエンコーディング
概念
JavaScriptオブジェクトをJSON文字列に変換する方法です。
特徴
- データ交換に広く使用
- UTF-8エンコーディングを使用
- ネストされたオブジェクトと配列をサポート
使用例
hljs javascript
const data = {
name: "John Doe",
age: 30,
hobbies: ["reading", "movies"]
};
const jsonString = JSON.stringify(data);
console.log(jsonString);
// {"name":"John Doe","age":30,"hobbies":["reading","movies"]}
const parsed = JSON.parse(jsonString);
console.log(parsed.name); // "John Doe"
5. Unicodeエンコーディング
概念
コンピュータで多言語文字を処理するための標準です。
主なエンコーディング方法
- UTF-8: 最も広く使用、可変長
- UTF-16: 2バイトまたは4バイト
- UTF-32: 固定4バイト
使用例
hljs javascript
// Unicodeエスケープシーケンス
const unicode = "\uD55C\uAD6D"; // "한국"
console.log(unicode); // "한국"
// UTF-8バイトチェック
const text = "こんにちは";
const bytes = new TextEncoder().encode(text);
console.log(bytes); // Uint8Array
エンコーディング選択ガイド
状況別の推奨
- メール添付: Base64
- URLパラメータ: URLエンコーディング
- APIデータ交換: JSON
- HTML出力: HTMLエンティティ
- 多言語サポート: UTF-8
セキュリティ上の考慮事項
1. エンコーディング≠暗号化
- エンコーディングは単なるデータ変換であり、セキュリティ機能ではない
- 機密データは暗号化する必要がある
2. XSS防止
- ユーザー入力をHTMLに出力する際は適切なエンコーディングが必要
- innerHTMLの代わりにtextContentを使用
3. エンコーディング攻撃の防止
- 二重エンコーディング攻撃に注意
- 入力検証と出力エンコーディングの両方が必要
まとめ
適切なエンコーディング方法を選択し、正しく実装することはWeb開発の基本です。状況に応じて適切なエンコーディングを使用し、安全で効率的なアプリケーションを開発しましょう。