JavaScriptで全角・半角を変換する方法：正規表現を用いた効率的な実装テクニック

JavaScriptを利用したWebアプリケーション開発において、ユーザーが入力するテキストの「全角」と「半角」の混在は、データの整合性を保つ上で頻繁に直面する課題です。

特に、フォームバリデーションや検索エンジンのクエリ処理、データベースへの保存前処理において、これらを統一することはシステム全体の信頼性を高めるために不可欠な工程となります。

本記事では、正規表現とUnicodeの仕組みを活用し、JavaScriptで効率的に全角・半角変換を実装する具体的なテクニックについて詳しく解説します。

全角と半角の変換が必要な理由

日本のWebシステムでは、英数字やカタカナにおいて全角と半角の双方が日常的に使用されています。

ユーザーによって入力の癖が異なるため、同じ意味のデータであっても「ＡＢＣ」と「ABC」のように異なる文字列として認識されてしまいます。

このような表記の揺れを放置すると、データベース内での検索ヒット率が低下したり、二重登録の原因になったりするリスクが生じます。

そのため、プログラム側で入力を正規化し、どちらかの形式に統一する処理を実装することが一般的です。

現代のJavaScript開発では、標準的なメソッドを組み合わせることで、外部ライブラリに頼らずとも高速な変換処理を記述することが可能です。

Unicodeにおける文字コードの規則性を理解する

JavaScriptで効率的な変換ロジックを組むためには、まず文字コード（Unicode）の規則性を理解しておく必要があります。

多くの全角文字と半角文字の間には、一定の数値的な距離が存在します。

例えば、全角の英数字や記号は、対応する半角文字に特定の値を加算または減算することで算出できます。

具体的には、多くの全角記号や英数字はU+FF01からU+FF5Eの範囲に定義されています。

これらと対応する半角文字（U+0021からU+007E）との差分は、10進数で「65248」、16進数で「0xFEE0」です。

この数値を利用することで、ループ処理や正規表現の置換によって一括で変換を行うことができます。

全角英数字を半角に変換する実装

最も一般的なケースである、全角の英数字および記号を半角に変換する方法を見ていきましょう。

JavaScriptのString.prototype.replace()メソッドと正規表現を組み合わせるのが、最もパフォーマンスに優れた手法です。

/**
 * 全角英数字および記号を半角に変換する関数
 * @param {string} str - 変換対象の文字列
 * @return {string} - 変換後の文字列
 */
function convertToHalfWidth(str) {
  // 全角英数字・記号の範囲（！から～まで）を対象にする
  return str.replace(/[！-～]/g, function(tmpStr) {
    // 文字コードを0xFEE0分だけ減算して半角に変換
    return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
  });
}

// 実行例
const input = "ＪａｖａＳｃｒｉｐｔで１２３！";
const result = convertToHalfWidth(input);
console.log(result);

JavaScriptで123!

このコードでは、正規表現/[！-～]/gを使用して、全角の感嘆符からチルダまでの範囲を抽出しています。

コールバック関数内でcharCodeAt(0)を用いて文字コードを取得し、そこから定数を引くことで半角に変換しています。

全角スペースについてはこの範囲に含まれないため、別途個別の処理が必要になる点に注意してください。

全角スペースも含めた変換

全角スペース（\u3000）を半角スペース（\u0020）に変換したい場合は、以下のように条件を追加します。

function convertToHalfWidthFull(str) {
  return str.replace(/[！-～]/g, function(tmpStr) {
    return String.fromCharCode(tmpStr.charCodeAt(0) - 0xFEE0);
  }).replace(/　/g, " "); // 全角スペースを置換
}

このように処理を繋げることで、より実用的なデータクレンジングが可能になります。

半角英数字を全角に変換する実装

逆に、デザインの統一や特定の業務システムへの対応のために、半角を全角に揃えたい場合もあります。

この場合は、先ほどとは逆に「0xFEE0」を加算するロジックを実装します。

/**
 * 半角英数字および記号を全角に変換する関数
 */
function convertToFullWidth(str) {
  return str.replace(/[!-~]/g, function(tmpStr) {
    return String.fromCharCode(tmpStr.charCodeAt(0) + 0xFEE0);
  }).replace(/ /g, "　"); // 半角スペースを全角に
}

const input = "JavaScript 2026";
console.log(convertToFullWidth(input));

ＪａｖａＳｃｒｉｐｔ　２０２６

このように、数値の加算によって簡単に全角へと変換できます。

正規表現の範囲指定が[!-~]となっているのは、半角の感嘆符「!」からチルダ「~」までをカバーするためです。

カタカナの全角・半角変換における注意点

英数字とは異なり、カタカナの変換はやや複雑な処理を要します。

なぜなら、半角カタカナの「ガ」は「ｶ」と「ﾞ（濁点）」の2文字で構成されている場合があるからです。

単純な文字コードの加減算だけでは、濁点や半濁点が分離してしまい、正しく変換できません。

これを解決するためには、マッピング用のオブジェクト（辞書）を用意するか、正規表現の工夫が必要になります。

半角カタカナを全角カタカナに変換する

濁点・半濁点の結合を処理するために、先に2文字構成の文字を置換し、その後に単一の文字を置換する手順を踏むのが定石です。

function hankoToZenkakuKatanana(str) {
  const map = {
    'ｶﾞ': 'ガ', 'ｷﾞ': 'ギ', 'ｸﾞ': 'グ', 'ｹﾞ': 'ゲ', 'ｺﾞ': 'ゴ',
    'ｻﾞ': 'ザ', 'ｼﾞ': 'ジ', 'ｽﾞ': 'ズ', 'ｾﾞ': 'ゼ', 'ｿﾞ': 'ゾ',
    'ﾀﾞ': 'ダ', 'ﾁﾞ': 'ヂ', 'ﾂﾞ': 'ヅ', 'ﾃﾞ': 'デ', 'ﾄﾞ': 'ド',
    'ﾊﾞ': 'バ', 'ﾋﾞ': 'ビ', 'ﾌﾞ': 'ブ', 'ﾍﾞ': 'ベ', 'ﾎﾞ': 'ボ',
    'ﾊﾟ': 'パ', 'ﾋﾟ': 'ピ', 'ﾌﾟ': 'プ', 'ﾍﾟ': 'ペ', 'ﾎﾟ': 'ポ',
    'ｳﾞ': 'ヴ', 'ﾜﾞ': 'ヷ', 'ｦﾞ': 'ヺ',
    'ｱ': 'ア', 'ｲ': 'イ', 'ｳ': 'ウ', 'ｴ': 'エ', 'ｵ': 'オ',
    'ｶ': 'カ', 'ｷ': 'キ', 'ｸ': 'ク', 'ｹ': 'ケ', 'ｺ': 'コ',
    'ｻ': 'サ', 'ｼ': 'シ', 'ｽ': 'ス', 'ｾ': 'セ', 'ｿ': 'ソ',
    'ﾀ': 'タ', 'ﾁ': 'チ', 'ﾂ': 'ツ', 'ﾃ': 'テ', 'ﾄ': 'ト',
    'ﾅ': 'ナ', 'ﾆ': 'ニ', 'ﾇ': 'ヌ', 'ﾈ': 'ネ', 'ﾉ': 'ノ',
    'ﾊ': 'ハ', 'ﾋ': 'ヒ', 'ﾌ': 'フ', 'ﾍ': 'ヘ', 'ﾎ': 'ホ',
    'ﾏ': 'マ', 'ﾐ': 'ミ', 'ﾑ': 'ム', 'ﾒ': 'メ', 'ﾓ': 'モ',
    'ﾔ': 'ヤ', 'ﾕ': 'ユ', 'ﾖ': 'ヨ',
    'ﾗ': 'ラ', 'ﾘ': 'リ', 'ﾙ': 'ル', 'ﾚ': 'レ', 'ﾛ': 'ロ',
    'ﾜ': 'ワ', 'ｦ': 'ヲ', 'ﾝ': 'ン',
    'ｧ': 'ァ', 'ｨ': 'ィ', 'ｩ': 'ゥ', 'ｪ': 'ェ', 'ｫ': 'ォ',
    'ｯ': 'ッ', 'ｬ': 'ャ', 'ｭ': 'ュ', 'ｮ': 'ョ',
    'ｰ': 'ー', '｡': '。', '｢': '「', '｣': '」', '､': '、', '･': '・'
  };

  const reg = new RegExp('(' + Object.keys(map).join('|') + ')', 'g');
  return str.replace(reg, function(match) {
    return map[match];
  });
}

const inputKatakana = "ﾃｽﾄｺｰﾄﾞ ｶﾞｲﾀﾞﾝｽ";
console.log(hankoToZenkakuKatanana(inputKatakana));

テストコード ガイダンス

このようにマッピングテーブルを用いることで、正確な変換を保証できます。

モダンな環境では、こうした変換用マップを一度静的に定義しておき、再利用することで実行時の負荷を軽減します。

変換処理を共通化する高度なテクニック

プロジェクト全体で変換ロジックを共通化する場合、変換タイプを選択できるユーティリティクラスを作成すると便利です。

また、正規表現のインスタンスを事前に生成しておくことで、大量の文字列処理を行う際のパフォーマンスが向上します。

class StringNormalizer {
  static toHalfWidth(str) {
    if (!str) return "";
    return str.replace(/[！-～]/g, s => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
              .replace(/　/g, " ");
  }

  static toFullWidth(str) {
    if (!str) return "";
    return str.replace(/[!-~]/g, s => String.fromCharCode(s.charCodeAt(0) + 0xFEE0))
              .replace(/ /g, "　");
  }
}

このようにカプセル化することで、他の開発者が直感的にメソッドを呼び出せるようになります。

また、入力値がnullやundefinedの場合のハンドリングを含めておくことが、堅牢なプログラムを作成するポイントです。

パフォーマンスに関する考察

数千行のデータをブラウザ上で一括変換する場合、replaceメソッドの呼び出し回数がボトルネックになる可能性があります。

しかし、近年のJavaScriptエンジン（V8など）は正規表現の最適化が非常に進んでいます。

そのため、通常のWebフォーム入力程度であれば、パフォーマンスを過度に心配する必要はありません。

もし超大規模なテキストデータを扱う場合は、Intl.Segmenter（モダンブラウザで利用可能）などを活用して文字単位での処理を検討する価値があります。

ですが、シンプルさと保守性のバランスを考えると、今回紹介したreplaceベースの実装が最も推奨されます。

実務での活用シーン

実際に全角・半角変換を導入する場面は、主に以下の3つが挙げられます。

特に、日本のECサイトでは「住所の番地が全角か半角か」でバリデーションエラーを出すのはユーザー体験（UX）を損なう原因となります。

エラーを出す前に、システム側で自動的に変換してあげるのが「親切な設計」と言えるでしょう。

まとめ

JavaScriptを用いた全角・半角変換は、Unicodeの特性を理解することで、シンプルかつ強力なロジックで実装可能です。

英数字については文字コードの差分を利用し、カタカナについてはマッピングテーブルを活用するのが最も効率的な手法です。

データの正規化はシステムの品質を左右する重要な要素であるため、これらのテクニックを適切に組み込みましょう。

本記事で紹介したコードをベースに、各プロジェクトの要件に合わせたユーティリティ関数を整備してみてください。

ユーザーにとってストレスのない入力環境を提供することが、最終的にWebサービス全体の成果に繋がります。