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変換の「あれ、動かない…」を減らせたら嬉しいです。