JavaScriptでcharCodeAtを活用する9つの方法

●charCodeAtメソッドとは？

JavaScriptを学び始めたばかりの頃、文字列の扱いに戸惑うことがありますよね。

特に、文字列内の特定の位置にある文字を取得したり、文字のコードポイントを調べたりする場合、どのようにアプローチすればよいのか悩んでしまうこともあるでしょう。

そんな時、charCodeAtメソッドが役立ちます。

charCodeAtメソッドは、文字列内の指定された位置にある文字のUnicodeコードポイントを返してくれるメソッドです。

コードポイントとは、各文字に割り当てられた一意の番号のことを指します。

このメソッドを使えば、文字列をより細かく制御することができるようになります。

初めてcharCodeAtメソッドを使う際は、少し複雑に感じるかもしれません。

しかし、基本的な使い方をマスターすれば、文字列操作の幅が大きく広がることでしょう。

これから、charCodeAtメソッドの使い方を具体的なサンプルコードと共に見ていきましょう。

一緒に学んでいくことで、きっとあなたのJavaScriptのスキルは向上するはずです。

○charCodeAtの基本的な使い方

charCodeAtメソッドの基本的な使い方は至ってシンプルです。

文字列の後ろに.charCodeAt()を付け、括弧内に取得したい文字の位置を指定するだけです。

位置は0から数えます。

つまり、最初の文字を取得したい場合は0、2番目の文字なら1を指定します。

例えば、次のようなコードを見てみましょう。

const str = "Hello, World!";
console.log(str.charCodeAt(0)); // 72
console.log(str.charCodeAt(1)); // 101

このコードでは、”Hello, World!”という文字列の最初の文字と2番目の文字のUnicodeコードポイントを取得しています。

実行結果から、”H”のコードポイントは72、”e”のコードポイントは101であることが分かります。

○サンプルコード1：文字のUnicodeコードポイントを取得する

charCodeAtメソッドを使って、文字列内の各文字のUnicodeコードポイントを取得してみましょう。

const str = "JavaScript";
for (let i = 0; i < str.length; i++) {
  console.log(`"${str[i]}"のUnicodeコードポイント：${str.charCodeAt(i)}`);
}

このコードでは、for文を使って文字列”JavaScript”の各文字をループ処理しています。

各ループでは、charCodeAtメソッドを使って現在の文字のUnicodeコードポイントを取得し、コンソールに出力しています。

実行結果は次のようになります。

"J"のUnicodeコードポイント：74
"a"のUnicodeコードポイント：97
"v"のUnicodeコードポイント：118
"a"のUnicodeコードポイント：97
"S"のUnicodeコードポイント：83
"c"のUnicodeコードポイント：99
"r"のUnicodeコードポイント：114
"i"のUnicodeコードポイント：105
"p"のUnicodeコードポイント：112
"t"のUnicodeコードポイント：116

各文字に対応するUnicodeコードポイントが表示されました。

このように、charCodeAtメソッドを使えば、文字列内の個々の文字について詳しく調べることができます。

○サンプルコード2：文字列内の特定の文字を検索する

charCodeAtメソッドを使って、文字列内の特定の文字を検索することもできます。

次のサンプルコードを見てみましょう。

function countChar(str, char) {
  let count = 0;
  const charCode = char.charCodeAt(0);
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) === charCode) {
      count++;
    }
  }
  return count;
}

const str = "Hello, World!";
const char = "o";
const count = countChar(str, char);
console.log(`"${str}"の中に"${char}"は${count}個あります。`);

このコードでは、countChar関数を定義しています。

この関数は、文字列strの中に文字charが何個含まれているかを数えます。

関数内では、まず文字charのUnicodeコードポイントを取得し、charCode変数に格納します。

次に、for文で文字列strの各文字をループ処理し、現在の文字のUnicodeコードポイントがcharCodeと一致する場合、カウンター変数countをインクリメントします。

最後に、countの値を返します。

サンプルコードでは、”Hello, World!”という文字列の中に”o”という文字が何個含まれているかを数えています。

実行結果は次のようになります。

"Hello, World!"の中に"o"は2個あります。

このように、charCodeAtメソッドを使えば、文字列内の特定の文字を効率的に検索することができます。

コードの可読性も高く、シンプルに実装できるのが魅力です。

●文字列の検証にcharCodeAtを活用

これまで、charCodeAtメソッドの基本的な使い方について見てきました。

単に文字のUnicodeコードポイントを取得するだけでなく、このメソッドを使って文字列の検証を行うこともできるのです。

文字列の検証というと、少し難しく感じるかもしれません。

しかし、実際のところ、charCodeAtメソッドを使えばシンプルに実装できます。

例えば、ユーザーの入力をチェックする場面を考えてみましょう。

数字のみで構成された文字列であることを確認したい場合や、アルファベットのみで構成された文字列であることを確認したい場合などがあるでしょう。

このような場面で、charCodeAtメソッドが大活躍します。

各文字のUnicodeコードポイントを調べることで、文字列のフォーマットが期待通りかどうかを判定できるのです。

コードを見ながら、具体的な使い方を学んでいきましょう。

○サンプルコード3：文字列が数字のみで構成されているか確認する

まずは、文字列が数字のみで構成されているかどうかを確認するサンプルコードです。

function isNumeric(str) {
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    if (charCode < 48 || charCode > 57) {
      return false;
    }
  }
  return true;
}

console.log(isNumeric("123")); // true
console.log(isNumeric("123a")); // false

isNumeric関数では、for文を使って文字列の各文字をループ処理しています。

各文字のUnicodeコードポイントをcharCodeAtメソッドで取得し、それが数字の範囲内（48から57）であるかどうかを判定します。

もし範囲外の文字が見つかった場合は、即座にfalseを返します。

ループが最後まで問題なく完了した場合は、trueを返します。

このサンプルコードを実行すると、”123″は数字のみで構成されているためtrueが、”123a”は数字以外の文字を含んでいるためfalseが返されます。

○サンプルコード4：文字列がアルファベットのみで構成されているか確認する

続いて、文字列がアルファベットのみで構成されているかどうかを確認するサンプルコードを見てみましょう。

function isAlphabetic(str) {
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    if (!((charCode >= 65 && charCode <= 90) || (charCode >= 97 && charCode <= 122))) {
      return false;
    }
  }
  return true;
}

console.log(isAlphabetic("abc")); // true
console.log(isAlphabetic("abc123")); // false

isAlphabetic関数の基本的な構造は、先ほどのisNumeric関数と同様です。

違いは、アルファベットの範囲をチェックしている点です。

UnicodeコードポイントがアルファベットのA〜Zの範囲（65から90）、もしくはa〜zの範囲（97から122）に含まれていることを確認します。

このコードを実行すると、”abc”はアルファベットのみで構成されているためtrueが、”abc123″は数字を含んでいるためfalseが返されます。

○サンプルコード5：文字列が特定の文字を含んでいるか確認する

最後に、文字列が特定の文字を含んでいるかどうかを確認するサンプルコードを見てみましょう。

function containsChar(str, char) {
  const charCode = char.charCodeAt(0);
  for (let i = 0; i < str.length; i++) {
    if (str.charCodeAt(i) === charCode) {
      return true;
    }
  }
  return false;
}

console.log(containsChar("Hello, World!", "o")); // true
console.log(containsChar("Hello, World!", "x")); // false

containsChar関数では、charCodeAtメソッドを使って、文字列strの中に文字charが含まれているかどうかを判定します。

関数の冒頭で、文字charのUnicodeコードポイントを取得しておきます。

そして、for文でstr内の各文字をループ処理し、現在の文字のUnicodeコードポイントがcharのものと一致する場合は、即座にtrueを返します。

ループが最後まで完了した場合は、文字列内にcharが見つからなかったということなので、falseを返します。

このコードを実行すると、”Hello, World!”の中に”o”は含まれているためtrueが、”x”は含まれていないためfalseが返されます。

●よくあるエラーと対処法

charCodeAtメソッドを使ってコーディングをしていると、時々エラーに遭遇することがあります。

初めてそのようなエラーに出くわすと、戸惑ってしまうかもしれません。

ここでは、よくあるエラーとその対処法を見ていきましょう。

エラーの原因を理解し、適切に対処できるようになれば、スムーズにコーディングを進められるはずです。

○文字列の範囲外にアクセスした場合

charCodeAtメソッドを使う際に、文字列の範囲外の位置を指定してしまうと、エラーが発生します。

例えば、次のようなコードを見てみましょう。

const str = "Hello";
console.log(str.charCodeAt(5)); // RangeError: Index out of range

この例では、”Hello”という5文字の文字列に対して、6番目の文字（インデックス5）のUnicodeコードポイントを取得しようとしています。

しかし、”Hello”にはインデックス5の位置に文字がないため、RangeErrorが発生してしまうのです。

このようなエラーを防ぐためには、charCodeAtメソッドを呼び出す前に、指定したインデックスが文字列の長さの範囲内であるかどうかをチェックするとよいでしょう。

const str = "Hello";
const index = 5;
if (index >= 0 && index < str.length) {
  console.log(str.charCodeAt(index));
} else {
  console.log("インデックスが範囲外です。");
}

このようにif文を使って、インデックスが0以上かつ文字列の長さ未満であることを確認してから、charCodeAtメソッドを呼び出すようにします。

こうすることで、範囲外のインデックスを指定してしまうというミスを防げます。

○charCodeAtの戻り値をそのまま文字として使用した場合

charCodeAtメソッドは、文字のUnicodeコードポイントを数値で返します。

この数値をそのまま文字として使用しようとすると、意図しない結果になってしまうことがあります。

const str = "Hello";
const charCode = str.charCodeAt(0);
console.log("最初の文字は" + charCode + "です。"); // 最初の文字は72です。

この例では、”Hello”の最初の文字”H”のUnicodeコードポイントを取得し、それを文字列と連結して出力しています。

しかし、出力結果は「最初の文字は72です。」となってしまい、意図した結果とは異なります。

数値としてのUnicodeコードポイントを実際の文字に変換するには、String.fromCharCode()メソッドを使います。

const str = "Hello";
const charCode = str.charCodeAt(0);
const char = String.fromCharCode(charCode);
console.log("最初の文字は" + char + "です。"); // 最初の文字はHです。

String.fromCharCode()メソッドに、charCodeAtメソッドで取得したUnicodeコードポイントを渡すことで、対応する文字を取得できます。

このようにすれば、意図通りの結果が得られるでしょう。

○charCodeAtとcharAtの違いについて

charCodeAtメソッドと似たメソッドにcharAtというものがあります。

両者の違いを理解しておくことが大切です。

charAtメソッドは、指定したインデックスの位置にある文字を直接返します。

一方、charCodeAtメソッドは、その文字のUnicodeコードポイントを数値で返します。

const str = "Hello";
console.log(str.charAt(1)); // "e"
console.log(str.charCodeAt(1)); // 101

この例を見ると、charAtメソッドは”e”という文字を直接返しているのに対し、charCodeAtメソッドは”e”のUnicodeコードポイントである101を返していることがわかります。

状況に応じて適切なメソッドを選ぶことが重要ですね。文字そのものが必要な場合はcharAtを、文字のUnicodeコードポイントが必要な場合はcharCodeAtを使うのが得策です。

●charCodeAtの応用例

さて、ここまででcharCodeAtメソッドの基本的な使い方から、よくあるエラーと対処法まで見てきました。

charCodeAtメソッドを使いこなせば、文字列操作のパフォーマンスが格段に上がりますね。

でも、本当の実力者になるためには、もう一歩踏み込んだ使い方を知っておく必要があります。

ここからは、charCodeAtメソッドのさらなる応用例を見ていきましょう。

文字列の暗号化や復号化、ソート、出現回数のカウントなど、ちょっと変わった使い方ができるんです。

サンプルコードを交えながら、一緒に探求していきましょう。

きっと、あなたのJavaScriptの引き出しが増えるはずです。

○サンプルコード6：文字列の暗号化と復号化

まずは、文字列の暗号化と復号化への応用です。

charCodeAtメソッドとString.fromCharCode()メソッドを組み合わせることで、簡単な暗号化と復号化を実装できます。

function encrypt(str, shift) {
  let result = "";
  for (let i = 0; i < str.length; i++) {
    let charCode = str.charCodeAt(i);
    if (charCode >= 65 && charCode <= 90) {
      result += String.fromCharCode(((charCode - 65 + shift) % 26) + 65);
    } else if (charCode >= 97 && charCode <= 122) {
      result += String.fromCharCode(((charCode - 97 + shift) % 26) + 97);
    } else {
      result += str.charAt(i);
    }
  }
  return result;
}

function decrypt(str, shift) {
  return encrypt(str, 26 - shift);
}

const originalText = "Hello, World!";
const encryptedText = encrypt(originalText, 3);
const decryptedText = decrypt(encryptedText, 3);

console.log("Original Text:", originalText);
console.log("Encrypted Text:", encryptedText);
console.log("Decrypted Text:", decryptedText);

このサンプルコードでは、シーザー暗号という簡単な暗号化手法を実装しています。

各文字を指定したシフト数だけずらすことで暗号化し、逆にシフト数を戻すことで復号化します。

encrypt関数では、文字列の各文字をループ処理し、charCodeAtメソッドでUnicodeコードポイントを取得します。

そして、アルファベットの範囲内であれば、シフト数だけずらした文字に変換し、String.fromCharCode()メソッドで文字列に戻します。

アルファベット以外の文字はそのまま結果に追加します。

decrypt関数では、encrypt関数にシフト数を26から引いた値を渡すことで、復号化を行っています。

実行結果は次のようになります。

Original Text: Hello, World!
Encrypted Text: Khoor, Zruog!
Decrypted Text: Hello, World!

元の文字列が暗号化され、その暗号文が正しく復号化されていることがわかります。

もちろん、これは簡単な例ですが、charCodeAtメソッドを使えば、もっと複雑な暗号化アルゴリズムも実装できるでしょう。

○サンプルコード7：文字列をソートする

charCodeAtメソッドを使って、文字列をソートすることもできます。

次のサンプルコードを見てみましょう。

function sortString(str) {
  return str.split("").sort((a, b) => a.charCodeAt(0) - b.charCodeAt(0)).join("");
}

const originalString = "javascript";
const sortedString = sortString(originalString);

console.log("Original String:", originalString);
console.log("Sorted String:", sortedString);

このコードでは、文字列を一旦配列に分割し、sort()メソッドを使ってソートしています。

ソートの比較関数では、各文字のUnicodeコードポイントを比較することで、文字列を辞書順にソートしています。

最後に、ソートされた配列をjoin()メソッドで再び文字列に結合します。

実行結果は次のようになります。

Original String: javascript
Sorted String: aacijprstv

文字列が辞書順にソートされていることがわかります。

このように、charCodeAtメソッドを使えば、文字列のソートも簡単に実装できます。

○サンプルコード8：文字列内の文字の出現回数を数える

charCodeAtメソッドを使って、文字列内の各文字の出現回数を数えることもできます。

次のサンプルコードを見てみましょう。

function countCharacters(str) {
  const charCount = {};
  for (let i = 0; i < str.length; i++) {
    const char = str.charAt(i);
    const charCode = str.charCodeAt(i);
    if (charCount[charCode]) {
      charCount[charCode].count++;
    } else {
      charCount[charCode] = { char, count: 1 };
    }
  }
  return charCount;
}

const originalString = "Hello, World!";
const characterCount = countCharacters(originalString);

console.log("Original String:", originalString);
console.log("Character Count:", characterCount);

このコードでは、文字列の各文字をループ処理し、charCodeAtメソッドでUnicodeコードポイントを取得します。

そして、charCountオブジェクトにUnicodeコードポイントをキーとして、文字とその出現回数を記録します。

文字が初めて登場する場合は新しいエントリを作成し、既に登場している文字の場合は出現回数をインクリメントします。

実行結果は次のようになります。

Original String: Hello, World!
Character Count: {
  '72': { char: 'H', count: 1 },
  '101': { char: 'e', count: 1 },
  '108': { char: 'l', count: 3 },
  '111': { char: 'o', count: 2 },
  '44': { char: ',', count: 1 },
  '32': { char: ' ', count: 1 },
  '87': { char: 'W', count: 1 },
  '114': { char: 'r', count: 1 },
  '100': { char: 'd', count: 1 },
  '33': { char: '!', count: 1 }
}

各文字のUnicodeコードポイントをキーとして、文字とその出現回数が記録されていることがわかります。

このように、charCodeAtメソッドを使えば、文字列内の文字の出現回数も簡単に数えられます。

○サンプルコード9：文字列をランダムに並び替える

最後に、charCodeAtメソッドを使って、文字列をランダムに並び替える例を見てみましょう。

function shuffleString(str) {
  const arr = str.split("");
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr.join("");
}

const originalString = "Hello, World!";
const shuffledString = shuffleString(originalString);

console.log("Original String:", originalString);
console.log("Shuffled String:", shuffledString);

このコードでは、文字列を一旦配列に分割し、Fisher-Yates シャッフルアルゴリズムを使って配列の要素をランダムに並び替えています。

並び替えた後、配列をjoin()メソッドで再び文字列に結合します。

実行結果は次のようになります（ランダムに並び替えられるため、実行するたびに結果が異なります）。

Original String: Hello, World!
Shuffled String: !lWo,rH odl el

文字列がランダムに並び替えられていることがわかります。

このように、charCodeAtメソッドを使えば、文字列をランダムに並び替えることもできます。

まとめ

さあ、ここまでJavaScriptのcharCodeAtメソッドについて、基本的な使い方から応用例まで幅広く見てきましたが、いかがでしたか？

文字列操作の奥深さを感じていただけたのではないでしょうか。

charCodeAtメソッドを使いこなすことで、文字列の検証や操作がより効率的になり、コードの品質向上やパフォーマンス改善につながります。

サンプルコードを参考に、実際に手を動かして練習することをおすすめします。

そうすることで、charCodeAtメソッドの使い方が自然と身につくはずです。

これからも、JavaScriptの学習を続け、エンジニアとしてのスキルを磨いていってください。

あなたの成長を心から応援しています。

一緒により良いコードを書いていきましょう！