はじめに: データ容量は「ビット列の大きさ」を見る考え方
前の記事では、文字コードを使って、文字が数値やバイト列として扱われることを見ました。英字の A はUTF-8では1バイト、日本語の あ は多くの場合3バイトになります。
ここで出てきた「バイト」は、データ容量を考えるうえでとても重要な単位です。コンピュータが扱う文字、画像、HTML、CSS、JavaScript、JSON、通信データは、最終的にはビット列として保存・送信されます。データ容量とは、そのビット列がどれくらい大きいかを表す考え方です。
基本情報技術者試験では、ビット、バイト、KB、MB、GBの換算がよく出てきます。実務でも、画像ファイルが重い、APIレスポンスが大きい、アップロードできるファイルサイズに制限がある、といった場面でデータ容量の感覚が必要になります。
この記事では、JavaScriptを使って文字列やJSONのバイト数を確認しながら、データ容量の基礎を整理します。
データ容量は、コンピュータが扱うビット列がどれくらい大きいかを表す考え方です。
ビットとバイトをまず整理する
データ容量を理解するために、まずビットとバイトを整理します。
ビットは、0 または 1 のどちらかを表す最小単位です。前の記事までで見てきたように、コンピュータは0と1の組み合わせで情報を扱います。
ただし、実際のファイルサイズや通信量を考えるときに、1ビットずつ数えることはあまりありません。そこでよく使われるのがバイトです。1バイトは8ビットです。
1 byte = 8 bits文字コードの記事で見たUTF-8のバイト数も、このバイトです。英字の A が1バイト、日本語の あ が3バイトというのは、保存や通信で使われるデータ量の話です。
ブラウザで画像を読み込むとき、APIからJSONを受け取るとき、ファイルをアップロードするときも、多くの場合はバイトを基準にサイズを見ます。ビットは情報表現の最小単位、バイトは実用上よく使うまとまり、と考えると分かりやすいです。
1バイトは8ビットであり、ファイルサイズや通信量はバイトを基準に考えることが多いです。
KB、MB、GBはバイトを大きくした単位
バイトだけでサイズを表すと、数字が大きくなりやすくなります。たとえば、画像ファイルが 2,000,000 bytes と表示されても、直感的には少し読みにくいでしょう。
そこで、KB、MB、GBといった単位を使います。これらは、バイトを大きなまとまりで表すための単位です。
KB: キロバイト
MB: メガバイト
GB: ギガバイト注意したいのは、文脈によって1000倍で扱う場合と1024倍で扱う場合があることです。コンピュータの内部では2のべき乗が扱いやすいため、1KBを1024バイトとして扱う場面があります。一方、ストレージ製品や通信量の表示では1000倍の単位が使われることもあります。
基本情報の学習では、まず1024倍の換算に慣れておくとよいでしょう。JavaScriptで簡単に見てみます。
const bytes = 5 * 1024 * 1024;
console.log(`${bytes} bytes`);
console.log(`${bytes / 1024} KB`);
console.log(`${bytes / 1024 / 1024} MB`);このコードでは、5MBをバイト数として計算しています。1024 * 1024 は、KBからMBへ2段階大きくする計算です。
単位換算は暗記に見えますが、もとは「バイト数を読みやすくしているだけ」です。小さなデータはバイト、大きくなるとKB、さらに大きくなるとMBやGBで見る、と考えると自然です。
KB、MB、GBは、バイト数が大きくなったときに読みやすくするための単位です。
JavaScriptで文字列のバイト数を見てみる
文字列の長さとデータ容量は同じではありません。JavaScriptの length は、画面で見える文字数そのものとも、UTF-8のバイト数とも必ず一致するわけではありません。
ここでは TextEncoder を使って、文字列をUTF-8として扱ったときのバイト数を見てみます。
const encoder = new TextEncoder();
for (const text of ["ABC", "あいう", "Hello, 世界"]) {
const bytes = encoder.encode(text);
console.log(text, text.length, bytes.length);
}text.length はJavaScriptの文字列の長さです。bytes.length は、UTF-8に変換したときのバイト数です。
ABC は英字3文字なので、UTF-8では3バイトになります。一方、あいう は3文字ですが、UTF-8では多くの場合9バイトになります。日本語1文字が3バイトとして表されるためです。
この違いは、フォーム入力やデータベース保存で重要になります。「10文字まで」と「10バイトまで」は同じ意味ではありません。日本語や絵文字を含む場合、見た目の文字数だけでなく、保存や送信に必要なバイト数も意識する必要があります。
文字列の見た目の長さと、UTF-8として保存・送信するときのバイト数は同じとは限りません。
Blobを使ってデータサイズを確認する
ブラウザJavaScriptでは、Blob を使ってデータのサイズを確認できます。Blobは、ファイルのようなデータのまとまりを表すオブジェクトです。
たとえば、JavaScriptのオブジェクトをJSON文字列にして、そのサイズを見てみます。
const data = {
name: "Taro",
message: "こんにちは"
};
const json = JSON.stringify(data);
const blob = new Blob([json], { type: "application/json" });
console.log(json);
console.log(blob.size);JSON.stringify(data) は、オブジェクトをJSON文字列に変換します。new Blob([json]) で、その文字列をデータのまとまりとして扱います。blob.size を見ると、何バイトあるかを確認できます。
この考え方は、ファイルアップロードやAPI通信にもつながります。画面上では小さなデータに見えても、JSONにしたり、日本語を含めたり、配列の要素が増えたりすると、バイト数は増えていきます。
開発者ツールのNetworkタブで見るレスポンスサイズも、同じように「通信されたデータがどれくらいあるか」を示しています。コード上でバイト数を確認できると、ブラウザで見ているサイズ表示の意味も理解しやすくなります。
Blobのsizeを見ると、ブラウザ上でもデータが何バイトあるかを確認できます。
画像や動画はなぜ容量が大きくなりやすいのか
文字だけのデータに比べて、画像や動画は容量が大きくなりやすいです。理由は、扱う情報量が多いからです。
画像は、ざっくり言えばピクセルという小さな点の集まりです。幅が広く、高さが大きい画像ほど、たくさんのピクセルを持ちます。それぞれのピクセルには色の情報があります。ピクセル数や色の情報が増えるほど、必要なデータ量も大きくなります。
ただし、実際の画像ファイルサイズは、単純なピクセル数だけでは決まりません。PNG、JPEG、WebPなどの形式や、圧縮の強さによっても変わります。同じ見た目の画像でも、保存形式や圧縮によってファイルサイズが大きく変わることがあります。
Webサイトでは、画像が大きすぎるとページの表示が遅くなります。ユーザーの通信量も増えます。だからこそ、画像の横幅を適切にする、圧縮する、必要以上に大きな画像を配信しない、といった工夫が必要になります。
画像は多くのピクセル情報を持つため、文字だけのデータより容量が大きくなりやすいです。
試験ではどう問われるか
基本情報技術者試験では、データ容量は計算問題として出てくることがあります。特に、ビットとバイトの換算、KBやMBへの換算、画像や音声のデータ量の考え方が重要です。
まず押さえるべきなのは、8ビットで1バイトという関係です。そのうえで、1KBを1024バイト、1MBを1024KBとして計算する問題に慣れておくとよいでしょう。
画像の問題では、横のピクセル数、縦のピクセル数、1ピクセルあたりの色の情報から、必要なデータ量を計算することがあります。音声データでは、サンプリング周波数や量子化ビット数、時間から容量を求める考え方も出てきます。
細かい公式を丸暗記する前に、「情報の数が増えるほど必要なビット数やバイト数が増える」という感覚を持っておくと、問題の意味を追いやすくなります。
基本情報では、データ容量をビット、バイト、単位換算の関係として整理することが重要です。
実務ではどう使われるか
Web開発では、データ容量の感覚がさまざまな場面で役立ちます。
たとえば、画像が大きいとページ表示が遅くなります。APIレスポンスが大きいと、通信に時間がかかります。ファイルアップロードでは、サーバー側で許可する最大サイズを決める必要があります。
また、スマートフォンで閲覧するユーザーにとっては、通信量も重要です。見た目には同じページでも、画像やJavaScriptが重いと、表示までの時間や通信量が大きく変わります。
Chrome開発者ツールのNetworkタブでは、読み込まれたHTML、CSS、JavaScript、画像、APIレスポンスのサイズを確認できます。データ容量を理解していると、「どのリソースが重いのか」「どこを軽くできるのか」を考えやすくなります。
Web開発では、データ容量がページ表示速度、通信量、アップロード制限に影響します。
まとめ: データ容量はWebの軽さを考える土台
データ容量は、コンピュータが扱うビット列の大きさを表す考え方です。ビットは0または1を表す最小単位で、8ビットで1バイトになります。
KB、MB、GBは、バイト数が大きくなったときに読みやすくするための単位です。試験では1024倍の換算がよく使われるため、1KBは1024バイト、1MBは1024KBという関係に慣れておくとよいでしょう。
JavaScriptでは、TextEncoder で文字列のUTF-8バイト数を確認したり、Blob の size でデータの大きさを確認したりできます。コードで見てみると、文字数とバイト数が同じではないことや、JSONにもサイズがあることが実感できます。
データ容量の感覚は、画像最適化、API通信、ファイルアップロード、ページ表示速度の理解につながります。次の記事では、配列とメモリの考え方へ進み、データがプログラムの中でどのように扱われるかを見ていきます。
データ容量の感覚を持つと、文字、画像、通信、メモリのつながりを理解しやすくなります。
コメント