JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法
以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリのソースコードを拝見すると「pako」という別のライブラリを利用しデータ圧縮をしているようだった。「pako」を試してみたいので文字列及びオブジェクト(連想配列)をGzip圧縮・展開する方法をメモ。
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」というライブラリを併用しているため、こちらも利用しないとあんまり圧縮されないのかも。
関連記事
-
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...
-
-
JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法
文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...
-
-
JavaScriptでフォームのバリデート時に便利な「validator.js」ライブラリの利用方法
JavaScriptでフォームのバリデートを行う際、「半角英数字 正規表現」等で ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...