TypeScriptのBase64のエンコードとデコード

この記事について

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 は こんにちは になります。

TypeScriptのBase64のエンコードとデコード

最近公開された記事