encoding / binary

Base64 エンコード / デコード

テキストをBase64形式にエンコード・デコードします。日本語(UTF-8)に対応し、URL-safeモードも選択できます。

使い方

01
  1. 「エンコード」または「デコード」タブを選択してください
  2. テキストエリアに入力すると、リアルタイムで変換結果が表示されます
  3. エンコード時は「URL-safe」オプションで +→-、/→_ の変換とパディング除去が行われます
  4. 「コピー」ボタンで変換結果をクリップボードにコピーできます

実装コード

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(/=+$/, '')
}

よくある使用例・注意点

03
JWT(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
URLエンコード — 準備中JSONフォーマッター文字数カウンター

ソースコード

05

このツールのソースコード(テストコードを含む)はGitHubで公開しています。 MITライセンスで自由に利用・改変できます。

GitHub でコードを見る →