TypeScriptでフォームのステップごとにバリデーションを分離する設計とは？初心者にわかりやすく徹底解説

1. フォームのバリデーションとステップ分離の基本

1. フォームのバリデーションとステップ分離の基本

パソコンの操作に慣れていない方でも、ウェブサイトで自分の名前や住所、メールアドレスを入力したことがあるかと思います。このときに、文字の入力漏れがないか、おかしな文字が入っていないかを自動的に検査する仕組みのことを、専門用語でデータバリデーション、または単に入力チェックと呼びます。

一般的な入力画面では、すべての項目を1つの画面に入力してもらうのではなく、「最初にお名前と連絡先」、「次にパスワードの登録」、「最後に決済情報の入力」というように、段階を分けて進める形式が多く採用されています。これをステップフォームと呼びます。

このステップフォームを作る際、すべての入力チェックを一箇所にまとめて記述してしまうと、プログラムが非常に複雑になり、不具合の原因になります。そこで、画面のステップごとにチェックを行う仕組みを完全に切り離して管理する手法が、バリデーションの分離設計です。これにより、それぞれの画面が自分の受け持つ範囲のチェックだけに集中できるようになり、安全で分かりやすいシステムが完成します。

2. なぜTypeScriptを使うと入力チェックが安全になるのか

2. なぜTypeScriptを使うと入力チェックが安全になるのか

プログラムを作成する際、データの形式が正しいかどうかを監視することはとても重要です。TypeScriptというプログラミング言語の最大の強みは、データに対して型というルールを設定できる点にあります。

型とは、そのデータが文字なのか、数値なのか、あるいはYESかNOかで答える情報なのかをあらかじめ定めておくための、データの型枠のようなものです。TypeScriptはこの型枠のルールが非常に厳格であるため、もし開発者が間違えて「名前の入力欄に数値を入れて処理をしよう」とするプログラムを書いてしまった場合、実際に画面を動かす前の段階で、パソコンが「その書き方は間違っています」とエラーを出して教えてくれます。この仕組みを静的型チェックと呼びます。

ステップごとにバリデーションを分離する場合も、この型というルールをそれぞれのページごとに用意しておくことで、別のページの項目が混ざり込んでしまうといった重大なミスを未然に防ぐことが可能になります。

3. 最初のステップであるお名前入力のチェック方法

3. 最初のステップであるお名前入力のチェック方法

それでは、具体的なプログラムの例を見ていきましょう。まずは最初の段階として、ユーザーの「お名前」と「年齢」だけを入力してもらう最初のページを想定します。ここでやりたいチェックは、名前がしっかりと文字で入力されていることと、年齢が適切な数値で入力されていることです。

プログラムの中では、それぞれの項目に問題がないかを調べる命令を個別に準備します。以下のコードでは、名前が空っぽではないか、年齢が二十歳以上であるかどうかを判定する、最もシンプルで基本的な仕組みを記述しています。

function validateFirstStep(name: string, age: number): boolean {
    if (name === "") {
        console.log("お名前が入力されていません。");
        return false;
    }
    if (age < 20) {
        console.log("二十歳未満の方は登録できません。");
        return false;
    }
    console.log("最初のステップの入力チェックはすべて合格です。");
    return true;
}

let resultStep1 = validateFirstStep("山田太郎", 25);

上記のプログラムを実行してみると、入力された値に問題がないため、次のような結果が画面に表示されることになります。

最初のステップの入力チェックはすべて合格です。

このように、関数と呼ばれる命令のまとまりを作り、その中で一つ一つの条件を確認していくことが、バリデーションの第一歩となります。

4. 次のステップである連絡先入力のチェック方法

4. 次のステップである連絡先入力のチェック方法

最初のステップの確認が無事に完了したら、次は二番目のステップに進みます。このページでは、連絡先となる「メールアドレス」の入力を受け付けることにしましょう。ここでは、先ほどのお名前や年齢のことは一度忘れて、メールアドレスのチェックだけに専念する新しい命令を用意します。

メールアドレスのチェックでは、文字の中にアットマークという特定の記号が含まれているかどうかを調べることが一般的です。このように、それぞれのページごとに処理を完全に分けることで、プログラムの構造がすっきりと整理されます。以下が、二番目のステップのための具体的なプログラムです。

function validateSecondStep(email: string): boolean {
    if (email.includes("@") === false) {
        console.log("メールアドレスの形式が正しくありません。");
        return false;
    }
    console.log("二番目のステップの入力チェックはすべて合格です。");
    return true;
}

let resultStep2 = validateSecondStep("example.com");

このプログラムでは、わざとアットマークの付いていない正しくない文字を入力してみます。すると、実行結果は以下のようになります。

メールアドレスの形式が正しくありません。

このように、不適切な入力が行われたときには、即座にそれを検知して画面に警告を伝えるための準備を整えることができます。それぞれの関数が独立しているため、最初のページに影響を与えることなく、二番目のページのルールだけを変更することも容易です。

5. 各ステップのルールをまとめる型設計のテクニック

5. 各ステップのルールをまとめる型設計のテクニック

ここまでで、それぞれのページのチェックを行う個別の命令を作ることができました。しかし、実際のシステム開発では、それらの入力データを最終的に一つの大きな塊としてまとめて管理する必要があります。

そこで、TypeScriptの最も得意とする型という機能を利用して、それぞれのステップで扱うデータの形をあらかじめ定義しておきます。これにより、どのページでどのデータが使われるのかが、誰が見ても一目で理解できるようになります。ここでは、それぞれの段階ごとのデータの枠組みを言葉で定義するプログラムを書いてみましょう。

type NameData = {
    userName: string;
    userAge: number;
};

type ContactData = {
    userEmail: string;
};

let page1Data: NameData = {
    userName: "佐藤花子",
    userAge: 30
};

console.log("登録されたお名前は " + page1Data.userName + " です。");

このプログラムを実行すると、定義された型枠に沿って正しくデータが保存され、その内容が次のように出力されます。

登録されたお名前は 佐藤花子 です。

型をしっかりと決めておくことで、文字を入れるべき場所に間違えて数値を割り当ててしまうようなミスが起きなくなり、全体の設計が非常に強固なものになります。

6. 分離したバリデーションを順番に実行する全体の仕組み

6. 分離したバリデーションを順番に実行する全体の仕組み

最後の仕上げとして、これまで別々に作成してきた各ページの入力チェックの仕組みを一連の流れとして結合し、順番に実行していく全体の制御システムを作ります。ユーザーが画面の進むボタンを押すたびに、該当するページのチェック命令を呼び出すという動きになります。

以下のプログラムは、現在のページ番号を表す数字を用意し、その数字に応じて実行するチェックを自動的に切り替える仕組みです。これを行うことで、ユーザーが現在滞在しているページ以外の不要なチェックが動いてしまうのを防ぐことができます。

function runWorkflow(stepNumber: number, inputText: string): void {
    if (stepNumber === 1) {
        if (inputText === "") {
            console.log("エラー：ステップ1の入力が空です。");
        } else {
            console.log("ステップ1の確認に成功しました。次の画面へ進みます。");
        }
    } else if (stepNumber === 2) {
        if (inputText.includes("@") === false) {
            console.log("エラー：ステップ2のメール形式が不正です。");
        } else {
            console.log("ステップ2の確認に成功しました。登録が完了しました。");
        }
    }
}

runWorkflow(1, "テストユーザー");
runWorkflow(2, "test@example.com");

このプログラムは、ステップの1番目と2番目を連続してテストしています。実行した結果は、以下の通りに出力されます。

ステップ1の確認に成功しました。次の画面へ進みます。
ステップ2の確認に成功しました。登録が完了しました。

それぞれの処理が綺麗に独立しているため、もし将来的に3番目のステップとして住所入力を追加することになっても、他の場所を壊すことなく、安全に新しいチェック処理を組み込むことが可能となります。これが、TypeScriptで実現する、メンテナンス性に優れたデータバリデーションの分離設計の本質です。