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対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...
-
-
JavaScriptで配列やオブジェクトの中身をブラウザに表示する方法
JavaScriptで配列やオブジェクトの中身を確認したい場合、console. ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
ブラウザ上で画像の切り抜き等編集を行う方法(Cropper.js)
あるサイトで画像をアップロードし、その画像に対してブラウザ上で切り抜き等トリミン ...
-
-
JavaScriptで簡単にURL操作が行える「domurl」ライブラリの利用方法
JavaScriptでGETパラメータやURLを操作する際にsplitで配列に分 ...