はじめに

ブラウザで Node.js の Buffer (相当) を使う方法を整理した。

なお、この記事で紹介するのは CDN から読み込んで使う方法なことに注意。

TL;DR

  • <script src="https://bundle.run/buffer"></script> を使う
    • jsDelivr のもの(https://cdn.jsdelivr.net/npm/buffer@5.4.3/index.min.js)だと NG
  • buffer.Buffer でアクセス
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. ブラウザで Buffer を使う
    2. 使用例
  5. まとめ
  6. 参考文献

環境・条件

Google Chrome バージョン: 78.0.3904.108（Official Build） （64 ビット）

詳細

ブラウザで Buffer を使う

ブラウザで Node.js の Buffer (相当)を利用するには、feross/buffer を使うと良い。

が、jsDelivr から配信されているスクリプトは require が使えることが前提(npmjs のコードそのまま)となっており、以下のようにしてもエラーになる。

buffer - jsDelivr

1
<script src="https://cdn.jsdelivr.net/npm/buffer@5.4.3/index.min.js"></script>

では、browserify などを使わないとだめかと言うとそんなことはなくて、install - feross/buffer をちゃんと読むと、以下がひっそりと書かれている。

If you do not use a bundler, you can use the standalone script.

この standalone script のリンク先 https://bundle.run/buffer を script タグで読み込むと、Buffer 相当が使えるようになる。

1
<script src="https://bundle.run/buffer"></script>

使用例

buffer.Buffer でアクセスできるので、以下のような感じで使う。

1
2
3
const txt = 'hoge';
const encoded = buffer.Buffer.from(txt).toString('base64');
const decoded = buffer.Buffer.from(encoded, 'base64').toString();

入力値を base64 エンコード/デコード するサンプル。


See the Pen Buffer using CDN by 17num (@17num) on CodePen.


まとめ

  • <script src="https://bundle.run/buffer"></script> を使う
    • jsDelivr のもの(https://cdn.jsdelivr.net/npm/buffer@5.4.3/index.min.js)だと NG
  • buffer.Buffer でアクセス

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list