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

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

はじめに

この記事を読めば、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>