JavaScript Tips | 文字列ユーティリティ：整形 － 半角→全角

「半角→全角」ユーティリティは何のために使うのか

さっきの「全角→半角」と逆方向の話です。
業務システムでは、こんな要望がよく出ます。

帳票や PDF で、桁をきれいに揃えたいから全角で出したい。
画面上の見た目を「日本語っぽく」したいから、英数字も全角で表示したい。
既存システム（レガシー）が「全角英数字前提」で動いているので合わせたい。

つまり、内部では半角で扱っていても、
「表示するときだけ全角にしたい」場面があるわけです。
そのときに使う小さな道具が「半角→全角」ユーティリティです。

まずは対象を決める：何を全角にするのか

半角→全角も、対象はいろいろあります。

半角数字（0〜9）
半角英字（A〜Z、a〜z）
半角記号（! @ – () など）
半角スペース

業務でよく使うのは「数字」「英字」「スペース」です。
まずはここから押さえておくと、ほとんどのケースをカバーできます。

基本形：半角英数字・スペースを全角にする

文字コードの差を利用したシンプル実装

全角英数字は、半角と「一定の差」を持ったコードになっています。
全角→半角のときは - 0xFEE0 でしたが、
半角→全角では逆に + 0xFEE0 します。

function toFullWidthBasic(str) {
  if (str == null) return "";

  return String(str)
    // 半角スペース → 全角スペース
    .replace(/ /g, "　")
    // 半角の !〜~ を全角に
    .replace(/[!-~]/g, (ch) => {
      const code = ch.charCodeAt(0);
      return String.fromCharCode(code + 0xFEE0);
    });
}

function toFullWidthBasic(str) {
  if (str == null) return "";

  return String(str)
    // 半角スペース → 全角スペース
    .replace(/ /g, "　")
    // 半角の !〜~ を全角に
    .replace(/[!-~]/g, (ch) => {
      const code = ch.charCodeAt(0);
      return String.fromCharCode(code + 0xFEE0);
    });
}

やっていることを噛み砕くとこうです。

半角スペース " " は、全角スペース に置き換える。
[!-~] は「半角の ! から半角の ~ まで」の範囲（英数字＋記号）を表す。
その範囲の文字は、全角側とコードポイントの差が 0xFEE0 だけ離れている。
code + 0xFEE0 で全角側の文字に変換できる。

使い方はこんな感じです。

toFullWidthBasic("123 ABC xyz");
// "１２３　ＡＢＣ　ｘｙｚ"

toFullWidthBasic("Hello! 123");
// "Ｈｅｌｌｏ！　１２３"

toFullWidthBasic("123 ABC xyz");
// "１２３　ＡＢＣ　ｘｙｚ"

toFullWidthBasic("Hello! 123");
// "Ｈｅｌｌｏ！　１２３"

日本語（ひらがな・カタカナ・漢字）はそのまま残り、
英数字と記号とスペースだけが全角になります。

実務で使いやすくするための小さな工夫

null や undefined にも優しくしておく

フォームや API の値は、必ずしも「きれいな文字列」とは限りません。
null や undefined が来ても落ちないようにしておくと安心です。

function toFullWidth(str) {
  if (str == null) return "";

  const s = String(str);

  return s
    .replace(/ /g, "　")
    .replace(/[!-~]/g, (ch) => {
      const code = ch.charCodeAt(0);
      return String.fromCharCode(code + 0xFEE0);
    });
}

function toFullWidth(str) {
  if (str == null) return "";

  const s = String(str);

  return s
    .replace(/ /g, "　")
    .replace(/[!-~]/g, (ch) => {
      const code = ch.charCodeAt(0);
      return String.fromCharCode(code + 0xFEE0);
    });
}

これで、次のような入力にも安全に対応できます。

toFullWidth(null);        // ""
toFullWidth(123);         // "１２３"
toFullWidth("A B C");     // "Ａ　Ｂ　Ｃ"
toFullWidth("テスト123"); // "テスト１２３"

toFullWidth(null);        // ""
toFullWidth(123);         // "１２３"
toFullWidth("A B C");     // "Ａ　Ｂ　Ｃ"
toFullWidth("テスト123"); // "テスト１２３"

「とりあえず表示用に全角にしたい」という場面では、
このくらい防御的にしておくと扱いやすいです。

業務での具体的な使いどころ

帳票・PDF・印刷用レイアウトの調整

帳票や PDF では、「桁がきれいに揃っている」ことが重要視されます。
半角だと文字幅がバラバラになりやすいので、
「表示するときだけ全角にする」というパターンがよくあります。

const id = "A123";
const fullId = toFullWidth(id);
// 画面や PDF には fullId を使う

const id = "A123";
const fullId = toFullWidth(id);
// 画面や PDF には fullId を使う

内部では半角 "A123" のまま保存しておき、
「見せるときだけ全角」という分離ができるのがポイントです。

既存システムとの互換性を保つ

古い基幹システムやホスト連携では、
「英数字は全角で送る」という仕様が残っていることがあります。

その場合、送信前にだけ半角→全角をかけます。

function buildLegacyPayload(code) {
  return {
    code: toFullWidth(code),
  };
}

buildLegacyPayload("ABC123");
// { code: "ＡＢＣ１２３" }

function buildLegacyPayload(code) {
  return {
    code: toFullWidth(code),
  };
}

buildLegacyPayload("ABC123");
// { code: "ＡＢＣ１２３" }

アプリ内部は半角で統一しておき、
外部インターフェースに合わせるところだけ全角にする、
という設計にしておくと、後からの移行もやりやすくなります。

「どこで半角→全角をかけるか」が設計の肝

ここが一番大事なポイントです。

半角→全角は、
「見た目を整える」「外部仕様に合わせる」ための変換です。
なので、基本的には

保存・比較・検索など“ロジック側” → 半角で統一
画面表示・帳票・外部連携など“見せ方側” → 必要に応じて全角に変換

という役割分担にしておくのが安全です。

もし、入力の時点でいきなり全角にしてしまうと、

検索ロジックが組みにくくなる
他システムとの連携で毎回変換が必要になる
「半角で欲しい」要件が出たときに困る

といった問題が出てきます。

なので、

内部表現はできるだけ半角で揃える
「どう見せたいか」「どこに合わせたいか」に応じて、出口で全角にする

という考え方をベースに、
どこで toFullWidth を呼ぶかを決めていくと、
長期的にメンテしやすい設計になります。

小さな練習で感覚をつかむ

コンソールでいくつか試してみてください。

toFullWidth("123");
toFullWidth("ABC xyz");
toFullWidth("Hello! 123");
toFullWidth(" テスト 123 ");

toFullWidth("123");
toFullWidth("ABC xyz");
toFullWidth("Hello! 123");
toFullWidth(" テスト 123 ");

どの文字がどう変わるか、スペースがどうなるかを目で見て確認すると、
「半角→全角の変換範囲」と「日本語はそのまま」という感覚がつかめます。

そのうえで、自分のプロジェクトに

export function toFullWidth(str) { ... }

export function toFullWidth(str) { ... }

を一つ置いて、
「帳票・PDF・レガシー連携など“全角で見せたい／送りたい”ところだけここを通す」
というルールにしてみてください。

それができた瞬間、あなたの文字列処理は
「場当たり的な全角対応」から
「意図を持って半角／全角を使い分ける設計」に一段レベルアップします。