JavaScript: CompressionStreamを記る!

またつまらぬものを記ってしまったかどうかは定かではないかもしれませんが、browserで組み込み圧縮伸長関数が実装されているので紹介します。その実態はdeflateとその包括形式であるgzipとなります。非常に高速ですが地味に使いにくく、圧縮加減も指定できないという、とても素晴らしい仕様となっております(gzip -9より低圧縮)。
まずどう不便かと言うとObjectを複数作る必要がある点と、Promiseを経由する必要がある点です。面倒臭い仕様と言わざるを得ません。単純に書くと以下のようになります。

(async()=>{
	var c=new CompressionStream("gzip"),//"deflate", "deflate-raw"も可
	w=c.writable.getWriter();
	//圧縮したいArrayBufferを渡す
	w.write(new Uint8Array([84,104,97,116,32,116,104,97,116,32]));
	//追加も可
	w.write(new Uint8Array([105,115,32,105,115,32,116,104,97,116,32,116,104,97,116]));
	//終了. 以後追記不可
	w.close();
	//圧縮後のArrayBuffer取得
	c=await new Response(c.readable).arrayBuffer();

	//伸長処理
	var d=new DecompressionStream("gzip");
	w=d.writable.getWriter();
	w.write(c);
	w.close();
	d=await new Response(d.readable).arrayBuffer()
})()

それではこの組み込み関数様を使ってbrowser式file圧縮伸長programを書いてみましょう。

<input id=g type=checkbox>gzip
<input id=d type=checkbox>inflate
<input id=f type=file><script>
f.onchange=a=>{
	with(new FileReader)
		readAsArrayBuffer(f.files[0]),
		onload=async(a,b,c)=>{
			b=new(d.checked?DecompressionStream:CompressionStream)(g.checked?"gzip":"deflate"),
			c=b.writable.getWriter(a=new Uint8Array(result)),c.close(c.write(a)),
			e.href=URL.createObjectURL(new Blob([new Uint8Array(await new Response(b.readable).arrayBuffer())]))
		}
}
</script><a id=e download>DL

実はもっと単純に書けます

(async()=>{
	//圧縮させるArrayBuffer
	var c=new Uint8Array([84,104,97,116,32,116,104,97,116,32]);
	//圧縮
	c=await new Response(new Blob([c]).stream().pipeThrough(new CompressionStream("gzip"))).arrayBuffer();
	//伸長
	c=await new Response(new Blob([c]).stream().pipeThrough(new DecompressionStream("gzip"))).arrayBuffer();
})()

<select id=s>
	<option>deflate-raw<option>deflate<option>gzip
</select>
<input id=d type=checkbox>decode
<input id=f type=file>
<script>
f.onchange=a=>{
	with(new FileReader)
		readAsArrayBuffer(f.files[0]),
		onload=async a=>e.href=URL.createObjectURL(new Blob([await new Response(new Blob([result]).stream().pipeThrough(new(d.checked?DecompressionStream:CompressionStream)(s.options[s.selectedIndex].text))).arrayBuffer()]))
}
</script><a id=e download>DL

動作検証

See the Pen deflate/gzip/inflate test by xezz (@xezz) on CodePen.

更に短縮

制御文字が山盛りなのでbase64形式です。元は351 bytes。復号してhtmlとして扱います

PHN2ZyBvbmxvYWQ9J2ZvcihhPWByZRJvbhFmaWxlEGVjD2NoD2sOdBJhbQxpbnB1dAtzZWwPdAkgaWQ9CDxvcHRpET4HbmV3IAY8CyB0eXBlPQUoBkJsb2IoW2FdKQQHZGVmbGF0ZQNvbXASc3NpEVMMAi5hcnJheUJ1ZmZlcigpLnRoZW4oYT0+ATwJCHM+Ay1yYXcDB2d6aXA8Lwk+BQ5ib3gIZD5kD29kZQUQIBELPSIQc1swXQEGUmVzcBFzZQQucwwoKS5waXBlVGhyb3VnaCgGKGQuDmVkP0QPAjpDAikocy52YWx1ZSkpKQFlLmgSZj1zZWxmLlVSTC5jEmF0ZU9iag90VVJMBCkpKSI+PGEIZSBkb3dubG9hZD4GYDt0PS9bAS0SXS8uZXhlYyhhKTspd2l0aChhLnNwbGl0KHQpKWE9am9pbihzaGlmdCgpKTt3cml0ZShhKSc+

textareaとの連携

textareaに入力した文字列を圧縮してfileに保存したり、fileを展開してtextareaにぶちまけたりする。UTF8限定

<textarea cols=99 rows=7 id=t></textarea><br>
<select id=s><option>deflate-raw<option>deflate<option>gzip</select>
<input type=button value=Compression onclick="a=t.value;new Response(new Blob([a]).stream().pipeThrough(new CompressionStream(s.value))).arrayBuffer().then(a=>e.href=self.URL.createObjectURL(new Blob([a])))"><a id=e download>DL</a>
Decompression<input type=file oninput="files[0].arrayBuffer().then(a=>new Response(new Blob([a]).stream().pipeThrough(new DecompressionStream(s.value))).arrayBuffer().then(a=>t.value=new TextDecoder().decode(a)))">

421bytesに圧縮+base64

PHN2ZyBvbmxvYWQ9J2ZvcihhPWBlYxcXb2RlFmZpbGUVPjwUaW5wdXQTKCkuEnNlbBFyZWEQdGV4dGEQD29uDiBpZD0MPG9wdGkOPgsLZGVmbGF0ZQluZXcgCCgIQmxvYihbYV0pBzwTIHR5cGU9BnZhbHVlBW9tcHJlc3NpDgQuYXJyYXlCdWZmZXISdGhlbihhPT4DBFN0EG0ocy4FKSkpAwIIUmVzcA5zZQcuc3QQbRJwaXBlVGhyb3VnaCgIATwPIGNvbHM9OTkgcm93cz03DHQULw8UYnIUERd0DHM+CS1yYXcJC2d6aXA8LxEXdD5EFwQGFSAOEz0iFXNbMF0DAUQXAnQuBT0IVGV4dEQWchJkFihhKSkpIj4GYnV0dA4gBT1DBCAOY2xpY2s9ImE9dC4FOwFDAmUuaHJlZj0RZi5VUkwuYxB0ZU9iahd0VVJMBykpIhRhDGUgZG93bmxvYWQ+CGA7Xz0vWwEtF10vLmV4ZWMoYSk7KXdpdGgoYS5zcGxpdChfKSlhPWpvaW4oc2hpZnQoKSk7d3JpdGUoYSknPg