JavaScriptでバイト数を知る！5つの方法

はじめに
●JavaScriptでバイト数を知る5つの方法
●応用例とサンプルコード
- ○応用例1：入力文字数制限を実装する
- ○応用例2：ファイルサイズを表示する
●注意点と対処法
まとめ

※本記事のコンテンツは、利用目的を問わずご活用いただけます。実務経験10000時間以上のエンジニアが監修しており、常に解説内容のわかりやすさや記事の品質に注力しておりますので、不具合・分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。(理解できない部分などの個別相談も無償で承っております)
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで文字列のバイト数を計算する方法が身につきます。

文字列のバイト数を知ることは、データベースへの格納やファイルサイズの計算など、様々な場面で重要です。

この記事では、初心者でも理解できるように、5つの方法をサンプルコード付きで解説します。

●JavaScriptでバイト数を知る5つの方法

○方法1：encodeURIを使う

encodeURIを使って文字列をエンコードし、その後バイト数を計算する方法です。

この例では、encodeURI()を使ってUTF-8エンコーディングに従って文字列をエンコードし、バイト数を計算しています。

function getByteLength(str) {
  return encodeURI(str).split(/%..|./).length - 1;
}

let text = "こんにちは";
console.log(getByteLength(text)); // 15

○方法2：Bufferオブジェクトを使う（Node.jsのみ）

Node.js環境であれば、Bufferオブジェクトを使ってバイト数を計算できます。

この例では、Buffer.from()を使って文字列からバッファを生成し、その長さを取得しています。

function getByteLength(str) {
  return Buffer.from(str, 'utf8').length;
}

let text = "こんにちは";
console.log(getByteLength(text)); // 15

○方法3：TextEncoderを使う

TextEncoderオブジェクトを使って文字列をエンコードし、バイト数を計算する方法です。

この例では、TextEncoderを使ってUTF-8エンコーディングで文字列をエンコードし、バイト数を計算しています。

function getByteLength(str) {
  const encoder = new TextEncoder();
  return encoder.encode(str).length;
}

let text = "こんにちは";
console.log(getByteLength(text)); // 15

○方法4：Blobオブジェクトを使う

Blobオブジェクトを使って文字列をエンコードし、バイト数を計算する方法です。

この例では、Blobを使って文字列をエンコードし、そのサイズを取得しています。

function getByteLength(str) {
  const blob = new Blob([str], {type: 'text/plain;charset=utf-8'});
  return blob.size;
}

let text = "こんにちは";
console.log(getByteLength(text)); // 15

○方法5：自作関数で計算する

自作の関数を使って文字列のバイト数を計算する方法です。

この例では、各文字のコードポイントをチェックして、対応するバイト数を合計しています。

function getByteLength(str) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    const code = str.charCodeAt(i);
    if (code <= 0x7f) {
      count += 1;
    } else if (code <= 0x7ff) {
      count += 2;
    } else if (code <= 0xffff) {
      count += 3;
    } else {
      count += 4;
    }
  }
  return count;
}

let text = "こんにちは";
console.log(getByteLength(text)); // 15

●応用例とサンプルコード

○応用例1：入力文字数制限を実装する

入力フォームで文字数制限を設ける際に、上記のバイト数計算方法を利用できます。

下記のサンプルコードでは、getByteLength()関数を用いて、入力文字列のバイト数を計算し、制限バイト数を超えた場合に警告メッセージを表示しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入力文字数制限</title>
<script>
function getByteLength(str) {
  // バイト数計算処理
}

function checkByteLength(inputElement, maxLength) {
  const str = inputElement.value;
  const byteLength = getByteLength(str);
  const msgElement = document.getElementById('message');
  if (byteLength > maxLength) {
    msgElement.textContent = '入力バイト数が制限を超えました。';
  } else {
    msgElement.textContent = '';
  }
}
</script>
</head>
<body>
  <input type="text" oninput="checkByteLength(this, 20)">
  <div id="message"></div>
</body>
</html>

○応用例2：ファイルサイズを表示する

ファイルアップロード時に、ファイルサイズを表示する場合も、バイト数計算方法が役立ちます。

下記のサンプルコードでは、getByteLength()関数を利用して、アップロードされたファイルのテキストデータのバイト数を表示しています。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ファイルサイズ表示</title>
<script>
function getByteLength(str) {
  // バイト数計算処理
}

function showFileSize(inputElement) {
  const file = inputElement.files[0];
  const reader = new FileReader();
  reader.onload = function(e) {
    const byteLength = getByteLength(e.target.result);
    document.getElementById('fileSize').textContent = byteLength + ' バイト';
  };
  reader.readAsText(file);
}
</script>
</head>
<body>
  <input type="file" onchange="showFileSize(this)">
  <div id="fileSize"></div>
</body>
</html>