TypeScriptで全角・半角変換の完全ガイド！実用的10選

はじめに
●TypeScriptの基礎と文字列の重要性
- ○TypeScriptの文字列の特性
- ○全角と半角の違いとは
●TypeScriptでの全角・半角変換の方法
●TypeScriptでの全角・半角変換の応用例
- ○サンプルコード5：全角・半角を識別する関数の作成
○サンプルコード6：入力フォームでの全角・半角自動変換
●注意点と対処法
- ○TypeScriptの型の注意点
- ○変換時のエラーとその対処法
●カスタマイズ方法
- ○サンプルコード9：カスタム変換ルールの適用方法
- ○サンプルコード10：ライブラリを使用した変換方法
まとめ

はじめに

TypeScriptは、大規模なアプリケーション開発や厳格な型定義が求められる状況で頼りになる言語として、多くの開発者に利用されています。

そんなTypeScriptを使用して、文字列の全角・半角変換を行う方法について詳しく解説していきます。

このガイドを参照すれば、あなたもTypeScriptを用いて文字変換の手法を習得することができます。

TypeScriptで文字列操作をする際の基礎知識や、全角と半角の違いについての説明から、具体的なサンプルコード、そしてその応用例までを順番に解説していきます。

初心者の方でも安心して取り組めるよう、分かりやすく、詳細に説明していきます。

●TypeScriptの基礎と文字列の重要性

TypeScriptは、JavaScriptのスーパーセットとして知られているプログラミング言語です。

JavaScriptの動的な特性を持ちながら、静的な型システムを提供することで、大規模なアプリケーションの開発を容易にします。

この静的な型システムのおかげで、コードの品質を向上させることができ、さまざまなエラーをコンパイル時に検出することが可能になります。

そして、文字列はプログラミングの中で非常に中心的な役割を果たします。

ユーザー入力の取得、ファイルの読み書き、APIからのデータ取得、そしてそれらのデータを処理・表示する際に、文字列操作は欠かせません。

特に、日本語の文字列を扱う際には、全角と半角の違いという課題が頻繁に発生します。

この違いを正確に扱い、適切に変換する能力は、日本語を扱うアプリケーション開発において非常に重要です。

○TypeScriptの文字列の特性

TypeScriptの文字列は、基本的にJavaScriptの文字列と同じ特性を持っています。

文字列はダブルクオート(“)、シングルクオート(‘)、またはバッククオート(`)で囲むことで定義できます。

バッククオートを使用する場合は、テンプレートリテラルとして文字列内で変数を展開することが可能です。

例えば、

let 名前 = "田中";
let メッセージ = `こんにちは、${名前}さん!`;

このコードでは、名前変数を使ってテンプレートリテラル内で文字列を組み立てています。

このコードを実行すると、メッセージ変数には「こんにちは、田中さん!」という値が格納されます。

TypeScriptでは、文字列を扱う際に多数のメソッドやプロパティが利用できます。

これらのメソッドやプロパティを適切に利用することで、文字列の操作や加工が容易になります。

○全角と半角の違いとは

日本のコンピュータ環境でテキストを扱う際には、全角と半角の違いが非常に重要となります。

全角文字は、通常、2バイトのデータとして表現され、半角文字は1バイトのデータとして表現されます。

このため、テキストデータのサイズや文字の表示幅に違いが生じることがあります。

全角文字は、ほとんどの場合、日本語の漢字やひらがな、カタカナを表現するために使用されます。

一方、半角文字は、英数字や記号などの文字を表現するために使用されます。

しかし、日本語入力の際には、カタカナや特定の記号が半角で入力されることもあります。

このようなケースでは、全角と半角が混在するテキストデータが生成されるため、プログラムでの処理が複雑になることがあります。

特に、データベースに情報を保存する際や、テキストを表示する際に、全角と半角の違いを正確に扱うことは、ユーザー体験の向上やデータの一貫性を保つために非常に重要です。

●TypeScriptでの全角・半角変換の方法

TypeScriptを使用すると、文字列操作の処理が非常に効率的に行えます。

特に、日本のビジネスシーンやウェブサイトでは、全角と半角の文字列変換の要求が多く、TypeScriptを用いてこの変換を行う方法を知っておくと、非常に役立ちます。

今回は、TypeScriptでの全角・半角変換の基本的な方法に焦点を当て、初心者の方でも理解しやすいように詳しく解説していきます。

○サンプルコード1：文字列を全角から半角に変換

全角の文字列を半角に変換する基本的な方法を紹介します。

このコードでは、String.prototype.replaceメソッドを利用し、正規表現を使って全角の数字やアルファベットを半角に変換しています。

function zenkakuToHankaku(str: string): string {
    return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => {
        // 文字コードを取得し、差分を計算して半角に変換
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

const sample = "ＴｙｐｅＳｃｒｉｐｔ１２３";
const result = zenkakuToHankaku(sample);
console.log(result); // "TypeScript123"

このコードでは、zenkakuToHankaku関数を定義しています。

この関数には、全角の文字列を引数として受け取り、その文字列内の全角の英数字を半角に変換した結果を返します。

具体的には、正規表現の範囲を使用して、全角の英大文字、英小文字、数字を対象にしており、これらの文字を半角に変換する処理を行っています。

このコードを実行すると、”ＴｙｐｅＳｃｒｉｐｔ１２３”という全角の文字列が、”TypeScript123″という半角の文字列に変換された結果が得られます。

○サンプルコード2：文字列を半角から全角に変換

TypeScriptを使ったプログラム開発において、時折、文字列を半角から全角に変換するケースが出てきます。

たとえば、フォームの入力値を統一するときや、特定の文書形式に合わせる際に、この変換処理が必要となることがあります。

ここでは、そのような半角文字列を全角に変換する方法について、TypeScriptでの具体的なコードを表し、解説していきます。

function toFullWidth(str: string): string {
    return str.replace(/[\uff01-\uff5e]/g, (s) => {
        return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
    });
}

このコードでは、正規表現を使って半角の文字範囲を指定しています。

そして、replaceメソッドを使って、該当する半角文字を全角に変換しています。

具体的には、文字コードを使って、半角文字を全角文字に変換する処理を行っています。

このコードを実行すると、指定した文字列内の半角文字が全て全角に変換される結果を得ることができます。

例えば、toFullWidth("abcABC123!?")というコードを実行した場合、結果としてａｂｃＡＢＣ１２３！？という全角の文字列が返されることになります。

こちらの関数を使用すると、簡単に文字列の半角から全角への変換が行えるので、さまざまなシーンで活用できるでしょう。

○サンプルコード3：数字だけを半角に変換

TypeScriptを使って文字列内の全角数字を半角に変換する方法を解説します。

数字だけを半角にすると、計算やデータベースの操作が容易になります。

こちらの方法は特にデータベースへの入力値を統一したい際や、計算処理を行う前の前処理として役立ちます。

function convertFullWidthNumbersToHalfWidth(str: string): string {
    return str.replace(/[０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

このコードではreplaceメソッドを使って、文字列中の全角数字を半角に変換しています。

正規表現/[０-９]/gを使い、全角の数字を検索します。

そして、一致する全角数字ごとにコールバック関数が実行されます。

このコールバック関数内でString.fromCharCodeを使い、半角の数字に変換しています。

全角から半角に変換するために、文字のコードから0xFEE0を引いています。

このコードを実行すると、例えば、"今日は２０２３年８月２８日です"という文字列をconvertFullWidthNumbersToHalfWidth関数に渡すと、"今日は2023年8月28日です"という文字列が返されます。

全角の数字が半角の数字に変換されることが確認できます。

また、全角数字が混在するテキストや入力フォームの値などにこの関数を適用することで、統一された半角数字のデータを得ることができます。

データベースやCSVファイルへの保存、または計算処理を行う前に、この関数を利用して、データの前処理を行うと、後続の処理がスムーズに進みます。

○サンプルコード4：英字だけを全角に変換

TypeScriptを使用する際に、特定のシチュエーションで英字だけを全角に変換する必要が出てくることがあります。

例えば、文書のデザイン上、英字を目立たせたい場合や、特定のフォーマットに合わせる必要がある場合など、さまざまな背景が考えられます。

ここでは、TypeScriptを利用して、英字だけを全角に変換する方法を詳細に解説します。

function 英字のみ全角に変換(input: string): string {
    return input.replace(/[A-Za-z]/g, (match) => {
        return String.fromCharCode(match.charCodeAt(0) + 0xFEE0);
    });
}

このコードでは、文字列のreplaceメソッドを使って、英字を対象に全角変換を行っています。

/[A-Za-z]/gという正規表現を用いることで、英字（大文字・小文字）のみを対象にしています。

次に、変換したい部分（この場合は英字）に対して関数を実行します。

その関数内で、Unicodeの文字コードを利用して全角に変換します。

具体的には、charCodeAt(0)で文字のUnicodeを取得し、0xFEE0を足すことで英字の全角のUnicodeに変換しています。

そして、String.fromCharCodeメソッドを用いて、変換後の文字列を返しています。

このコードを実行すると、例えば”Hello”という文字列を入力として関数に渡すと、”Ｈｅｌｌｏ”という全角の英字に変換された文字列を返します。

逆に、英字以外の文字や記号は変換されずにそのままの状態で返されます。

これにより、英字だけを特定して全角に変換することができるため、文書のデザインや特定のフォーマットに合わせるなどの目的で使用することができます。

次回、さらにTypeScriptを用いた全角・半角変換の応用例について詳しく解説します。

特に、全角・半角を識別する関数の作成や、入力フォームでの全角・半角自動変換など、実際のアプリケーションで役立つ方法を中心に説明していきますので、お楽しみに。

●TypeScriptでの全角・半角変換の応用例

TypeScriptを学ぶ上で、文字列操作は避けては通れない重要なトピックの一つとなっています。

特に、日本語の文字列操作においては、全角と半角の変換が頻繁に求められるシチュエーションがあります。

今回は、その中でも応用的な全角・半角変換について、サンプルコードとともに解説していきます。

○サンプルコード5：全角・半角を識別する関数の作成

日常的な業務処理において、テキストの中から全角文字と半角文字を識別することは非常に役立ちます。

例えば、入力フォームでのバリデーションや、データベースへのデータ登録時の前処理など、さまざまな場面で使用されます。

このコードでは、与えられた文字列の中から全角文字と半角文字を識別し、それぞれの文字数を返す関数を作成しています。

このコードを実行すると、文字列内の全角文字数と半角文字数をそれぞれ取得した結果、その数値が表示されます。

function countCharacters(input: string): [number, number] {
    let fullwidthCount = 0;
    let halfwidthCount = 0;

    for (let char of input) {
        // 文字コードを取得
        const code = char.charCodeAt(0);

        // 半角の範囲
        if (code >= 33 && code <= 126) {
            halfwidthCount++;
        } else {
            fullwidthCount++;
        }
    }
    return [fullwidthCount, halfwidthCount];
}

const result = countCharacters("こんにちはWorld");
console.log(`全角文字数：${result[0]}, 半角文字数：${result[1]}`);

このコードには、文字列を一文字ずつ取得し、その文字の文字コードを調査する部分が含まれています。

文字コードの範囲によって全角か半角かを判定し、それぞれのカウントを増やしています。

上記のコードを実行すると、”こんにちはWorld”という文字列から全角文字数5文字と半角文字数5文字を認識し、その結果をconsole.logで表示します。

そのため、出力結果として「全角文字数：5, 半角文字数：5」という結果がコンソールに表示されることとなります。

○サンプルコード6：入力フォームでの全角・半角自動変換

WebアプリケーションやWebページにおいて、フォーム入力を受け付ける際、ユーザが全角で入力した場合でも半角に自動的に変換したいと思うことは多いでしょう。

ここでは、TypeScriptを使って、入力フォームの内容を全角から半角に自動変換する方法について詳しく解説します。

□TypeScriptによる入力フォームの全角・半角自動変換の方法

HTMLのテキスト入力フォームで入力された内容を、フォームからフォーカスが外れたとき（blurイベント発生時）に全角文字を半角に変換するTypeScriptのサンプルコードを紹介します。

// 全角文字を半角に変換する関数
function toHalfWidth(str: string): string {
    return str.replace(/[！-～]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

document.getElementById('input-form').addEventListener('blur', function(event) {
    const target = event.target as HTMLInputElement;
    target.value = toHalfWidth(target.value);
});

このコードでは、toHalfWidth関数を使って、指定された文字列内の全角文字を半角に変換しています。

このコードを実行すると、テキスト入力フォームに全角で入力された内容が半角に自動変換される結果が得られます。

□実際の動き

例えば、テキスト入力フォームに「テスト１２３」と全角で入力した場合、フォームからフォーカスを外すと、自動的に「テスト123」と半角数字に変換されるようになります。

これにより、バックエンド側での処理を単純化することができるだけでなく、ユーザの入力ミスを減少させる効果も期待できます。

また、この方法を応用して、全角英字も半角に自動変換したい場合は、toHalfWidth関数内の正規表現の範囲を調整することで対応できます。

// 全角文字（英数字含む）を半角に変換する関数
function toHalfWidthEnhanced(str: string): string {
    return str.replace(/[Ａ-Ｚａ-ｚ０-９！-～]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

document.getElementById('input-form').addEventListener('blur', function(event) {
    const target = event.target as HTMLInputElement;
    target.value = toHalfWidthEnhanced(target.value);
});

このコードでは、全角英字も含めて半角に変換しています。

したがって、テキスト入力フォームに「ＴＥＳＴ」と全角英字で入力された場合、フォーカスを外すと「TEST」と半角英字に変換されます。

○サンプルコード7：ファイル読み込み時の自動変換処理

TypeScriptにおいて、ファイルの内容を読み込んで自動で全角・半角の変換を行いたい場合があります。

特に、大量のデータを扱う際や、データの一貫性を保ちたい時に、このような自動変換処理が役立ちます。

ここでは、Node.jsのfsモジュールを使用してファイルを読み込み、その内容を全角から半角に自動変換する方法を解説します。

□TypeScriptのファイル読み込み

まず、Node.jsのfsモジュールを使用して、ファイルの内容を読み込む基本的な方法について確認します。

import fs from 'fs';

// ファイルを同期的に読み込む
const content = fs.readFileSync('sample.txt', 'utf-8');
console.log(content);

このコードではfs.readFileSyncメソッドを使ってsample.txtという名前のファイルを読み込んでいます。

読み込んだ内容は、contentという変数に格納されます。

□全角から半角への変換処理

次に、全角文字を半角文字に変換する関数を作成します。

function toHalfWidth(str: string): string {
    return str.replace(/[！-～]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

このコードではtoHalfWidthという関数を作成しています。

この関数は、全角の文字列を受け取り、その文字列内の全角文字を半角文字に変換して返します。

正規表現を使用して全角の文字を検出し、文字コードの操作を行って半角に変換しています。

□ファイル読み込みと自動変換を組み合わせる

これらのコードを組み合わせて、ファイルを読み込み時に自動変換を行う処理を作成します。

import fs from 'fs';

function toHalfWidth(str: string): string {
    return str.replace(/[！-～]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

const content = fs.readFileSync('sample.txt', 'utf-8');
const convertedContent = toHalfWidth(content);
console.log(convertedContent);

このコードを実行すると、sample.txtの内容が全角から半角に変換されてコンソールに表示されます。

実行結果として、もともとファイルに「こんにちは、世界！」という全角文字が含まれていた場合、コンソールには「こんにちは、世界!」という半角の感嘆符を含んだ文字列が表示されることになります。

○サンプルコード8：正規表現を使用した高度な変換処理

正規表現は、文字列の検索や置換を行うためのパターンを記述する方法の一つです。特に、複雑な条件で文字列を検索・置換したい場合に非常に有効です。

今回のテーマである全角・半角の変換においても、正規表現を利用することで、特定の範囲の文字だけを対象とした変換が可能となります。

このコードでは、正規表現を使って、指定された文字範囲のみを全角から半角に変換しています。

このコードを実行すると、対象となる全角文字が半角文字に変換された結果を得ることができます。

// 全角のアルファベットと数字を半角に変換する関数
function fullWidthToHalfWidth(str: string): string {
    return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) {
        return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
    });
}

let sampleText = "ＴｙｐｅＳｃｒｉｐｔでの全角123変換！";
let convertedText = fullWidthToHalfWidth(sampleText);

console.log(convertedText); // 出力：TypeScriptでの全角123変換！

このコードの詳細な説明を行います。

fullWidthToHalfWidthという関数を定義しています。
この関数は、引数として全角文字を含む文字列を受け取り、その文字列内の全角のアルファベットと数字を半角に変換して返します。
replaceメソッドを使って、文字列の置換を行っています。
第一引数には、正規表現パターンを指定しており、このパターンにマッチする全角のアルファベットと数字を対象としています。
マッチした全角文字を半角に変換するため、String.fromCharCodeメソッドを使用しています。
ここで、マッチした文字の文字コードから0xFEE0を引くことで、対応する半角の文字コードを取得しています。
sampleTextという変数に変換前の文字列を代入しています。
fullWidthToHalfWidth関数を使って、sampleTextの文字列を変換し、その結果をconvertedText変数に代入しています。
最後に、変換後の文字列をconsole.logで出力しています。

このコードを実行すると、”TypeScriptでの全角123変換！”という結果が出力されます。

このように、指定された範囲の全角文字だけを狙って半角に変換することができるのです。

●注意点と対処法

TypeScriptを使用して全角と半角の変換を行う際、いくつかの注意点とその対処法が存在します。

効率的に変換を行うためには、これらのポイントを理解し、適切な手段を取ることが必要です。

○TypeScriptの型の注意点

TypeScriptはJavaScriptに静的型を追加した言語であり、型の安全性を保つための強力な型システムを持っています。

そのため、文字列の変換を行う際にも、型の扱いに注意する必要があります。

例えば、数字として入力されたものを文字列として扱いたい場合や、文字列として入力されたものを数字として扱いたい場合には、適切な型変換を行う必要があります。

このコードでは、number型の変数をstring型に変換しています。

このコードを実行すると、数字が文字列として変換された結果、新しい文字列が得られます。

let num: number = 123;
let str: string = num.toString();
console.log(str); // "123"

逆に、string型の数字をnumber型に変換する際には、次のようなコードを使用します。

let strNum: string = "456";
let realNum: number = +strNum;
console.log(realNum); // 456

ただし、不正な形式の文字列をnumber型に変換しようとすると、NaNという特殊な値が返されます。

このようなケースを避けるためにも、変換前に文字列が正しい形式であるか確認することが推奨されます。

○変換時のエラーとその対処法

全角・半角変換を行う際には、特定の文字や記号が正しく変換されない場合があります。

例えば、特定の記号や絵文字が変換の対象外である場合や、変換後の文字が予期せぬ形になることが考えられます。

このようなケースに対応するためには、変換対象の文字列を確認し、必要に応じてカスタム変換ルールを適用することが考えられます。

具体的な例として、全角の英字を半角に変換する際に、「Ａ」が「A」になるように変換するコードを考えます。

function toHalfWidthEnglish(str: string): string {
  return str.replace(/Ａ-Ｚａ-ｚ/g, function(s) {
    return String.fromCharCode(s.charCodeAt(0) - 65248);
  });
}

let result = toHalfWidthEnglish("ＡＢＣ");
console.log(result); // ABC

このコードでは、全角英字を使って半角英字に変換しています。

このコードを実行すると、全角英字が半角英字に変換された結果、新しい文字列が得られます。

しかし、変換が完璧でない場合や予期せぬ結果が返される場合が考えられるため、変換後の文字列を確認し、必要に応じて変換ルールを調整することが必要です。

●カスタマイズ方法

TypeScriptを使用して全角と半角の変換を行う際、標準の変換ルールだけでは不十分な場合があります。

特定のプロジェクトやアプリケーションの要件に応じてカスタマイズすることが重要です。

ここでは、カスタム変換ルールの適用方法に焦点を当てて解説します。

○サンプルコード9：カスタム変換ルールの適用方法

TypeScriptでカスタムの全角・半角変換ルールを適用するには、変換処理を行う関数を自分で定義する必要があります。

下記のコードは、特定の文字のみを全角から半角に変換するカスタム関数を表しています。

function customZenToHan(str: string): string {
    const zen = "０１２３４５６７８９アイウエオ";
    const han = "0123456789aiueo";
    let result = "";

    for (let i = 0; i < str.length; i++) {
        const index = zen.indexOf(str[i]);
        result += index >= 0 ? han[index] : str[i];
    }
    return result;
}

const testStr = "今日は２０２３年５月１０日です";
const convertedStr = customZenToHan(testStr);
console.log(convertedStr);

このコードではcustomZenToHanという関数を使って、指定された全角の数字とある五十音の文字を半角に変換しています。

このコードを実行すると、今日は2023年5月10日ですという文字列が得られます。

このような方法で、プロジェクトの要件に合わせて変換ルールをカスタマイズすることができます。

一般に、文字の変換には配列や文字列のindexOfメソッドを利用します。

これにより、変換対象の文字がどの位置にあるかを判定し、その位置に応じて別の文字列から置換する文字を取得します。

この方法は、変換ルールのカスタマイズが必要な場面で非常に有効です。

上記のコード例では、全角の数字と”アイウエオ”を半角に変換するカスタマイズを行いましたが、この方法を利用すれば、任意の文字や文字列を対象にしたカスタマイズ変換が可能です。

○サンプルコード10：ライブラリを使用した変換方法

TypeScriptを使用して文字列を効率的に全角・半角に変換する際、手書きの関数だけでなく、専用のライブラリも利用できます。

ここでは、一般的に使用されるmojiというライブラリを利用して、TypeScriptで文字列の全角・半角変換を行う方法を解説します。

まず、mojiライブラリをプロジェクトにインストールする必要があります。

下記のコードを利用して、npmを使用してインストールします。

// npmを使用してmojiライブラリをインストール
npm install moji

上記のコードを実行すると、mojiライブラリがプロジェクトに追加されます。

次に、TypeScriptでmojiを使用して全角文字を半角文字に変換するサンプルコードを紹介します。

// mojiライブラリをインポート
import moji from 'moji';

// 全角文字列のサンプル
const zenkakuString = 'ＴｙｐｅＳｃｒｉｐｔ';

// mojiライブラリを使って全角文字を半角文字に変換
const hankakuString = moji(zenkakuString).convert('ZE', 'HE').toString();

console.log(hankakuString); // "TypeScript"

このコードでは、mojiライブラリを使って全角英字を半角英字に変換しています。

convert関数の第1引数に変換元の文字種、第2引数に変換先の文字種を指定することで、簡単に文字変換を行えます。

このコードを実行すると、コンソールに”TypeScript”という半角の文字列が出力されます。

さらに、mojiライブラリは半角文字を全角文字に変換する場面でも役立ちます。

次のサンプルコードを参考にしてください。

// 半角文字列のサンプル
const hankakuString2 = '12345';

// mojiライブラリを使って半角数字を全角数字に変換
const zenkakuString2 = moji(hankakuString2).convert('HE', 'ZE').toString();

console.log(zenkakuString2); // "１２３４５"

このコードでは、mojiライブラリを使って半角数字を全角数字に変換しています。

このコードを実行すると、コンソールに”１２３４５”という全角の数字が出力されます。

ライブラリを使用する利点は、多機能性や汎用性が高いこと、そして定期的な更新によりバグが修正されていることです。

しかし、外部ライブラリを使用することで、プロジェクトのサイズが増加することや互換性の問題が生じる可能性があるため、使用する際は注意が必要です。