全角 ⇄ 半角変換

全角と半角の違いを理解する

日本語のWeb制作において、全角と半角の違いは非常に重要です。
全角文字は1文字あたりの幅が広く、見た目に安定感がありますが、英数字や記号などを多用するシーンでは半角の方が適しています。
特に表やデータの整形時、フォームのバリデーション、SEOの観点などで統一された文字幅が求められることがあります。
そのため、用途や目的に応じて全角・半角を使い分ける知識と処理が欠かせません。

文字コードと文字幅の落とし穴

全角と半角の変換は単なる見た目の違いだけでなく、文字コードにも影響します。
特にCSVやTSVなど、データを外部システムに渡すときには、文字幅の違いがエラーや文字化けの原因となることがあります。
一見同じ「A」でも、半角英字と全角英字はまったく異なる文字列として扱われるため、データの正確性を保つには変換の徹底が重要です。

読みやすさと整形美のための活用

文章の整形において、全角スペースや全角記号を用いることで、見た目に統一感を持たせることができます。
特に印刷物に近いデザインや、読みやすさを重視したUIテキストでは、全角の使用が好まれることもあります。
逆に、コードスニペットやインラインの注意書きでは、半角で揃えることで視認性が向上します。
文字の役割と読み手の状況に合わせて、見た目と意味のバランスを調整する意識が求められます。

UI・UXに配慮したフォーム設計にも有効

フォーム入力欄において、ユーザーが全角で入力しても内部では半角に変換して扱う設計は、バリデーションの安定性向上に寄与します。
特に郵便番号や電話番号など、数字のみが求められる項目では、全角数字の入力による不具合を避けるためにも、入力後の変換処理が欠かせません。
また、ユーザーに文字幅の違いを意識させずに済むため、操作ストレスの軽減にもつながります。
こうしたUI・UXの観点からも、文字幅の変換は実務において非常に価値のある技術要素です。

まず、変換の基本となるのが全角→半角の「対応表（マッピング）」です。ここではカタカナ・記号・濁音などを個別にマッピングしています。

kanaToHankaku: {
	'ア': 'ｱ', 'イ': 'ｲ',
	...
}
dakutenToHankaku: {
	'ガ': 'ｶﾞ', 'ギ': 'ｷﾞ',
	...
}
symbolToHankaku: {
	'！': '!', '＠': '@',
	...
}

一括で変換処理を行うために、各カテゴリ（かな・記号・濁音）に分けて定義しています。変換漏れを防ぎ、読みやすく保守性の高い書き方です。

reverseMap(map) {
	const reversed = {};
	for (const [key, value] of Object.entries(map)) {
		reversed[value] = key;
	}
	return reversed;
}

この関数では、先ほどの変換表をひっくり返した「半角→全角用のマップ」を自動生成しています。こうすることで、メンテナンスの手間を半減できます。

ここが本体の変換処理です。オプションで「数字だけ変換したい」「カタカナだけ変換」などの制御ができるようになっています。

全角→半角変換：

result = result.replace(/[０-９]/g, char => String.fromCharCode(char.charCodeAt(0) - 0xFEE0) );

このように、全角文字のUnicodeに0xFEE0を引くことで、簡単に半角へ変換しています。英数字や記号も同様に処理されます。

カタカナ変換：

result = result.replace(/[\u30A1-\u30FA]/g, char => this.dakutenToHankaku[char] || this.kanaToHankaku[char] || char );

カタカナは、まず濁音があれば濁音を優先的に半角へ変換。なければ通常のカタカナへマッピングします。

こちらも基本は全角→半角と同じ構造です。違うのは、半角カタカナに対して濁音付きの文字がくっついているケースがあるため、それを最初に処理している点です。

result = result.replace(/[\uFF66-\uFF9D][\uFF9E\uFF9F]/g, match => this.hankakuToDakuten[match] || match );

例えば「ﾊﾟ（パ）」のような濁音・半濁音がある場合、2文字セットをまとめて1文字に変換します。

イベントでリアルタイム変換を実行

document.getElementById('inputText').addEventListener('input', convertText);

入力欄に変更があったときやチェックボックスの操作があったときに、リアルタイムで変換処理を走らせるようにしています。

input.addEventListener('input', convertText);

convertText関数では、現在の入力テキスト・変換方向・チェックされたオプションをもとに、正しい処理を呼び出しています。