この記事について
TypeScript/JavascriptでBase64のエンコードまたはデコードをする方法を紹介しています。Node.jsの場合はBufferを、それ以外の場合はTextEncoderとTextDecoderを使うことをおすすめします。
Bufferを使用する場合
Node.jsの場合はBufferを使用できます。次のようにimportします。
import { Buffer } from 'buffer'Bufferを使ったエンコード
const encodedData = Buffer.from('Hello, world').toString('base64')Bufferを使ったエンコード （URL safe）
URL safeなBase64エンコードの場合は以下のように base64url を指定します。クライアント側で動かす場合など、利用できない環境があります。
const encodedData = Buffer.from('Hello, world').toString('base64url')Bufferを使ったデコード
const decodedData = Buffer.from(encodedData, 'base64').toString()Bufferを使ったデコード （URL safe）
URL safeなBase64デコードの場合は以下のように base64url を指定します。クライアント側で動かす場合など、利用できない環境があります。
const decodedData = Buffer.from(encodedData, 'base64url').toString()Bufferを使用しない場合
Bufferを使用しない場合はbtoa、atobを使用します。
btoaによるエンコード
const encodedData = btoa('Hello, world')atobによるデコード
const decodedData = atob(encodedData)Unicode文字列を扱う場合 その1 (TextEncoderとTextDecoderを使う)
btoaとatobはASCII文字列しか対応していないので、Unicode文字列を扱う場合は以下のようにします。
TextEncoderを使うエンコード
const str = 'こんにちは'
const encodedData = btoa(String.fromCharCode(...Array.from(new TextEncoder().encode(str))))encodedData は 44GT44KT44Gr44Gh44Gv になります。
TextDecoderを使うデコード
const encodedData = '44GT44KT44Gr44Gh44Gv'
const decodedData = new TextDecoder().decode(
Uint8Array.from(atob(encodedData), (c) => c.charCodeAt(0))
)decodedData は こんにちは になります。
Unicode文字列を扱う場合 その2 (unescapeとescapeを使う)
btoaとatobはASCII文字列しか対応していないので、Unicode文字列を扱う場合は以下のようにします。
Warning
unescapeとescapeの使用は好ましくないとされているので、前述のTextEncoderとTextDecoderを使う方法をおすすめします。
参考資料:
unescapeを使うUnicode文字列のエンコード
const encodedData = btoa(unescape(encodeURIComponent('こんにちは')))encodedData は 44GT44KT44Gr44Gh44Gv になります。
escapeを使うUnicode文字列のデコード
const decodedData = decodeURIComponent(escape(atob(encodedData)))decodedData は こんにちは になります。
