TypeScriptでユーザー入力の型チェックを安全に行う方法を徹底解説！初心者でもわかるユニオン型と型ガード

1. ユーザー入力は「なんでも入る」危険なデータ

1. ユーザー入力は「なんでも入る」危険なデータ

Webアプリケーションでは、フォーム入力やAPIで送られてくるデータは、プログラマーが想定していない値が入ることがあります。例えば、数字を入れてほしい場面で文字が入ったり、空っぽの入力だったりします。

JavaScriptでは動的型付け言語（どうてきかたづけげんご）のため、自由に型が変わります。これは便利ですが、誤入力によってエラーが起きる危険があるということでもあります。

そこでTypeScriptの出番です！ TypeScriptでは「このデータはこういう型」と決めることができ、誤った型を防げます。

2. ユニオン型とは？複数の型を許可できる型

2. ユニオン型とは？複数の型を許可できる型

ユーザー入力では「数値または文字列」など、複数の型が来ることがあります。そんな場合に便利なのがユニオン型です。

ユニオン型は、A または B のどちらかという型を表します。

let input: string | number;
input = "こんにちは";
input = 100;

このように、受け入れる型の種類を広げることができます。

3. 型ガードとは？分岐で正しい型を特定

3. 型ガードとは？分岐で正しい型を特定

ユニオン型を使うときは、「今どちらの型？」と判断する必要があります。そこで役立つのが型ガードです。

型ガードを使えば、条件によって型を絞り込み（型狭め）、安全にコードを書けます。

function checkInput(value: string | number) {
    if (typeof value === "string") {
        console.log("文字列です: " + value.toUpperCase());
    } else {
        console.log("数値です: " + (value * 2));
    }
}

文字列です: HELLO

4. ユーザー入力を安全にチェックする実践例

4. ユーザー入力を安全にチェックする実践例

例えば、フォームから「年齢」を入力してもらう場合、数字でなければ困ります。文字が入っていないかチェックするコードを書いてみましょう。

function handleUserAge(input: unknown) {
    if (typeof input === "number") {
        console.log("年齢は " + input + " 歳です");
    } else {
        console.log("数値を入力してください");
    }
}

数値を入力してください

unknown型を使うことで「安全に型ガードで判断しないと使えない」設計にできます。

5. リテラル型を使って選択肢を限定する

5. リテラル型を使って選択肢を限定する

ユーザーが決まった選択肢を入れる場合、リテラル型を使うとエラーを防げます。

type Gender = "male" | "female" | "other";

function checkGender(g: Gender) {
    console.log("性別: " + g);
}

checkGender("male");

違う文字列を入力すると、すぐにエラー表示で教えてくれるので安全です。

6. ユーザー入力チェックのポイントまとめ解説

6. ユーザー入力チェックのポイントまとめ解説

• ユニオン型で複数の型を柔軟に許可する
• 型ガードで正しい型を判断して安全に処理する
• unknown型を使えば「チェック必須」になるので安心
• リテラル型で選択肢を限定し、誤入力を防ぐ

このように、TypeScriptを活用すると、初心者でも簡単に安全な入力チェックができるようになります。

Webアプリケーション開発では非常に重要な考え方なので、ぜひ覚えておきましょう！

まとめ

まとめ

ユーザー入力チェックはTypeScriptで安全性を高める重要ポイント

今回の記事では、TypeScriptを使ってユーザー入力の型チェックを安全に行う方法について、ユニオン型や型ガードを中心に学びました。Webアプリケーションや業務システムでは、フォーム入力やAPI経由で送られてくるデータを扱う場面が非常に多く、そのデータが「本当に正しい型なのか」を確認しないまま処理してしまうと、思わぬ不具合やエラーにつながります。

JavaScriptは柔軟で自由度が高い反面、どんな型の値でも受け入れてしまうという特徴があります。そのため、数値を期待していた場所に文字列が入り、実行時にエラーが発生することも珍しくありません。TypeScriptは、そうした問題を未然に防ぐために、型という強力な仕組みを提供しています。今回紹介したユニオン型と型ガードは、その中でも特に実践的で、初心者から実務レベルまで幅広く使われている重要な考え方です。

ユニオン型で柔軟さと安全性を両立する

ユーザー入力は、必ずしも一つの型だけとは限りません。「文字列または数値」「未入力または数値」など、複数の型を許容したい場面は多く存在します。そんなときに役立つのがユニオン型です。ユニオン型を使うことで、「この値はこの型か、もしくはこの型」と明示でき、想定外の型を排除できます。

ただし、ユニオン型を使っただけでは、そのまま安全に処理できるわけではありません。TypeScriptは「どちらの型か分からない状態」では、対応するプロパティやメソッドを使わせてくれません。そこで必要になるのが型ガードです。ユニオン型と型ガードは、必ずセットで考えることが大切です。

型ガードで「今の型」を確定させる

型ガードは、条件分岐を使って「この値は今この型です」とTypeScriptに教えるための仕組みです。typeofを使った基本的な型ガードは、文字列や数値などのプリミティブ型を判定する際に非常に便利です。これにより、型が確定した後の処理では、安全にメソッドや計算を行えるようになります。

また、ユーザー入力を扱う際にはunknown型を使うのも重要なポイントです。unknown型は「中身が分からない」という状態を明示する型で、型ガードを通さない限り安全に使えません。そのため、「必ずチェックしてから使う」という設計を自然に作ることができます。これは、入力チェックを忘れがちな初心者にとって、非常に心強い仕組みです。

リテラル型で入力ミスを根本から防ぐ

ユーザーに選択肢を限定した入力をさせたい場合は、リテラル型が効果的です。「male」「female」「other」のように、あらかじめ許可された値だけを型として定義することで、それ以外の入力をコンパイル時点で防げます。これにより、実行前にミスに気づけるため、デバッグの手間も大幅に減ります。

リテラル型は、フォームの選択項目やステータス管理など、実務でも頻繁に登場します。ユニオン型と組み合わせることで、より厳密で分かりやすい型設計が可能になります。

サンプルコードで振り返る安全な入力チェック

function validateInput(value: unknown): string {
    if (typeof value === "string") {
        return "文字列入力: " + value;
    }
    if (typeof value === "number") {
        return "数値入力: " + value;
    }
    return "不正な入力です";
}

const userInput: unknown = "TypeScript";
console.log(validateInput(userInput));

このように、unknown型から始めて型ガードで判定することで、どんな入力が来ても安全に処理できます。ユーザー入力を直接信頼せず、一度チェックを挟むという考え方は、セキュリティや品質の面でも非常に重要です。

TypeScriptで安心できる入力処理を身につけよう

ユーザー入力チェックは、どんなアプリケーションでも避けて通れないテーマです。TypeScriptを使えば、ユニオン型、型ガード、unknown型、リテラル型といった仕組みを組み合わせることで、初心者でも堅牢で読みやすいコードを書くことができます。最初は少し難しく感じるかもしれませんが、考え方を理解すれば、自然と安全なコードが書けるようになります。

入力チェックを丁寧に行う習慣は、将来大規模な開発やチーム開発に進んだときにも必ず役立ちます。今回学んだ内容を、ぜひ実際のコードで繰り返し使ってみてください。