【JavaScript】全角 半角 変換とは？初心者向けにわかりやすく解説

フロントエンド開発•
JavaScript

はじめに

皆さんは、入力フォームなどで全角文字と半角文字が混在してしまい、扱いに困った経験はないでしょうか。

たとえばユーザーが名前を全角で入力したり、数値だけを入力してほしい欄に半角数字が入力されなかったりすると、想定していた処理がスムーズに進まないケースが考えられます。

JavaScriptでは、文字列を簡単に操作できる組み込みの仕組みが豊富に用意されています。

その中でも、全角から半角へ、あるいは半角から全角への変換は初心者にとって少しとっつきにくいイメージがあります。

しかし、実務でもフォーム入力やデータ正規化などのシーンでよく登場するため、基本をしっかり理解しておくと便利です。

ここでは、JavaScriptを使った全角半角変換のさまざまな方法や注意点を解説します。

読み進めることで、初心者の方でも実務レベルで使えるヒントが得られるのではないでしょうか。

この記事を読むとわかること

  • 全角と半角の違い
  • JavaScriptでの全角⇒半角変換と半角⇒全角変換の具体例
  • 実務での活用シーンや注意点
  • 文字列変換におけるよくある落とし穴と対処法

全角と半角の基本的な違い

全角と半角という言葉自体は聞いたことがあっても、実際にそれが何を指しているのか曖昧な方もいるかもしれません。

ざっくり言うと、全角は通常日本語入力モードで入力したときに使われる幅の広い文字を指します。

一方で、半角はアルファベットや数字など、主に英語圏で使われる幅の狭い文字を指すことが多いです。

具体例としては、全角文字だと「Ａ」「１」「ａ」、半角文字だと「A」「1」「a」のように見た目やバイト数に差が生じます。

プログラミングでは、文字列の幅やバイト数によって動作やデータ処理に差が出ることがあるため、正確に区別して扱うことが大切です。

これが初心者の方には少しややこしく感じられるポイントかもしれません。

しかし、JavaScriptの文字列操作を使えば、こうした違いを手軽に補正できる仕組みが用意されています。

なぜ全角半角変換が必要なのか

全角半角変換が必要になる場面は、意外と多岐にわたります。

たとえば、ユーザーが氏名を入力するときに、苗字は全角なのに名前は半角混じりで入力されることがあります。

また、数値だけを入力してほしいフォームにも、全角数字が入力されてしまい、計算処理に支障が出るケースも考えられます。

このようなデータの表記ゆれをそのまま放置してしまうと、システム側で余計な誤作動が起きたり、データベースの検索精度が下がったりします。

結果的に、ユーザーに手動で修正をお願いする手間が増えたり、サービスそのものの品質にマイナス要素が生まれたりするでしょう。

こうした課題を予防するためにも、あらかじめJavaScriptで文字を全角あるいは半角に統一し、データを正規化しておくことが重要になります。

変換処理の基本的な考え方

JavaScriptで全角半角を変換するときの一般的な方法は、大きく分けて3つ挙げられます。

  1. 正規表現を活用して、特定の文字範囲を置換する
  2. 文字コードを意識しながら、コードポイントを変換する
  3. 外部のライブラリや既存のユーティリティ関数を活用する

初心者の方には、まず正規表現を使った方法が取り組みやすいかもしれません。

なぜならば、文字のパターンを指定し、変換先の文字を明示できるからです。

一方で、文字コードを意識する方法は精密な制御が可能ですが、実装方法はやや複雑になる場合があります。

ライブラリを使う方法は、手軽かつバグが少なくなる反面、環境によってはインストール手順やバージョン管理が必要です。

これらの選択肢にはそれぞれメリット・デメリットがあるので、実務でどういった要件や制約があるかによって使い分けると良いでしょう。

JavaScriptで全角⇒半角に変換する方法

全角の文字を半角に変換する際には、アルファベット、数字、記号などについて変換ルールを定義する必要があります。

多くの場合、正規表現の置換機能 String.prototype.replace() を使うことで、広範囲の文字をまとめて半角に変換できます。

正規表現を使った例

下記のコード例では、全角アルファベットと全角数字を半角へ変換します。

function toHalfWidth(str) {
  return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => {
    // 変換前の文字コードを取得
    const code = s.charCodeAt(0);
    // 全角文字のコード範囲を調整して半角に
    return String.fromCharCode(code - 0xFEE0);
  });
}

// 例: 全角の"ＡＢＣ１２３"を渡す
const input = "ＡＢＣ１２３";
const output = toHalfWidth(input);
console.log(output); // 結果: "ABC123"

この方法では、正規表現で「全角A～Z、a～z、0～9」に該当する部分を探し出して、文字コードを - 0xFEE0 して半角に変換します。

ここで注意が必要なのは、記号などを扱う場合は正規表現や変換ロジックをもう少し複雑にしないといけないことです。

文字コードを意識する方法

正規表現を使わずに、文字列を1文字ずつ走査して変換をかけることもできます。

function toHalfWidthNoRegExp(str) {
  let result = "";
  for (let i = 0; i < str.length; i++) {
    const code = str.charCodeAt(i);
    // 全角数字・アルファベットの範囲(0xFF10～0xFF5A)にある場合にのみ変換
    if (code >= 0xFF10 && code <= 0xFF5A) {
      result += String.fromCharCode(code - 0xFEE0);
    } else {
      // それ以外の文字はそのまま連結
      result += str[i];
    }
  }
  return result;
}

const input2 = "ＡＢＣ!１２３#";
const output2 = toHalfWidthNoRegExp(input2);
console.log(output2); // 結果: "ABC!123#"

このアプローチだと、どの文字コード範囲を変換対象にするのかを明示的に示せるため、細かい制御がしやすいという利点があります。

ただし、文字コードの境界条件を自分で管理するため、変換ルールが増えるとコードが複雑になりがちです。

ライブラリを使う場合

外部のユーティリティライブラリの中には、全角半角変換機能が用意されていることがあります。

たとえば、すでに多機能な文字列処理ライブラリを使っている環境であれば、そのライブラリに搭載されている変換機能を呼び出すだけで済むでしょう。

この方法のメリットは、実装が短く、既存のライブラリがメンテナンスされている分、バグが出にくい点にあります。

ただし、依存関係が増えるので、アプリケーションの構成が大規模になるほど検討が必要な場合があるかもしれません。

JavaScriptで半角⇒全角に変換する方法

逆に、半角の文字を全角へ変換したいケースもあります。

とくに入力フォームでユーザーに全角の氏名や全角カナなどを入力してもらう場合に、途中で半角が混ざっていると美しくないと感じる場面があるかもしれません。

こうした場合にも同じようなロジックで対応できます。

正規表現を使った例

次の例では、半角のA～Z、a～z、0～9を全角に変換します。

function toFullWidth(str) {
  return str.replace(/[A-Za-z0-9]/g, (s) => {
    // 変換前の文字コードを取得
    const code = s.charCodeAt(0);
    // 半角文字のコードを調整して全角に
    return String.fromCharCode(code + 0xFEE0);
  });
}

const input3 = "ABC123";
const output3 = toFullWidth(input3);
console.log(output3); // 結果: "ＡＢＣ１２３"

あらかじめ正規表現で対象を絞り、文字コードを + 0xFEE0 すれば、半角から全角への変換が行われます。

やはりここでも数字やアルファベット以外の文字を含める場合は、正規表現と変換処理を増やす必要があります。

文字コードを意識する方法

文字コードを意識する方法を使うと、より柔軟な変換が可能です。

function toFullWidthNoRegExp(str) {
  let result = "";
  for (let i = 0; i < str.length; i++) {
    const code = str.charCodeAt(i);
    // 半角の数字(0x0030～0x0039)、アルファベット(0x0041～0x007A)などを例に
    if (
      (code >= 0x0030 && code <= 0x0039) || 
      (code >= 0x0041 && code <= 0x005A) ||
      (code >= 0x0061 && code <= 0x007A)
    ) {
      result += String.fromCharCode(code + 0xFEE0);
    } else {
      result += str[i];
    }
  }
  return result;
}

const input4 = "Hello123";
const output4 = toFullWidthNoRegExp(input4);
console.log(output4); // 結果: "Ｈｅｌｌｏ１２３"

この方法も、正規表現での方法と同様に、必要な文字の範囲をすべて指定してあげる必要があります。

ライブラリを使う場合

半角から全角への変換も、外部のライブラリを使うことで短いコードで書けることがあります。

ただし、記号やスペースまで全角にするかどうか、半角カナをどのタイミングでどう扱うかなど、細かい制御が必要になる場合があります。

そのため、実務で使うときには、「どの文字をどう変換したいのか」 を明確にすることが重要でしょう。

実務での活用シーン

ここからは、実務でよくある利用シーンを考えてみます。

全角半角変換は、意外とさまざまなケースで役立ちます。

ユーザー入力の正規化

フォームやUI上で入力された文字をサーバーに送る際、全角・半角を統一しておくとデータのバラつきが減ります。

住所や氏名などの日本語入力欄でも、実はアルファベットや数字が混在することがあります。

こうした揺れを減らすことで、検索やフィルタリングが行いやすくなります。

バリデーション

ユーザーから受け取った文字が、想定していた文字種類になっているかどうかをチェックする段階で役立つ場合があります。

たとえば、メールアドレスやユーザーIDなど、半角アルファベットであることが前提の項目に、誤って全角文字が入り込むとエラーになりがちです。

そこで、送信前に半角へ自動変換し、ユーザーが混乱しないようなサポートをするのが実務でよく行われる手法の一つです。

フォーム送信時のサーバー側連携

フロントエンドだけでなく、サーバー側のアプリケーションでも同様の変換を行うケースがあります。

JavaScriptでフロント側の入力文字を整形した上でサーバーに送る、あるいはサーバーが受け取った文字を再度チェックするなど、二重のチェック体制を構築することもあります。

これはセキュリティ対策やデータの一貫性保持において非常に重要です。

国際化対応

海外向けサービスを提供する場合でも、ユーザーが日本語を混在させる可能性があります。

英語圏のユーザーは半角しか使わない傾向が強いですが、日本からのアクセスでは全角やカタカナが混ざることも珍しくありません。

こうした国際化対応時には、入力時点で形式を統一しておけば、サーバー側での処理がスムーズになります。

よくある落とし穴と対策

全角半角変換はシンプルに見えて、いくつか落とし穴も存在します。

とくに日本語には、アルファベットや数字以外にも全角スペースや半角カナ、特殊記号などが多く存在します。

それらをきちんと変換しないと、想定外の動きをする可能性があります。

また、文字列の判定を行う場面では、正規表現の範囲を正しく書けていないと、文字がうまく変換されなかったり、逆に不要な文字まで変換されてしまう恐れがあります。

あらかじめテストデータを用意しておき、さまざまなパターンの入力に対してどう変換されるかを確認する作業は、とても大切です。

全角カナや全角スペースを変換する場合は、正規表現やコード変換の範囲を改めて確認してから実装すると安心です。

さらに、ユーザーとのインターフェースで利用するならば、入力時にリアルタイムで変換をかけるのか、送信ボタンを押した時点で変換をかけるのか、といったタイミングの問題も検討しておきましょう。

あまりに頻繁に変換をかけると、ユーザーが入力しにくいと感じる場合もあります。

一方で、送信後に変換やエラー表示をすると、ユーザーがどのように修正すべきか分かりにくくなるかもしれません。

プロダクトの使いやすさを考えながら、どの段階で変換するのが最適かを見極めることが求められます。

JavaScriptコード例まとめ

ここでは、これまで紹介してきたコード片を1つのサンプルとしてまとめます。

半角から全角、全角から半角への変換を一括管理する関数セットを用意するイメージです。

const convertUtil = {
  toHalfWidth: function(str) {
    // 全角英数字を半角に
    return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => {
      return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
  },
  toFullWidth: function(str) {
    // 半角英数字を全角に
    return str.replace(/[A-Za-z0-9]/g, (s) => {
      return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
    });
  },
  // 必要に応じて、全角カナ→半角カナの変換なども実装できる
};

// サンプル実行
const originalStr1 = "ＡＢＣ１２３";
const halfWidthStr = convertUtil.toHalfWidth(originalStr1); 
console.log(halfWidthStr); // "ABC123"

const originalStr2 = "ABC123";
const fullWidthStr = convertUtil.toFullWidth(originalStr2);
console.log(fullWidthStr); // "ＡＢＣ１２３"

このように、一か所に変換関連の関数を集約しておくと、管理が楽になるかもしれません。

実務の要件に合わせて、対象とする文字範囲を増やしていくことで、汎用的なツールとして機能するでしょう。

カスタマイズのポイント

日本語特有のカナや記号を扱う場合、どうしても変換対象が増えてしまいます。

たとえば、以下のようなケースを考えると実務での用途が広がります。

  • 全角カナから半角カナへの変換
  • 半角カナから全角カナへの変換
  • 全角スペースを半角スペースにするか、逆にまとめて除去するか
  • 一部の記号（例：ハイフンや波ダッシュなど）の揺れをどう扱うか

これらを実装するには、より多くの文字範囲の指定や独自のマッピングが必要になります。

そのため、一度にすべての変換をカバーしようとするとコードが非常に長くなりがちです。

そこで、実際に運用上必要な範囲に絞って変換処理を実装するのがおすすめです。

実装後のテストの重要性

一度実装してコードが完成しても、テストなしでは安心できません。

なぜならば、文字列操作は思わぬバグを生みやすい領域だからです。

  • 全角に見えて実は別の文字コードだった
  • 半角カナが入力されることを想定していなかった
  • 特殊記号（例：カッコやコロン、半角チルダ）が正しく変換されない

こうしたトラブルを防ぐには、テスト用に「変換前→変換後」のサンプル文字列を複数用意して、コードが意図した結果を返すかをしっかり確認することが大切です。

文字列は一見簡単そうに見えますが、どこかに見落としがあるとトラブルに直結するため、慎重なテストを行うと安心です。

まとめ

ここまで、JavaScriptでの全角と半角の変換方法について詳しく解説してきました。

全角半角変換は、データを正規化するうえで欠かせないステップです。

  • 正規表現か、文字コード操作か、ライブラリか
  • どの文字範囲を変換対象にするのか
  • いつ変換をかけるのか（リアルタイム or 送信時など）

こうしたポイントを明確にしておけば、初心者の方でもトラブルを減らせます。

実務では、日本語特有のカナやスペース、記号などを扱う可能性が高いため、必要に応じてコードをカスタマイズしていくと便利です。

今回紹介したサンプルコードを出発点に、皆さんのプロジェクトで最適なアプローチを考えてみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説