【JavaScript】文字のUnicodeコードポイントを取得する方法｜charCodeAt・codePointAt・変換関数の使い分け完全ガイド

この記事で学べること

• charCodeAt() と codePointAt() の違い・使い分け
• String.fromCharCode() / String.fromCodePoint() による逆変換
• Unicodeエスケープシーケンス（\uXXXX / \u{XXXXX}）
• コードポイントを使った文字種判定（英数字・ひらがな・カタカナ・漢字）
• TextEncoder / TextDecoder によるUTF-8エンコーディング変換
• 主要な文字のコードポイント一覧表

// 基本構文: str.charCodeAt(index)

const str = 'Hello';

str.charCodeAt(0);  // 72  (H)
str.charCodeAt(1);  // 101 (e)
str.charCodeAt(4);  // 111 (o)
str.charCodeAt(5);  // NaN（範囲外）

// 日本語
'あ'.charCodeAt(0);   // 12354
'漢'.charCodeAt(0);   // 28450

// 引数省略時はデフォルトで 0（先頭文字）
'ABC'.charCodeAt();   // 65 （= charCodeAt(0)）

// 16進数で確認
'A'.charCodeAt(0).toString(16);  // "41"
'あ'.charCodeAt(0).toString(16); // "3042"

⚠ 注意：charCodeAt() が返すのはUTF-16コードユニット（0〜65535）です。絵文字や一部の漢字（?、?など）はサロゲートペアで2つのコードユニットに分割されるため、正しいコードポイントを取得できません。

// 基本構文: str.codePointAt(index)

// BMP内の文字（U+0000〜U+FFFF）→ charCodeAtと同じ値
'A'.codePointAt(0);   // 65    （charCodeAtと同じ）
'あ'.codePointAt(0);  // 12354 （charCodeAtと同じ）

// サロゲートペア文字（U+10000以上）→ 正しいコードポイントを返す
'?'.codePointAt(0);  // 134071 （正しい値）
'?'.charCodeAt(0);   // 55362  （上位サロゲートの値）

'?'.codePointAt(0);  // 127881
'?'.charCodeAt(0);   // 55356  （上位サロゲートの値）

// 16進数で確認
'?'.codePointAt(0).toString(16);  // "20bb7"
'?'.codePointAt(0).toString(16);  // "1f389"

? ポイント：U+0000〜U+FFFF（BMP：基本多言語面）の文字では両メソッドの結果は同じです。U+10000以上の文字（サロゲートペア）では codePointAt() のみが正しいコードポイントを返します。迷ったら codePointAt() を使えばOKです。

// String.fromCharCode() — UTF-16コードユニットから文字を生成
String.fromCharCode(65);           // "A"
String.fromCharCode(12354);        // "あ"
String.fromCharCode(72, 101, 108, 108, 111); // "Hello"（複数指定可）

// ❌ サロゲートペア文字は正しく変換できない
String.fromCharCode(134071);       // "ꮷ"（意図しない文字）
// サロゲートペアを個別に指定する必要がある
String.fromCharCode(0xD842, 0xDFB7); // "?"

// ============================================

// String.fromCodePoint() — Unicodeコードポイントから文字を生成（ES2015）
String.fromCodePoint(65);           // "A"
String.fromCodePoint(12354);        // "あ"

// ✅ サロゲートペア文字もコードポイント1つで正しく変換
String.fromCodePoint(134071);       // "?"
String.fromCodePoint(127881);       // "?"
String.fromCodePoint(0x1F600);      // "?"（16進数でもOK）

// 複数のコードポイントを一度に指定
String.fromCodePoint(12354, 12356, 12358); // "あいう"

// 1. \uXXXX 形式（ES1〜）：4桁固定、BMP内のみ
'\u0041'           // "A"    (U+0041)
'\u3042'           // "あ"   (U+3042)
'\uD842\uDFB7'     // "?"   (サロゲートペアで記述)

// 2. \u{XXXXX} 形式（ES2015〜）：可変桁数、全コードポイント対応
'\u{41}'           // "A"    (U+0041)
'\u{3042}'         // "あ"   (U+3042)
'\u{20BB7}'        // "?"   (1つで記述可能！)
'\u{1F389}'        // "?"   (1つで記述可能！)

// テンプレートリテラル内でも使える
console.log(`Hello \u{1F44B}`); // "Hello ?"

? 使い分け：\uXXXX はBMP内の文字専用です。サロゲートペアを含む全文字に対応するには \u{XXXXX} を使いましょう。現在のコードでは \u{} 形式を推奨します。

// 半角英大文字: A-Z (U+0041〜U+005A)
const isUpperAlpha = (ch) => {
    const cp = ch.codePointAt(0);
    return cp >= 0x41 && cp <= 0x5A;
};

// 半角英小文字: a-z (U+0061〜U+007A)
const isLowerAlpha = (ch) => {
    const cp = ch.codePointAt(0);
    return cp >= 0x61 && cp <= 0x7A;
};

// 半角数字: 0-9 (U+0030〜U+0039)
const isDigit = (ch) => {
    const cp = ch.codePointAt(0);
    return cp >= 0x30 && cp <= 0x39;
};

// ひらがな: U+3040〜U+309F
const isHiragana = (ch) => {
    const cp = ch.codePointAt(0);
    return cp >= 0x3040 && cp <= 0x309F;
};

// カタカナ: U+30A0〜U+30FF
const isKatakana = (ch) => {
    const cp = ch.codePointAt(0);
    return cp >= 0x30A0 && cp <= 0x30FF;
};

// CJK統合漢字: U+4E00〜U+9FFF（基本的な漢字）
const isKanji = (ch) => {
    const cp = ch.codePointAt(0);
    return cp >= 0x4E00 && cp <= 0x9FFF;
};

// 使用例
console.log( isHiragana('あ') ); // true
console.log( isKatakana('ア') ); // true
console.log( isKanji('漢') );   // true
console.log( isDigit('5') );    // true

// \p{Script=...} で文字体系を指定（u フラグ必須）
/\p{Script=Hiragana}/u.test('あ');   // true
/\p{Script=Katakana}/u.test('ア');   // true
/\p{Script=Han}/u.test('漢');       // true
/\p{Script=Latin}/u.test('A');      // true

// カテゴリベースの判定
/\p{Letter}/u.test('あ');          // true（全言語の「文字」）
/\p{Number}/u.test('5');           // true（全言語の「数字」）
/\p{Emoji}/u.test('?');          // true

// 実用例：ひらがなのみで構成されているかチェック
const isAllHiragana = (str) => /^\p{Script=Hiragana}+$/u.test(str);
isAllHiragana('こんにちは'); // true
isAllHiragana('こんにちはWorld'); // false

const encoder = new TextEncoder();  // 常にUTF-8
const decoder = new TextDecoder('utf-8');

// 文字列 → UTF-8バイト配列
encoder.encode('A');    // Uint8Array [65]        （1バイト）
encoder.encode('あ');   // Uint8Array [227, 129, 130] （3バイト）
encoder.encode('?');  // Uint8Array [240, 159, 142, 137] （4バイト）

// UTF-8バイト配列 → 文字列
decoder.decode(new Uint8Array([65]));             // "A"
decoder.decode(new Uint8Array([227, 129, 130])); // "あ"

// 実用例：文字列のバイト数を取得
const getByteLength = (str) => new TextEncoder().encode(str).byteLength;

getByteLength('Hello');  // 5  （ASCII: 1バイト × 5）
getByteLength('あいう'); // 9  （ひらがな: 3バイト × 3）
getByteLength('?');    // 4  （絵文字: 4バイト）

const str = 'あ??';

// ❌ for ループ + charCodeAt — サロゲートペアを正しく扱えない
for (let i = 0; i < str.length; i++) {
    console.log(str.charCodeAt(i));
}
// → 12354, 55362, 57271, 55356, 57225
//   （5つの値 = コードユニット数。サロゲートペアが分割される）

// ✅ for...of — コードポイント単位でイテレート
for (const ch of str) {
    console.log(ch, ch.codePointAt(0));
}
// → "あ" 12354
// → "?" 134071
// → "?" 127881

// ✅ Array.from() + map — コードポイント配列を生成
const codePoints = Array.from(str).map(ch => ch.codePointAt(0));
// → [12354, 134071, 127881]

// ✅ スプレッド構文 — 同じ結果
const codePoints2 = [...str].map(ch => ch.codePointAt(0));
// → [12354, 134071, 127881]

⚠ Unicode正規化に注意：見た目が同じ文字でもコードポイントが異なる場合があります（例：「が」= U+304C と「か」+「゛」= U+304B U+3099）。コードポイントを比較する前に str.normalize('NFC') で正規化することを推奨します。

// 文字 → U+XXXX 表記
const toUnicode = (ch) => {
    const hex = ch.codePointAt(0).toString(16).toUpperCase();
    return `U+${hex.padStart(4, '0')}`;
};

toUnicode('A');   // "U+0041"
toUnicode('あ');  // "U+3042"
toUnicode('?'); // "U+1F389"

// U+XXXX 表記 → 文字
const fromUnicode = (notation) => {
    const hex = notation.replace(/^U\+/i, '');
    return String.fromCodePoint(parseInt(hex, 16));
};

fromUnicode('U+0041');  // "A"
fromUnicode('U+1F389'); // "?"

/**
 * 文字列の各文字のUnicode情報を出力
 */
const unicodeDump = (str) => {
    return [...str].map((ch, i) => {
        const cp = ch.codePointAt(0);
        return {
            index: i,
            char: ch,
            codePoint: cp,
            hex: `U+${cp.toString(16).toUpperCase().padStart(4, '0')}`,
            isSurrogatePair: cp > 0xFFFF,
        };
    });
};

console.table( unicodeDump('あ?A?') );
// ┌───────┬──────┬───────┬────────────┬──────┬─────────────────┐
// │ index │ char │   cp  │    hex     │  SP  │                 │
// ├───────┼──────┼───────┼────────────┼──────┤                 │
// │   0   │  あ  │ 12354 │ U+3042     │ false│                 │
// │   1   │  ?  │134071 │ U+20BB7    │ true │                 │
// │   2   │  A   │   65  │ U+0041     │ false│                 │
// │   3   │  ? │127881 │ U+1F389    │ true │                 │
// └───────┴──────┴───────┴────────────┴──────┘                 │

// A(65) と a(97) の差は 32
// つまり大文字 + 32 = 小文字、小文字 - 32 = 大文字

const toLower = (ch) => {
    const cp = ch.codePointAt(0);
    if (cp >= 0x41 && cp <= 0x5A) {
        return String.fromCodePoint(cp + 32);
    }
    return ch;
};

toLower('A'); // "a"
toLower('Z'); // "z"
toLower('あ'); // "あ"（非英字はそのまま）

// 全角英数字 → 半角英数字
// Ａ(U+FF21) - A(U+0041) = 0xFEE0 (65248)
const toHalfWidth = (str) => {
    return [...str].map(ch => {
        const cp = ch.codePointAt(0);
        // U+FF01〜U+FF5E → U+0021〜U+007E
        if (cp >= 0xFF01 && cp <= 0xFF5E) {
            return String.fromCodePoint(cp - 0xFEE0);
        }
        return ch;
    }).join('');
};

toHalfWidth('Ｈｅｌｌｏ１２３');  // "Hello123"
toHalfWidth('Ａあいう');       // "Aあいう"（ひらがなはそのまま）

// 半角英数字 → 全角英数字
const toFullWidth = (str) => {
    return [...str].map(ch => {
        const cp = ch.codePointAt(0);
        if (cp >= 0x21 && cp <= 0x7E) {
            return String.fromCodePoint(cp + 0xFEE0);
        }
        return ch;
    }).join('');
};

toFullWidth('Hello123'); // "Ｈｅｌｌｏ１２３"

/**
 * ROT13: アルファベットを13文字ずらす（暗号化と復号が同じ処理）
 */
const rot13 = (str) => {
    return [...str].map(ch => {
        const cp = ch.codePointAt(0);
        if (cp >= 65 && cp <= 90)  return String.fromCodePoint((cp - 65 + 13) % 26 + 65);  // A-Z
        if (cp >= 97 && cp <= 122) return String.fromCodePoint((cp - 97 + 13) % 26 + 97);  // a-z
        return ch;
    }).join('');
};

rot13('Hello World'); // "Uryyb Jbeyq"
rot13('Uryyb Jbeyq'); // "Hello World"（同じ関数で復号）

// 正常な文字列
'Hello'.isWellFormed();      // true
'?'.isWellFormed();        // true（正しいサロゲートペア）

// 孤立サロゲートを含む文字列
'\uD800'.isWellFormed();     // false（上位サロゲートのみ）
'ab\uD800cd'.isWellFormed(); // false

// toWellFormed() で修復（孤立サロゲート → U+FFFD に置換）
'ab\uD800cd'.toWellFormed(); // "ab�cd" （U+FFFD = 置換文字）

// 実用例：encodeURIでエラーを防ぐ
const safeEncode = (str) => {
    return encodeURIComponent(str.toWellFormed());
};
// encodeURIComponent('\uD800') はエラーになるが、
// toWellFormed() で事前に修復すれば安全

charCodeAt() vs codePointAt() の速度差

BMP内の文字（通常の英数字・日本語）のみを扱う場合、charCodeAt() は codePointAt() よりわずかに高速です（サロゲートペア判定が不要なため）。ただし差はごくわずかで、数百万文字規模の処理でない限り体感差はありません。

• ASCII限定の処理（パスワード文字チェック等）→ charCodeAt() でOK
• 多言語対応が必要な処理 → codePointAt() を使う
• 大量文字列のイテレーション → for...of より for ループ + codePointAt() + インデックス手動管理が最速だが、可読性とのトレードオフ