APIのトークン、データURI（data: スキーム）、Basic認証ヘッダー、メールの添付——Base64にエンコード／デコードしたい場面は地味によくあります。この記事では、

コードで変換する方法（JavaScript / Python / コマンドライン）
コードを書かずにコピペで一発変換する方法

を、そのまま使える形でまとめます。特に JavaScriptで日本語が文字化けする“あるある” の正しい対処も載せます。

この記事のゴール：日本語（UTF-8）を含むテキストを、正しくBase64にエンコード／デコードできるようになること。

前提：Base64とは（30秒で）

Base64は、任意のデータを 英数字と一部記号（A–Z a–z 0–9 + /）だけで表現する符号化方式です。テキストしか扱えない場所（URL・JSON・メールヘッダーなど）に、バイナリや多言語テキストを埋め込むときに使います。

3バイトを4文字に変換するため、サイズは約1.33倍に増えます
⚠️ Base64は暗号化ではありません。誰でも復号できるので、パスワード等の秘匿には使えません（あくまで“符号化”）

方法1：JavaScriptで変換する

まず、よくある失敗

JavaScriptには標準の btoa() / atob() がありますが、日本語を渡すとエラーになります。

btoa("こんにちは");
// ❌ Uncaught DOMException: Failed to execute 'btoa' ...

btoa は「1文字＝1バイト」の前提なので、マルチバイトのUTF-8をそのまま渡せないためです。

正しい実装（UTF-8対応）

TextEncoder / TextDecoder でUTF-8のバイト列を挟むのが、現在の定番です。

// エンコード：文字列 → Base64
function toBase64(str) {
  const bytes = new TextEncoder().encode(str);          // UTF-8のバイト列に
  let bin = "";
  bytes.forEach((b) => (bin += String.fromCharCode(b)));
  return btoa(bin);
}

// デコード：Base64 → 文字列
function fromBase64(b64) {
  const bin = atob(b64);
  const bytes = Uint8Array.from(bin, (ch) => ch.charCodeAt(0));
  return new TextDecoder().decode(bytes);                // UTF-8として復元
}

console.log(toBase64("こんにちは"));        // 44GT44KT44Gr44Gh44Gv
console.log(fromBase64("44GT44KT44Gr44Gh44Gv")); // こんにちは

URLセーフ形式にする

+ / はURLで意味を持つので、トークンやクエリに入れるときは - _ に置き換え、末尾のパディング = を除きます。

function toBase64Url(str) {
  return toBase64(str)
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");
}

方法2：Pythonで変換する

標準ライブラリの base64 だけでできます。ポイントは、文字列は必ず encode("utf-8") でバイト列にしてから渡すことです。

import base64

s = "こんにちは"

# エンコード（bytes → Base64のbytes → str）
enc = base64.b64encode(s.encode("utf-8")).decode("ascii")
print(enc)  # 44GT44KT44Gr44Gh44Gv

# デコード
dec = base64.b64decode(enc).decode("utf-8")
print(dec)  # こんにちは

# URLセーフ形式
url_safe = base64.urlsafe_b64encode(s.encode("utf-8")).decode("ascii")
print(url_safe)

b64encode は「bytes → bytes」を返します。人が読む文字列にしたいときは最後に .decode("ascii") を付けるのがコツです。

方法3：コマンドラインで変換する（macOS / Linux）

ちょっと確認したいだけなら、ターミナルが速いです。-n を付けて末尾の改行を含めないのがポイント。

# エンコード
echo -n "こんにちは" | base64
# 44GT44KT44Gr44Gh44Gv

# デコード（-d または --decode）
echo -n "44GT44KT44Gr44Gh44Gv" | base64 -d
# こんにちは

ファイルをまるごとBase64にするなら base64 input.png > output.txt のように使えます。

方法4：コピペで一発変換（コードを書きたくない時）

「1回だけ変換したい」「日本語がちゃんと通るか確認したい」なら、貼り付けるだけのツールが速いです。

私が作っている Morphy のBase64ツールなら、

テキストを貼り付けてボタンひとつでエンコード／デコード
日本語（UTF-8）・絵文字もそのまま正しく変換（btoaのハマりどころを気にしなくてOK）
URLセーフ形式にワンチェックで切り替え
処理はすべてブラウザ内で完結し、データは外部に送信されません（社内のトークンでも安心）

登録不要・無料です。

👉 Base64エンコード・デコードツール：https://morphytools.com/base64.html

補足：Base64はどんな場面で使う？

データURI：data:image/png;base64,iVBORw0... のように画像をHTML/CSSへ直接埋め込む
Basic認証：Authorization: Basic の後ろは ユーザー名:パスワード をBase64にしたもの（※暗号化ではないのでHTTPS必須）
JWT：ヘッダーとペイロードはBase64URLでエンコードされている（中身は誰でも読める）

いずれも「暗号化ではない」点に注意すれば、扱いやすい符号化方式です。

まとめ

状況	おすすめの方法
Webアプリに組み込む	JavaScript（`TextEncoder`でUTF-8対応）
バッチ・スクリプトで処理	Python（`base64`モジュール）
ターミナルでサッと確認	`base64` コマンド
1回だけ・日本語の確認	コピペできる無料ツール

特にJavaScriptは、btoa("日本語") がそのままでは動かないのがハマりどころです。UTF-8のバイト列を挟む実装を覚えておくと安心です。

この記事が、Base64変換の「あれ、動かない…」を減らせたら嬉しいです。