🔄

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

公開日
約1年前
2023-10-16
更新日
5か月前
2024-07-23
更新履歴

この記事について

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))))

encodedData44GT44KT44Gr44Gh44Gv になります。

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('こんにちは')))

encodedData44GT44KT44Gr44Gh44Gv になります。

escapeを使うUnicode文字列のデコード

const decodedData = decodeURIComponent(escape(atob(encodedData)))

decodedDataこんにちは になります。