任意のデータとBase64の相互変換.js - AyaExpTech

任意のデータとBase64の相互変換.js

2025-10-04再執筆: Uint8Arrayでできるようになりました！！

Chrome 140 / Edge 140 / Firefox 133 / Safari 18.2 / Deno 2.5 / Bun 1.1.12以降で使用可能です。(Node.jsはまだっぽい？)

Base64文字列との相互変換は一度Uint8Arrayを経由する想定のようです。

TL;DR.

文字列 → Base64文字列

code:fn_string_to_base64.js

const string_to_base64 = (string) => new TextEncoder().encode(string).toBase64();

const string_to_base64url = (string) => new TextEncoder().encode(string).toBase64({ alphabet: "base64url", omitPadding: true }));

Base64文字列 → 文字列

code:fn_base64_to_string.js

const base64_to_string = (base64) => new TextDecoder().decode(Uint8Array.fromBase64(base64));

const base64url_to_string = (base64) => new TextDecoder().decode(Uint8Array.fromBase64(base64, { alphabet: "base64url" }));

Blob/File → Base64文字列

code:fn_blob_to_base64.js

const blob_to_base64 = async (blob) => Uint8Array.from(await blob.arrayBuffer()).toBase64();

const blob_to_base64url = async (blob) => Uint8Array.from(await blob.arrayBuffer()).toBase64({ alphabet: "base64url", omitPadding: true }));

Base64文字列 → Blob

code:fn_base64_to_blob.js

const base64_to_blob = (base64) => new Blob(Uint8Array.fromBase64(base64));

const base64url_to_blob = (base64) => new Blob(Uint8Array.fromBase64(base64, { alphabet: "base64url" }));

Base64文字列 → File

code:fn_base64_to_file.js

const base64_to_file = (base64, fileName, options = undefined) => new File(Uint8Array.fromBase64(base64), fileName, options);

const base64url_to_file = (base64, fileName, options = undefined) => new File(Uint8Array.fromBase64(base64, { alphabet: "base64url" }), fileName, options);

Uint8Array → Base64文字列

Uint8Array.prototype.toBase64()があり、これで一発で変換できます

code:uint8array_to_base64.js

const uint8array = /*...*/;

const base64_str = uint8array.toBase64();

なお、Base64URLを使用する(+, /の代わりに-, _を使い、末尾のパディング=を消す)場合、そのためのオプションがあります

code:uint8array_to_base64.js

const uint8array = /*...*/;

const base64url_str = uint8array.toBase64({ alphabet: "base64url", omitPadding: true });

Base64文字列 → Uint8Array

Uint8Array.fromBase64()があり、これで一発で変換できます

code:base64_to_uint8array.js

const base64_str = /*...*/;

const uint8array = Uint8Array.fromBase64(base64_str);

Base64URLを使用する場合、オプションでその旨を指定する必要があります

code:base64_to_uint8array.js

const base64url_str = /*...*/;

const uint8array = Uint8Array.fromBase64(base64url_str, { alphabet: "base64url" });

末尾の=の有無は何もしなくてもどっちも対応してくれるっぽいです

オプションで「4文字ごとで区切って最後の塊が不足している場合はそこだけ無視する」ということができます。Base64文字列をストリームで渡すときに途中まで読みたい、みたいなケースを考えているっぽい

文字列 → Uint8Array

TextEncoder.prototype.encode()があり、これで一発で変換できます

code:string_to_uint8array.js

const string = /*...*/;

const uint8array = new TextEncoder().encode(string);

文字コードはutf-8です

Uint8Array → 文字列

TextDecoder.prototype.decode()があり、これで一発で変換できます

code:uint8array.js

const uint8array = /*...*/;

const string = new TextDecoder().decode(uint8array);

コンストラクターの第一引数に文字コードラベルを指定できますが、デフォルト値が"utf-8"なのでわざわざ指定しなくていいと思います

Blob ←→ Uint8Array

Blob→Uint8Arrayは「Blob→ArrayBuffer→Uint8Array」となります

Blob→ArrayBuffer: Blob.prototype.arrayBuffer()がArrayBufferに解決するPromiseを返します。

ArrayBuffer→Uint8Array: Uint8Array.from()がArrayBufferを取れます

Uint8Array→Blobは、new Blob()がUint8Arrayを含む配列を取れるので直接変換できます

その他いろいろ

Fileとの変換

FileはBlobを継承しているので、Blobと同様の手順でUint8Arrayにできます

new File([uint8array], fileName)でUint8Array→Fileもできます。第3引数optionsでMIMEタイプを指定できます(MDNを読んでくれ)