テキストデータの圧縮と展開

以下の例では、テキストデータを圧縮し、その後展開する方法を示しています：

async function compressAndDecompress(text) {
  // テキストをUint8Arrayに変換
  const encoder = new TextEncoder();
  const data = encoder.encode(text);
  
  // データを圧縮
  const compressedStream = new CompressionStream('gzip');
  const writer = compressedStream.writable.getWriter();
  writer.write(data);
  writer.close();
  
  // 圧縮されたデータを収集
  const reader = compressedStream.readable.getReader();
  const chunks = [];
  
  for (;;) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  
  // 圧縮されたデータをマージ
  const compressedData = new Uint8Array(
    chunks.reduce((acc, chunk) => acc + chunk.length, 0)
  );
  
  let offset = 0;
  for (const chunk of chunks) {
    compressedData.set(chunk, offset);
    offset += chunk.length;
  }
  
  console.log(`元のサイズ: ${data.length} バイト`);
  console.log(`圧縮後のサイズ: ${compressedData.length} バイト`);
  
  // 圧縮されたデータを展開
  const decompressedStream = new DecompressionStream('gzip');
  const decompressWriter = decompressedStream.writable.getWriter();
  decompressWriter.write(compressedData);
  decompressWriter.close();
  
  // 展開されたデータを収集
  const decompressReader = decompressedStream.readable.getReader();
  const decompressedChunks = [];
  
  for (;;) {
    const { done, value } = await decompressReader.read();
    if (done) break;
    decompressedChunks.push(value);
  }
  
  // 展開されたデータをマージして返却
  const decompressedData = new Uint8Array(
    decompressedChunks.reduce((acc, chunk) => acc + chunk.length, 0)
  );
  
  let decompressOffset = 0;
  for (const chunk of decompressedChunks) {
    decompressedData.set(chunk, decompressOffset);
    decompressOffset += chunk.length;
  }
  
  // テキストに戻す
  const decoder = new TextDecoder();
  return decoder.decode(decompressedData);
}

// 使用例
const originalText = "これはCompression APIのテストです。同じデータが繰り返されると圧縮率が高くなります。" +
                   "これはCompression APIのテストです。同じデータが繰り返されると圧縮率が高くなります。" +
                   "これはCompression APIのテストです。同じデータが繰り返されると圧縮率が高くなります。";

compressAndDecompress(originalText).then(result => {
  console.log("元のテキストと一致:", result === originalText);
});

ファイルの圧縮

以下の例では、ユーザーがアップロードしたファイルをブラウザ側で圧縮する方法を示しています：

document.getElementById('fileInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;
  
  // ファイルをArrayBufferとして読み込む
  const arrayBuffer = await file.arrayBuffer();
  const fileData = new Uint8Array(arrayBuffer);
  
  // データを圧縮
  const compressedStream = new CompressionStream('gzip');
  const compressWriter = compressedStream.writable.getWriter();
  compressWriter.write(fileData);
  compressWriter.close();
  
  // 圧縮されたデータを取得
  const reader = compressedStream.readable.getReader();
  const chunks = [];
  
  for (;;) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  
  // 圧縮されたデータを結合
  let totalLength = chunks.reduce((acc, chunk) => acc + chunk.length, 0);
  const compressedData = new Uint8Array(totalLength);
  
  let offset = 0;
  for (const chunk of chunks) {
    compressedData.set(chunk, offset);
    offset += chunk.length;
  }
  
  // 圧縮されたファイルを保存
  const compressedBlob = new Blob([compressedData], { type: 'application/gzip' });
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(compressedBlob);
  downloadLink.download = file.name + '.gz';
  downloadLink.click();
  
  // 圧縮率を表示
  const compressionRatio = ((1 - compressedData.length / fileData.length) * 100).toFixed(2);
  document.getElementById('compressionInfo').textContent = 
    `元のサイズ: ${fileData.length} バイト, 圧縮後: ${compressedData.length} バイト (${compressionRatio}% 削減)`;
});

対応するHTML:

<input type="file" id="fileInput">
<div id="compressionInfo"></div>

フェッチAPIとの統合

Compression APIはフェッチAPIと組み合わせることで、ネットワーク経由で受け取ったデータをクライアント側で展開することができます：

async function fetchAndDecompress(url) {
  // gzip圧縮データを取得
  const response = await fetch(url);
  const compressedData = await response.arrayBuffer();
  
  // データを展開
  const decompressStream = new DecompressionStream('gzip');
  const decompressedStream = new Response(
    new Blob([compressedData]).stream().pipeThrough(decompressStream)
  ).body;
  
  // 展開されたデータを読み込む
  const reader = decompressedStream.getReader();
  const chunks = [];
  
  for (;;) {
    const { done, value } = await reader.read();
    if (done) break;
    chunks.push(value);
  }
  
  // 展開されたデータを結合
  const decompressedData = new Uint8Array(
    chunks.reduce((acc, chunk) => acc + chunk.length, 0)
  );
  
  let offset = 0;
  for (const chunk of chunks) {
    decompressedData.set(chunk, offset);
    offset += chunk.length;
  }
  
  return decompressedData;
}

// 使用例
fetchAndDecompress('https://example.com/data.gz')
  .then(data => {
    // 展開されたデータを処理
    const decoder = new TextDecoder();
    const text = decoder.decode(data);
    console.log('展開されたデータ:', text);
  })
  .catch(error => {
    console.error('エラー:', error);
  });