JavaScriptでArrayBuffer<->Base64URLの変換をおこなう

最近、JavaScriptを使ったArrayBufferとBase64URLの変換をちょくちょくおこなうようになりました。 調べてみるとやり方はちゃんと書いてあるものの、色々な実装方法があったり、サイトが散らばっていたりと毎回調べ直すのが面倒くさかったので、この記事でまとめておくことにしました。
(もっと良い実装はあるかもしれないけれど。。。)

JavaScriptを利用したNode.jsでの実装とブラウザでの実装をそれぞれまとめます。 また、Base64との変換、Stringとの変換もまとめました。

※2023/10/12編集:ブラウザでのArrayBufferとBase64URLまたはBase64との変換のコードを修正しました。Uint16Arrayを使うと文字数(バイト数)の都合で変換できないケースがあるため、Uint8Arrayを使うようにしました。

Node.js

Node.jsでのArrayBufferとBase64URLの変換はbase64urlモジュールをnpm installして利用します。 Base64からの変換もしくはBase64への変換は、同モジュールのfromBase64およびtoBase64を利用すればよいでしょう。

実装は以下のとおりです。

ついでにArrayBufferとStringの変換は以下の通りです。

ブラウザ

ブラウザでのArrayBufferとBase64URLまたはBase64との変換は以下の通りです。

ArrayBufferとStringの変換は以下のようになります。

おまけとして、ブラウザの方はCodePenで楽に実行環境がつくれたので貼っておきます。
変換結果がコンソールに出力されるようになっています。