btoa()およびatob()の代替

JavaScript React

概要

btoa()およびatob()はMDNにおいて非推奨


ASCII文字列しか対応していないため引数に日本語を与えたりするとエラーになる
developer.mozilla.org

 

対策

input属性のフォームから受け取った値をエンコード/デコードして返すサンプル

as-is

import React, { useState } from 'react';

const [text, setText] = useState('');

  const Encode = (e:any) => {
    setText(() => (btoa(e.target.value)));
  }

  const Decode = (e:any) => {
    setText(() => (atob(e.target.value)));
  }
 

to-be

Bufferを利用する形に変更

import React, { useState } from 'react';
import { Buffer } from 'buffer';

const [text, setText] = useState('');

  const Encode = (e:any) => {
    setText(() => (Buffer.from(e.target.value).toString('base64')));
  }

  const Decode = (e:any) => {
    setText(() => (Buffer.from(e.target.value, 'base64').toString('ascii')));
  }