Base64・URLエンコード・HTMLエンティティ：すべての開発者が知っておくべきエンコード基礎知識
Web開発をしていると、エンコード問題に必ず直面します。& が原因でURLが壊れる。HTMLページで < がそのまま表示されてしまう。APIが SGVsbG8gV29ybGQ= という謎の文字列を返してくる。これらはすべてエンコードの問題であり、特によく登場するのが「Base64」「URLエンコード」「HTMLエンティティ」の3つです。
本記事では、それぞれの仕組みを具体例で解説し、インストール不要で使える無料オンラインツールも紹介します。
Base64とは？
Base64は、バイナリデータを印刷可能なASCII文字だけで表現するエンコード方式です。任意のバイト列を A–Z、a–z、0–9、+、/ の64文字アルファベットにマッピングします。出力は常にテキストなので、バイナリを直接扱えない場面でも安全に利用できます。メール添付ファイル、JSONペイロード、CSSの data: URL、JWTトークンはすべてBase64を活用しています。
例 ——「Hello World」をエンコードする：
- 入力：
Hello World - Base64出力：
SGVsbG8gV29ybGQ=
末尾の = はパディングです。Base64の出力長は必ず4の倍数になります。
使いどころ：
- 画像やフォントをCSSやHTMLに直接埋め込む（
data:image/png;base64,...） - テキストしか受け付けないJSON APIにバイナリデータを渡す
- JWTトークンの読み書き（ヘッダーとペイロードはBase64urlでエンコードされている）
Base64は暗号化ではありません。文字列を見た人は数秒でデコードできます。情報隠蔽ではなく、エンコードの手段として使いましょう。
FileCrankのBase64エンコード・デコードツールで今すぐ試せます。
URLエンコード（パーセントエンコーディング）とは？
URLには安全に使える文字セットに制限があります。スペース、&、=、/、非ASCII文字はURLの構造的な意味を持つか、そもそも使用不可です。URLエンコード（正式名称はパーセントエンコーディング）は、安全でない文字を % に続く2桁の16進数（UTF-8バイト値）で置き換えます。
例 ——「Hello World」をURLエンコードする：
- 入力：
Hello World - URLエンコード後：
Hello%20World
スペースは %20 に、& は %26 に、/ は %2F になります。
使いどころ：
- クエリ文字列の構築：
?q=hello%20world&lang=ja - フォームデータに特殊文字を含める
- ユーザー入力を含むAPIリクエストの構築
JavaScriptには encodeURIComponent() がありますが、エンコード済みURLをデバッグしたいときはオンラインツールのほうが素早く確認できます。
FileCrankのURLエンコード・デコードツールを使ってみてください。
HTMLエンティティとは？
HTMLはいくつかの文字を構文として使用します。< と > はタグの区切り、& はエンティティ参照の開始、" は属性値の区切りです。コードサンプルをページに表示したい場合など、これらの文字をそのまま表示したいときはエスケープが必要です。エスケープしないと、ブラウザがその文字をマークアップとして解釈してしまいます。
HTMLエンティティは、これらの文字を名前付き参照または数値参照で置き換えます：
例 ——HTMLタグを文字列として表示する：
ページ上で <h1>Hello World</h1> という文字列をそのまま表示するには、こう書きます：
<h1>Hello World</h1>
使いどころ：
- ドキュメントやブログでのコードサンプル表示
- ユーザー入力をHTMLに挿入する前にエスケープしてXSSを防止する
- 記号の挿入（
—、©、 など）
FileCrankのHTMLエンティティツールでエスケープ・アンエスケープを素早く行えます。
3つのエンコード方式を比較する
同じ入力に対する各方式の出力：
3つはそれぞれ異なる問題を解決しており、互換性はありません：
- Base64：バイナリデータをテキストに変換する。テキストのみの環境にバイナリを埋め込む必要があるときに使う。
- URLエンコード：URLで使えない・意味が曖昧な文字を処理する。URLやクエリ文字列を構築するときに使う。
- HTMLエンティティ：HTMLの構文で予約された文字を処理する。HTMLドキュメントにテキストを出力するときに使う。
よくある間違い
間違い1：Base64をセキュリティ目的で使う。 Base64の出力は一見ランダムに見えますが、誰でも即座にデコードできます。パスワードやトークンを「隠す」ために使わないでください。適切な暗号化またはハッシュを使用しましょう。
間違い2：URLの二重エンコード。
すでにエンコードされた文字列に encodeURIComponent() を適用すると、%20 が %2520 になります。まずデコードしてから、再エンコードしてください。
間違い3：テンプレートでHTMLエスケープを忘れる。 ユーザー入力をエスケープせずにHTMLに直接挿入することは、XSS脆弱性の最大の原因です。レンダリング前に必ずエスケープしてください。
ツールを使ってみる
3つのツールはすべて無料、ブラウザ上で完結し、アカウント登録不要です：
ブックマークしておくと便利です。毎週どれか1つは使うことになるはずです。