encoding / binary
Base64 エンコード / デコード
テキストをBase64形式にエンコード・デコードします。日本語(UTF-8)に対応し、URL-safeモードも選択できます。
使い方
01- 「エンコード」または「デコード」タブを選択してください
- テキストエリアに入力すると、リアルタイムで変換結果が表示されます
- エンコード時は「URL-safe」オプションで
+→-、/→_の変換とパディング除去が行われます - 「コピー」ボタンで変換結果をクリップボードにコピーできます
実装コード
02ブラウザ標準の TextEncoder / TextDecoder と btoa / atob のみで実装。外部ライブラリ不要でそのままコピーして利用できます。
// エンコード: TextEncoder → Uint8Array → binary string → btoa
export function encodeBase64(input: string): string {
const bytes = new TextEncoder().encode(input)
const binary = String.fromCharCode(...bytes)
return btoa(binary)
}
// デコード: atob → binary string → Uint8Array → TextDecoder
export type DecodeResult =
| { ok: true; output: string }
| { ok: false; error: string }
export function decodeBase64(input: string): DecodeResult {
try {
const binary = atob(input)
const bytes = new Uint8Array([...binary].map(c => c.charCodeAt(0)))
const output = new TextDecoder().decode(bytes)
return { ok: true, output }
} catch {
return { ok: false, error: '無効なBase64文字列です。' }
}
}
// URL-safe: + → -、/ → _、パディング除去
export function encodeBase64UrlSafe(input: string): string {
return encodeBase64(input)
.replace(/\+/g, '-')
.replace(/\//g, '_')
.replace(/=+$/, '')
}よくある使用例・注意点
03JWT(JSON Web Token)の構造確認
JWTはヘッダー・ペイロード・署名の3パートをBase64 URL-safe形式で表現しています。「.」で分割した各パートをデコードタブに貼り付けると内容を確認できます。署名の検証はできませんが、ペイロードの確認に便利です。
APIキーや設定値のエンコード
HTTP Basic認証では「username:password」をBase64エンコードしてAuthorizationヘッダーに付与します。エンコードは暗号化ではないため、機密情報をBase64エンコードしても安全性は向上しません。
バイナリデータのテキスト転送
メール(MIME)や画像のData URL(data:image/png;base64,...)など、バイナリデータをテキストベースのプロトコルで転送する際にBase64が使われます。エンコードすると元のデータより約33%サイズが増加します。
日本語を含む文字列のエンコード
ブラウザ標準の btoa() はASCIIのみ対応のため、日本語をそのまま渡すとエラーになります。このツールではTextEncoderでUTF-8バイト列に変換してからbtoaを呼ぶことで日本語にも対応しています。
URL-safeとの使い分け
標準Base64の「+」「/」はURLのクエリパラメータ内で特殊な意味を持ちます。URLやCookie値にBase64を埋め込む場合は「+→-、/→_」に変換したURL-safe形式を使用してください。
関連ツール
04ソースコード
05このツールのソースコード(テストコードを含む)はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。
GitHub でコードを見る →