TypeScriptで複数条件のバリデーションを型安全に判定する方法！初心者向け完全解説

1. バリデーションと型安全とは？

1. バリデーションと型安全とは？

プログラミングの世界では、画面から入力されたデータが正しい形式であるかを確かめる作業のことをバリデーションと呼びます。日本語では「入力チェック」や「妥当性の確認」と言われることが多いです。例えば、会員登録の画面でメールアドレスの欄に文字が入力されているか、パスワードの文字数が足りているかなどを確認する大切な処理です。

そして、今回の重要なキーワードである型安全（かたあんぜん）とは、プログラムの中で扱うデータの種類をパソコンが厳しく見張り、間違った使い方向をしたときに実行する前に教えてくれる仕組みのことです。TypeScriptという言語は、この型安全の機能がとても優れているため、多くの開発現場で使われています。初心者の方でも、この仕組みを覚えることで、安全で壊れにくいプログラムを作ることができるようになります。

2. なぜ複数条件のチェックが必要なのか

2. なぜ複数条件のチェックが必要なのか

実際のインターネットのサービスでは、１つのデータに対して複数の条件を重ねて確認することがよくあります。例えば、ユーザーが登録する「ユーザー名」を考えてみましょう。このユーザー名が正しいかどうかを判断するためには、以下のような複数の条件をすべてクリアしなければなりません。

• 文字が何も入力されていない空っぽの状態ではないこと
• 文字数が長すぎたり短すぎたりしないこと（３文字以上、２０文字以下など）
• 使用してはいけない禁止文字が含まれていないこと

このように、１つのデータに対してたくさんのチェック項目を順番に、あるいは同時に確認していく作業を複数条件のバリデーションと呼びます。これを正しく書けないと、システムが予期せぬエラーを起こして止まってしまう原因になります。

3. 基礎となる条件の組み合わせ方

3. 基礎となる条件の組み合わせ方

複数の条件をチェックするときは、条件と条件を繋ぐための特別な記号を使います。これをプログラミングの用語で論理演算子（ろんりえんざんし）と呼びます。難しそうな名前ですが、意味はとても単純です。主に使うのは「かつ」と「または」の２つです。

「かつ」を表すときは、アンドの記号を２つ並べた記号を使います。これは、左右の条件がどちらも正しいときだけ全体として正しいとみなす仕組みです。「または」を表すときは、縦棒の記号を２つ並べた記号を使います。これは、左右の条件のうち、どちらか片方でも正しければ全体として正しいとみなす仕組みです。まずは、この２つの繋ぎ方を覚えることが、複数条件を扱う第一歩となります。

4. 最初のプログラムを書いてみよう

4. 最初のプログラムを書いてみよう

それでは、実際にTypeScriptのプログラムを書いて動きを確かめてみましょう。ここでは、入力された数字が「１８歳以上」であり、なおかつ「会員資格を持っている」という２つの条件を同時に満たしているかをチェックするプログラムを作成します。

let userAge: number = 20;
let hasLicense: boolean = true;

if (userAge >= 18 && hasLicense === true) {
    console.log("チェック成功です。入場できます。");
} else {
    console.log("チェック失敗です。入場できません。");
}

上記のプログラムを実行すると、画面には次のような結果が表示されます。条件がどちらも満たされているため、最初の処理が実行されます。

チェック成功です。入場できます。

ここで使われている「number」は数値の型を意味し、「boolean」は正しいか間違いかの２択を表す型です。これらを指定することで、型安全の基礎が作られます。

5. 型安全を強化する型ガードの使い方

5. 型安全を強化する型ガードの使い方

次に、TypeScript特有の便利な仕組みである型ガードについて解説します。型ガードとは、中身が何であるか不確かなデータに対して、特定の条件チェックを行うことで、そのデータの正体をパソコンに確定させる手法のことです。正体が確定すると、それ以降のプログラムでは安心してそのデータを使うことができるようになります。

例えば、文字が入っているかもしれないし、何も入っていないかもしれないという曖昧なデータがある場合、最初に文字の長さを確認するチェックを挟みます。そのチェックを通過した後は、パソコンが「このデータには確実に文字が入っている」と認識してくれるため、エラーが出なくなります。これが型安全にバリデーションを行うための核心的なテクニックです。

6. オブジェクトを使った高度な条件判定

6. オブジェクトを使った高度な条件判定

ここからは、複数のデータを１つにまとめた「オブジェクト」という仕組みを使ってバリデーションを行っていきます。オブジェクトとは、名前と値のペアを複数詰め込んだ箱のようなものです。今回は、商品のデータを受け取って、その価格と在庫の数を同時にチェックする関数（命令のまとまり）を作ります。

type Product = {
    price: number;
    stock: number;
};

function validateProduct(item: Product): boolean {
    if (item.price > 0 && item.stock >= 1) {
        return true;
    }
    return false;
}

let laptop: Product = { price: 50000, stock: 5 };
let result = validateProduct(laptop);
console.log("判定結果：", result);

このプログラムを実行すると、価格が０より大きく、在庫も１以上あるため、正しいデータとして判定されます。出力結果は以下のようになります。

判定結果： true

「type」を使って商品の形をあらかじめ定義しておくことで、もし価格に文字を入れてしまったり、存在しない項目をチェックしようとしたりすると、パソコンがすぐに赤線を引いて間違いを教えてくれます。

7. 独自関数でバリデーションを部品化する

7. 独自関数でバリデーションを部品化する

プログラムが大きくなってくると、同じチェック処理を何度も書くのが大変になります。そこで、バリデーションの処理を独立した部品として切り出す方法がおすすめです。今回は、ユーザーの入力データが「文字であること」と「指定の長さを満たしていること」を判定する専用の部品を作ってみましょう。

function isSafeString(text: unknown, minLength: number): boolean {
    if (typeof text === "string" && text.length >= minLength) {
        return true;
    }
    return false;
}

let inputData: unknown = "こんにちは";
if (isSafeString(inputData, 3)) {
    console.log("安全な文字列として確認されました。");
} else {
    console.log("条件を満たしていません。");
}

このプログラムを実行した結果は以下の通りです。「unknown」という何が来るか分からない型を使いつつ、内部でしっかりと種類を確かめているため、安全に文字の長さを測ることができます。

安全な文字列として確認されました。

このように処理を分けておくことで、どこでエラーが起きているのかが分かりやすくなり、後からの修正も簡単になります。

8. エラーメッセージを一緒に返すテクニック

8. エラーメッセージを一緒に返すテクニック

実用的なバリデーションでは、単に「正しいか間違いか」を判定するだけでなく、「どこが間違っているのか」という具体的な理由を画面に表示する必要があります。そのためには、チェック結果と一緒にエラーの文字情報をセットにして返す仕組みを作ると便利です。

type ValidationResult = {
    isValid: boolean;
    errorMessage: string;
};

function checkPassword(pass: string): ValidationResult {
    if (pass.length < 8) {
        return { isValid: false, errorMessage: "パスワードは８文字以上で入力してください。" };
    }
    if (pass.includes(" ") === true) {
        return { isValid: false, errorMessage: "パスワードにスペースを含めることはできません。" };
    }
    return { isValid: true, errorMessage: "" };
}

let myPassword = "abc";
let checkResult = checkPassword(myPassword);
console.log("エラー内容：", checkResult.errorMessage);

上記のプログラムを実行すると、文字数が足りないため、最初のチェックに引っかかります。出力結果は以下のようになります。

エラー内容： パスワードは８文字以上で入力してください。

この方法を使えば、複数の条件のうちどのルールに違反したのかを、利用者に親切に伝えることができるようになります。型をしっかりと決めているため、返却されるデータの形式がバラバラになる心配もありません。