【2026年7月最新】JavaScript lengthで文字列・配列の長さを取得する完全ガイド｜絵文字・Unicode対応とClaude Code活用

この記事の内容

1. 01lengthとは何か｜文字列・配列・関数のlengthの違い
2. 02文字列のlength：文字数をカウントする基本
3. 03絵文字・サロゲートペアでlengthがズレる落とし穴
4. 04Array.from()とスプレッド構文で正確な文字数を取得
5. 05配列のlength：要素数の取得と配列の末尾処理
6. 06関数のlength：引数の数を確認する
7. 07lengthを使った実務パターン
8. 08Claude CodeでlengthのJavaScriptコードを自動生成する
9. FAQよくある質問

📚 用語解説

lengthプロパティ：JavaScriptの組み込みプロパティ。文字列ではUTF-16コードユニット数（≒文字数だが絵文字で差異あり）、配列では要素数（インデックスの最大値+1）、関数では定義された引数（パラメータ）の数を返す。メソッドではなくプロパティのため括弧は不要（str.length()はエラー、str.lengthが正しい）。読み取り専用（文字列の場合）または書き込み可能（配列の場合はlength=0で全要素削除）。

// 文字列のlength
const str = "こんにちは";
console.log(str.length);  // → 5

// 配列のlength
const arr = [10, 20, 30, 40];
console.log(arr.length);  // → 4

// 関数のlength
function greet(name, greeting) {
  return greeting + ', ' + name;
}
console.log(greet.length);  // → 2（引数が2つ）

// lengthはメソッドではなくプロパティ（括弧不要）
console.log("test".length);   // → 4
// console.log("test".length()); → エラー！ not a function

// 文字列のlengthの基本
const text = "Hello, World!";
console.log(text.length);  // → 13

// 空文字列
console.log("".length);  // → 0

// スペースも1文字
console.log("a b".length);  // → 3

// 日本語（ひらがな・カタカナ・漢字）は各1
console.log("あいう".length);     // → 3
console.log("東京都".length);     // → 3
console.log("アイウエオ".length); // → 5

// 数字（文字列として）
console.log("12345".length);  // → 5

// 改行コード
console.log("line1\nline2".length);  // → 11（\nは1文字）

JavaScriptエンジンは文字列を作成した時点でlengthの値をキャッシュするため、str.lengthを何度呼び出してもO(1)（一定時間）で返ります。ループ内でstr.lengthを毎回呼び出しても問題ありません（ただし配列の要素を動的に追加・削除する場合は、ループの都度再評価されます）。

// lengthを使った文字列操作の例

// 1. 空文字チェック
const input = "";
if (input.length === 0) {
  console.log("入力が空です");
}

// 2. 最大文字数のバリデーション
const tweet = "これはツイートのサンプルテキストです。140字以内に収める必要があります。";
const MAX_LENGTH = 140;

if (tweet.length > MAX_LENGTH) {
  console.log(`文字数オーバー: ${tweet.length}/${MAX_LENGTH}文字`);
} else {
  console.log(`OK: ${tweet.length}/${MAX_LENGTH}文字`);
}

// 3. 文字列の末尾N文字を取得
const str = "HelloWorld";
const last3 = str.slice(str.length - 3);  // → "rld"
// または str.slice(-3)  // 負のインデックスでも同じ

// 4. 文字列を逆順にする（簡易版）
const reversed = str.split("").reverse().join("");
console.log(reversed);  // → "dlroWolleH"
console.log(str.length === reversed.length);  // → true

JavaScriptの文字列は内部的にUTF-16エンコーディングで管理されています。Unicode Basic Multilingual Plane（BMP、U+0000〜U+FFFF）内の文字は1コードユニット（length=1）ですが、それ以外の文字（多くの絵文字・一部の漢字等）はサロゲートペアと呼ばれる2コードユニットで表現されるため、length=2になります。"😀".lengthは2を返しますが、人間が認識する「文字数」は1です。

// 絵文字でlengthがズレる例
console.log("A".length);      // → 1（ASCII、BMP内）
console.log("あ".length);     // → 1（ひらがな、BMP内）
console.log("😀".length);    // → 2！ （絵文字、BMP外のU+1F600）
console.log("😀😀".length); // → 4！ （絵文字2文字なのに4）

// サロゲートペアの例
const emoji = "😀";
console.log(emoji.length);    // → 2
console.log(emoji[0]);        // → '\uD83D'（上位サロゲート）
console.log(emoji[1]);        // → '\uDE00'（下位サロゲート）

// 普通の文字はlength=1
console.log("A".length);    // → 1
console.log("a".length);    // → 1
console.log("1".length);    // → 1
console.log("あ".length);   // → 1
console.log("漢".length);   // → 1（BMP内の漢字）

// 注意が必要な文字の例
console.log("𠮟".length); // → 2（𠮟 = BMP外の漢字 "叱"の旧字体）

📚 用語解説

サロゲートペア（Surrogate Pair）：Unicode文字をUTF-16で表現するとき、U+FFFF（65535）を超えるコードポイントは「上位サロゲート（U+D800〜U+DBFF）+ 下位サロゲート（U+DC00〜U+DFFF）」の2つの16ビット値で表現する。この2つ組をサロゲートペアと呼ぶ。JavaScriptの文字列はUTF-16コードユニットの配列であるため、サロゲートペアの文字は1文字に見えてもlengthが2になる。絵文字（U+1F000番台など）の多くはサロゲートペアに該当する。

// よく混乱する「見た目1文字だがlength=2」の例
const examples = [
    ["A", "ASCII"],
    ["あ", "ひらがな"],
    ["漢", "BMP内漢字"],
    ["😀", "絵文字（笑顔）"],
    ["💻", "絵文字（ノートPC）"],
    ["🇯🇵", "国旗（日本）← ZWJ結合で長さ4！"],
];

examples.forEach(([char, label]) => {
    // charの中の絵文字はHTMLエスケープしているため実際のJSコードと異なります
    console.log(label + ': length=' + char.length);
});

📚 用語解説

Intl.Segmenter（最も正確な文字数カウント）：ES2022で追加されたAPI。テキストをUnicodeのグラフェム（書記素クラスター）単位で分割する。複数のコードポイントが組み合わさって1文字に見えるケース（国旗の絵文字・ZWJ結合の家族絵文字等）も正確に1文字としてカウントできる。Array.fromより正確だが、Node.js 16+またはモダンブラウザが必要。const segmenter = new Intl.Segmenter(); const segments = [...segmenter.segment(str)]; segments.lengthが最も正確な文字数。

// 方法1: Array.from() でUnicode対応の文字数カウント
const str1 = "Hello😀";  // H-e-l-l-o-絵文字

console.log(str1.length);           // → 7（絵文字は2とカウント）
console.log(Array.from(str1).length); // → 6（絵文字を1とカウント）

// 方法2: スプレッド構文でも同じ結果
console.log([...str1].length);  // → 6（Array.fromと同じ）

// 方法3: Intl.Segmenter（ES2022以降・最も正確）
const segmenter = new Intl.Segmenter('ja');
const segments = [...segmenter.segment(str1)];
console.log(segments.length);  // → 6

// どれを使うべきか
// - 通常の日本語・英数字のみ → str.length で十分
// - 絵文字を含む可能性がある → Array.from(str).length
// - 国旗・家族絵文字など複合絵文字 → Intl.Segmenter

// 実用的な「文字数カウント関数」
function countChars(str) {
  // Intl.Segmenterが使えれば使う（最も正確）
  if (typeof Intl.Segmenter !== 'undefined') {
    const segmenter = new Intl.Segmenter();
    return [...segmenter.segment(str)].length;
  }
  // フォールバック: Array.from（サロゲートペア対応）
  return Array.from(str).length;
}

console.log(countChars("Hello"));        // → 5
console.log(countChars("こんにちは"));   // → 5
console.log(countChars("Hi😀"));         // → 3（絵文字1文字）

// 配列のlengthの基本
const fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length);  // → 3

// 空配列
console.log([].length);  // → 0

// 配列の最後の要素を取得（length-1がインデックス）
console.log(fruits[fruits.length - 1]);  // → 'cherry'
// または（ES2022+）
console.log(fruits.at(-1));  // → 'cherry'

// 配列に要素を追加してlengthが変わる
fruits.push('date');
console.log(fruits.length);  // → 4

// 配列の末尾を削除してlengthが変わる
fruits.pop();
console.log(fruits.length);  // → 3

// lengthを直接書き換えることができる（要素の削除）
fruits.length = 2;
console.log(fruits);  // → ['apple', 'banana']（cherry以降が削除）

// length=0 で配列を空にする
fruits.length = 0;
console.log(fruits);  // → []（全要素削除・同じ参照を維持）

①arr.length = 0: 配列の長さを0にする。元の配列の参照が維持されるため他の変数が同じ配列を参照していても空になる。②arr = []: 新しい空配列を変数に代入。他の変数がarr.を参照していた場合は影響しない。③arr.splice(0): 全要素を削除。参照は維持。パフォーマンスはlength=0が最速で、arr=[]は参照を新しくする必要がある場合に使う。

// 配列lengthを使った実用パターン

// 1. ループの終了条件
const numbers = [10, 20, 30, 40, 50];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// 2. 配列が空かチェック
const cart = [];
if (cart.length === 0) {
  console.log("カートは空です");
}

// 3. 配列のN番目から末尾まで取得
const top3 = numbers.slice(0, 3);      // 先頭3件
const last2 = numbers.slice(-2);        // 末尾2件
const mid = numbers.slice(1, numbers.length - 1);  // 先頭・末尾を除く

// 4. 最大要素数の制限
const MAX_ITEMS = 3;
if (numbers.length > MAX_ITEMS) {
  numbers.length = MAX_ITEMS;  // 3件に切り詰め
  console.log(numbers);  // → [10, 20, 30]
}

📚 用語解説

Function.length プロパティ：関数の定義された仮引数（パラメータ）の数を返す。注意点として、デフォルト値がある引数（function f(a, b = 1)）はカウントされない（f.length = 1）。rest引数（...args）もカウントされない（function f(a, ...rest)ならf.length = 1）。デフォルト値なし・rest引数なしの引数だけがカウントされる。主にHOF（高階関数）やライブラリの実装で引数の数によって動作を変えたいときに使う。

// 関数のlength
function greet(name, greeting) {
  return greeting + ', ' + name;
}
console.log(greet.length);  // → 2

// デフォルト値がある引数はカウントされない
function add(a, b = 0) {
  return a + b;
}
console.log(add.length);  // → 1（bはデフォルト値があるのでカウント外）

// rest引数はカウントされない
function sum(first, ...rest) {
  return rest.reduce((acc, n) => acc + n, first);
}
console.log(sum.length);  // → 1（firstのみカウント）

// アロー関数も同様
const multiply = (x, y) => x * y;
console.log(multiply.length);  // → 2

// 実用例: 引数の数によって動作を変える関数（カリー化の例）
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn(...args);  // 引数が揃ったら実行
    }
    return function(...moreArgs) {
      return curried(...args, ...moreArgs);  // 引数が足りなければ待機
    };
  };
}

const curriedAdd = curry((a, b, c) => a + b + c);
console.log(curriedAdd(1)(2)(3));  // → 6
console.log(curriedAdd(1, 2)(3));  // → 6

// 1. 入力バリデーション（パスワード強度チェック）
function validatePassword(password) {
  const MIN = 8, MAX = 50;
  if (password.length < MIN) {
    return `パスワードは${MIN}文字以上必要です（現在: ${password.length}文字）`;
  }
  if (password.length > MAX) {
    return `パスワードは${MAX}文字以下にしてください`;
  }
  return 'OK';
}
console.log(validatePassword("abc"));        // → 8文字以上必要
console.log(validatePassword("secure1234")); // → OK

// 2. 文字数リアルタイム表示（テキストエリア）
// document.querySelector('#tweet').addEventListener('input', (e) => {
//   const remaining = 140 - [...e.target.value].length;  // 絵文字対応
//   document.querySelector('#counter').textContent = remaining + '文字残り';
// });

// 3. 配列のチャンク処理（大量データを分割）
function chunk(arr, size) {
  const result = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
}
console.log(chunk([1,2,3,4,5,6,7], 3));
// → [[1,2,3],[4,5,6],[7]]

// 4. ページネーション（全ページ数の計算）
const items = new Array(95).fill(0);  // 95件のデータ
const PAGE_SIZE = 10;
const totalPages = Math.ceil(items.length / PAGE_SIZE);
console.log(totalPages);  // → 10ページ

// 5. 文字列の右端をN文字マスク（クレカ番号等）
function maskEnd(str, visibleStart = 4) {
  const len = Array.from(str).length;  // Unicode対応
  return str.slice(0, visibleStart) + '*'.repeat(Math.max(0, len - visibleStart));
}
console.log(maskEnd("1234567890123456"));  // → 1234************

📚 用語解説

UTF-16（Unicode Transformation Format 16-bit）：Unicodeをエンコードする方式の一つ。JavaScriptが内部で使用する文字コード。U+0000〜U+FFFFの基本多言語面（BMP）の文字は16ビット（2バイト）1単位で表現し、それより大きなコードポイント（絵文字など）は上位サロゲートと下位サロゲートの2単位（合計4バイト）で表現する。str.lengthはUTF-16の「コードユニット数」を返すため、サロゲートペア文字を含む場合は見た目の文字数より大きくなる。JavaScriptのString.prototype.charCodeAt()はUTF-16コードユニットを返し、codePointAt()はUnicodeコードポイントを返す。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？