JavaScriptで全角・半角を相互変換する — 半角カタカナの濁点合成まで正しく扱う

氏名・住所・電話番号などのフォーム入力は、全角数字と半角数字が混ざったり、半角カタカナが紛れ込んだりして表記が揺れやすい。データを突き合わせる前に全角・半角をそろえておくと、後段の処理がぐっと楽になる。ここでは英数字・記号・スペース・カタカナを対象ごとに変換する実装を、ブラウザだけで動く形で組み立てる。

英数字・記号・スペースはコードポイントのオフセットで変換できる

半角ASCIIの可視文字（U+0021〜U+007E）と、対応する全角文字（U+FF01〜U+FF5E）は、コードポイントがちょうど 0xFEE0 ずれている。だから英数字・記号は加減算だけで相互変換できる。スペースだけは半角スペース（U+0020）と全角スペース（U+3000）が別扱いなので個別に置換する。

// 半角 → 全角
function toZenkakuAscii(s) {
  return s
    .replace(/[!-~]/g, c => String.fromCharCode(c.charCodeAt(0) + 0xFEE0))
    .replace(/ /g, '　');
}

// 全角 → 半角
function toHankakuAscii(s) {
  return s
    .replace(/[！-～]/g, c => String.fromCharCode(c.charCodeAt(0) - 0xFEE0))
    .replace(/　/g, ' ');
}

console.log(toHankakuAscii('Ｈｅｌｌｏ　１２３ ！？')); // "Hello 123 !?"

英数字だけ・記号だけ、と対象を分けたい場合は、[Ａ-Ｚａ-ｚ０-９]（英数字）と [！-／：-＠［-｀｛-～]（記号）のように文字クラスを分割して、必要な範囲だけに replace をかければよい。

半角カタカナは濁点の「合成」が要る

やっかいなのは半角カタカナだ。半角の「ｶﾞ」は「ｶ」＋濁点「ﾞ」の2文字で表現されるのに対し、全角の「ガ」は1文字。単純な1対1の置換表では濁点付きが化けてしまう。1文字先を見て、濁点・半濁点なら合成する必要がある。

const HK = { 'ｱ':'ア','ｲ':'イ','ｳ':'ウ','ｶ':'カ','ｷ':'キ','ﾊ':'ハ','ﾋ':'ヒ','ｰ':'ー' /* ...全角へ... */ };
const HKD = { 'ｶ':'ガ','ｷ':'ギ','ﾊ':'バ','ﾋ':'ビ','ｳ':'ヴ' /* ...濁点合成... */ };
const HKP = { 'ﾊ':'パ','ﾋ':'ピ' /* ...半濁点合成... */ };

function halfKanaToFull(s) {
  let out = '', i = 0;
  while (i < s.length) {
    const c = s[i], n = s[i + 1];
    if (n === 'ﾞ' && HKD[c]) { out += HKD[c]; i += 2; continue; } // 濁点を合成
    if (n === 'ﾟ' && HKP[c]) { out += HKP[c]; i += 2; continue; } // 半濁点を合成
    out += (HK[c] || c); i++;
  }
  return out;
}

console.log(halfKanaToFull('ｶﾞｷﾞ ﾊﾟﾋﾟ')); // "ガギ パピ"

逆方向（全角→半角）は、この対応表を反転させ、濁音は「清音＋ﾞ」、半濁音は「清音＋ﾟ」に分解して出力すればよい。上のマップは要点だけ抜いたものなので、実運用ではア〜ン・記号（｡｢｣､･）まで表を埋めておく。

そのまま試せるツール

この変換をブラウザ完結で使えるように、対象（英数字・記号・カタカナ・スペース）を選んで全角・半角を相互変換できるツールを用意している。実装を書く前の下調べや、ちょっとした整形にどうぞ。

• 全角・半角変換ツール（ハシトシステム）

入力はすべてブラウザ内（JavaScript）で処理され、サーバーには送信されない。表記ゆれの統一は、正規化（NFKCなど）と合わせて設計すると取りこぼしが減る。用途に応じて「英数字だけ半角に、カタカナは全角に」といった部分適用を選べるようにしておくと実務で使いやすい。