JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリのソースコードを拝見すると「pako」という別のライブラリを利用しデータ圧縮をしているようだった。「pako」を試してみたいので文字列及びオブジェクト(連想配列)をGzip圧縮・展開する方法をメモ。

pako

公式サイト

http://nodeca.github.io/pako/

GitHub

https://github.com/nodeca/pako

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/pako@2.1.0/dist/pako.min.js"></script>

利用方法

文字列の圧縮・展開

<script>
const data = `Webエンジニア / プログラマが勉強したことのメモ。`;

const encode_data = btoa(String.fromCharCode.apply(null, pako.gzip(data)));
console.log(encode_data); //H4sIAAAAAAAAAwXBoQ2AMBRF0VW6AePgSdiD/58ixSHqIFQVASFBgGCbm+7BOW3f4QXd+IsinkMTUEIHfqEdLdhU41i/B0vYis1YwU60oczgPyyXzMJFAAAA

const decode_data = pako.ungzip(new Uint8Array(Array.prototype.map.call(atob(encode_data), c => c.charCodeAt())), { to: 'string' });
console.log(decode_data); //Webエンジニア / プログラマが勉強したことのメモ。
</script>

オブジェクト(連想配列)の圧縮・展開

<script>
const data = {id: 10, name: '山田', name_en: 'yamada', regist: '2024-01-01'};

const encode_data = btoa(String.fromCharCode.apply(null, pako.gzip(JSON.stringify(data))));
console.log(encode_data); //H4sIAAAAAAAAA6tWykxRsjI00FHKS8xNVbJSerpx4/MpG5Qg/PjUPKBQZWJuYkoiUKgoNT2zuAQoYmRgZKJrYAhESrUAPeXeOkIAAAA=

const decode_data = JSON.parse(pako.ungzip(new Uint8Array(Array.prototype.map.call(atob(encode_data), c => c.charCodeAt())), { to: 'string' }));
console.log(decode_data); //Object { id: 10, name: "山田", name_en: "yamada", regist: "2024-01-01" }
</script>

所感

Gzip圧縮してみたものの、あんまり圧縮されている感じがしない。「zcookie」内では「msgpack」というライブラリを併用しているため、こちらも利用しないとあんまり圧縮されないのかも。