TypeScriptでバリデーションルールを動的に組み立てる方法！初心者向けデータ検証完全ガイド

1. データバリデーションとは？

1. データバリデーションとは？

データバリデーションとは、入力されたデータが正しい形式かどうかをチェックする仕組みのことです。身近な例でいうと、インターネットのウェブサイトで会員登録をするときに、メールアドレスの欄に文字が入っていなかったり、パスワードが短すぎたりしたときに画面に赤い文字で注意が出ることがあります。あの仕組みがデータバリデーションです。日本語ではデータ検証や入力チェックとも呼ばれます。この検証を行うことで、プログラムが予期せぬ動きをして壊れてしまうのを防ぎ、安全にシステムを動かすことができるようになります。

2. 動的に組み立てるとはどういう意味？

2. 動的に組み立てるとはどういう意味？

動的に組み立てるとは、プログラムが動いている最中に、その場の状況に合わせて処理の内容を変化させるという意味です。反対の言葉は静的といいます。静的なチェックは、いつでも一律で同じルールを適用します。しかし、実際のシステムでは、ユーザーの種類や選択した項目によってチェックのルールを変えたい場面が多くあります。たとえば、アンケート画面で職業を会社員と選んだときだけ会社名を入力必須にする、というような処理です。このように、その時々の条件に応じてチェックするルールを自動で合体させたり切り替えたりすることを、動的に組み立てると表現します。

3. バリデーションルールの基本構造

3. バリデーションルールの基本構造

まずは、チェックを行うための基本的なルールをプログラムで表現してみましょう。今回は最も単純な方法として、チェックを行う関数を組み合わせていく方法を使います。関数とは、何かデータを入れると、あらかじめ決められた計算や処理を行って結果を返してくれる仕組みのことです。文字が空っぽではないかを確認するルールと、文字の長さが足りているかを確認するルールを別々に作っておき、それらを必要に応じて組み合わせる土台を作ります。

4. 必須入力チェックの関数を作ってみよう

4. 必須入力チェックの関数を作ってみよう

最初の実践として、文字がしっかりと入力されているかを確かめる必須入力のチェック機能を作ります。プログラミングの世界では、何も文字が入っていない状態のことを空文字と呼びます。データが空文字の場合はエラーメッセージを返し、文字が入っていれば問題なしとするプログラムを書きます。まずはこの単体のルールをしっかりと理解しましょう。

function checkRequired(value: string): string {
    if (value === "") {
        return "この項目は入力が必須です。";
    }
    return "";
}

let result1 = checkRequired("");
console.log(result1);

上記のプログラムを実行すると、以下の出力結果になります。何も入力されていないため、エラーメッセージが表示されます。

この項目は入力が必須です。

5. 文字数チェックの関数を作ってみよう

5. 文字数チェックの関数を作ってみよう

次に、入力された文字の長さを確認するルールを作ります。例えば、パスワードを設定するときに短すぎる文字列を禁止したい場合に使います。文字の長さを数えるには、文字列が持っている特別な仕組みを使用します。今回は、指定された長さより短い場合にエラーを出す仕組みにします。これにより、必須チェックとは別の独立したルールが誕生します。

function checkMinLength(value: string, min: number): string {
    if (value.length < min) {
        return min + "文字以上で入力してください。";
    }
    return "";
}

let result2 = checkMinLength("abc", 5);
console.log(result2);

上記のプログラムを実行すると、以下の出力結果になります。３文字しか入力されていないため、５文字以上必要であるというエラーが出ます。

5文字以上で入力してください。

6. 複数のルールを配列で管理する

6. 複数のルールを配列で管理する

ここからがいよいよ動的な組み立ての本番です。別々に作ったチェックのルールを、配列という仕組みを使って一つにまとめます。配列とは、複数のデータを順番に並べて保管できる、仕切りのついた箱のようなものです。この箱の中に、その時々に必要なルールを自由に出し入れすることで、チェックの内容を動的に変更できるようになります。箱に入れたルールを順番に実行していき、エラーが見つかった時点でそのメッセージを画面に表示します。

type CheckRule = (v: string) => string;

let activeRules: CheckRule[] = [];

activeRules.push((v) => checkRequired(v));
activeRules.push((v) => checkMinLength(v, 8));

let inputData = "pass";
let errorMessage = "";

for (let rule of activeRules) {
    let result = rule(inputData);
    if (result !== "") {
        errorMessage = result;
        break;
    }
}

console.log(errorMessage);

上記のプログラムを実行すると、以下の出力結果になります。必須チェックは合格しますが、次の８文字以上のチェックで引っかかるため、文字数に関するエラーメッセージが表示されます。

8文字以上で入力してください。

7. 条件に応じてルールを動的に切り替える実践

7. 条件に応じてルールを動的に切り替える実践

最後に、実際のウェブサイトの仕組みを想定して、ユーザーの選択によってチェックするルールが自動的に増える仕組みを完成させましょう。例として、メルマガ配信を希望するにチェックを入れた人だけに、メールアドレスの形式チェックを追加するプログラムを作成します。希望しない人の場合は、無駄なチェックを行わないように動的にルールを制御します。

function checkEmailFormat(value: string): string {
    if (value.indexOf("@") === -1) {
        return "正しいメールアドレスの形式ではありません。";
    }
    return "";
}

let rules: ((v: string) => string)[] = [];
rules.push((v) => checkRequired(v));

let wantsNewsletter = true;

if (wantsNewsletter === true) {
    rules.push((v) => checkEmailFormat(v));
}

let emailInput = "sample-at-mark";
let finalError = "";

for (let currentRule of rules) {
    let checkResult = currentRule(emailInput);
    if (checkResult !== "") {
        finalError = checkResult;
        break;
    }
}

console.log(finalError);

上記のプログラムを実行すると、以下の出力結果になります。メルマガを希望しているためメールアドレスの形式チェックが動的に追加され、マークが含まれていないというエラーが正しく検出されます。

正しいメールアドレスの形式ではありません。