TypeScriptでバリデーションメッセージを型に基づいて管理する方法！初心者向け完全ガイド

1. バリデーションと型管理の基本とは

1. バリデーションと型管理の基本とは

日常の生活の中で、スマートフォンの画面から名前やパスワードを入力することがよくあります。そのときに、文字数が足りなかったり、必須の場所が空欄だったりすると「名前を入力してください」や「パスワードは8文字以上で入力してください」といった赤い文字の注意書きが表示されます。この、入力されたデータが正しいかどうかをチェックする仕組みのことをバリデーションと呼びます。

そして、そのバリデーションを行う際に表示する注意書きの文章のことをバリデーションメッセージやエラーメッセージと呼びます。プログラミングを行うとき、これらのメッセージをただの文字として適当に書いていると、文字を打ち間違えたり、修正するときにどこを直せばいいか分からなくなったりします。そこで活躍するのが、データの種類や約束事をカチッと決めることができるTypeScript（タイプスクリプト）という仕組みです。型という設計図に基づいてメッセージを管理することで、間違いのない安全なプログラムを作ることができます。

2. パソコンに役割を覚えさせるオブジェクトの基本

2. パソコンに役割を覚えさせるオブジェクトの基本

まずは、パソコンに複数のエラーメッセージをまとめて覚えさせる方法を学びましょう。プログラミング未経験の方に向けて説明すると、パソコンの中に「エラーメッセージの辞書」を作るようなイメージです。この辞書のことを、プログラムの世界ではオブジェクトと呼びます。オブジェクトは、名前と中身をペアにしてたくさん保存できる便利な箱です。

例えば、「名前が空欄のとき」は「名前を入力してください」、「年齢がマイナスのとき」は「正しい年齢を入力してください」というように、原因とメッセージをセットにして管理します。実際のプログラムを見てみましょう。下記のコードでは、入力チェックのメッセージをひとまとめにしています。

const errorMessageList = {
    emptyName: "名前を入力してください。",
    invalidAge: "正しい年齢を入力してください。",
    shortPassword: "パスワードは文字数が足りません。"
};

console.log(errorMessageList.emptyName);

上記のプログラムを実行すると、パソコンの画面には下記のように出力されます。このように、原因に応じたメッセージを簡単に呼び出すことができます。

名前を入力してください。

3. 型を使ってメッセージの設計図を作る方法

3. 型を使ってメッセージの設計図を作る方法

先ほどの辞書を作る方法だけでも便利ですが、それだけだと文字を打ち間違えたときにパソコンが気づいてくれません。そこで、TypeScriptの最大の特徴である型（かた）という設計図を作ります。型とは、これから作るデータがどのような形をしているかをあらかじめ指定する約束事です。

今回は、エラーメッセージの種類を厳しく制限するための設計図を作ります。プログラミングでは、typeというキーワードを使って独自の設計図を作ることができます。今回は「ユーザー登録のときに使うエラーメッセージの型」を定義してみましょう。これにより、指定された名前以外のメッセージを勝手に追加したり、名前を間違えたりすると、パソコンがすぐに「形が違います」と赤線を出して教えてくれるようになります。

type UserMessageTemplate = {
    requiredEmail: string;
    invalidEmail: string;
};

const emailMessages: UserMessageTemplate = {
    requiredEmail: "メールアドレスは必須入力です。",
    invalidEmail: "メールアドレスの形式が正しくありません。"
};

console.log(emailMessages.invalidEmail);

このプログラムを実行すると、下記のように正しく設定されたメッセージが表示されます。設計図があるおかげで、開発者は安心して文字を入力できます。

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

4. 応用的な型表現である読み取り専用の設定

4. 応用的な型表現である読み取り専用の設定

エラーメッセージの辞書を作った後、プログラムの別の場所でそのメッセージが勝手に書き換えられてしまったら困ります。例えば、「名前を入力してください」という大切な文章が、プログラムのミスで全然違う文字に変わってしまったら、画面を見る人が混乱してしまいます。そのため、一度決めたエラーメッセージは絶対に書き換えられないように鍵をかけておく必要があります。

TypeScriptには、データを後から変更できないようにするreadonly（リードオンリー）という便利な機能があります。これを使うと、読み取り専用のデータとなり、中身を上書きしようとするとパソコンがエラーを出して未然に防いでくれます。安全性を高めるために、実際の現場でも非常によく使われる設定です。

type SystemErrorConfig = {
    readonly serverError: string;
    readonly networkError: string;
};

const appErrors: SystemErrorConfig = {
    serverError: "システムエラーが発生しました。時間を置いてお試しください。",
    networkError: "通信環境が良い場所で再度接続してください。"
};

console.log(appErrors.serverError);

このプログラムを実行すると、下記のように安全に保護されたメッセージを出力することができます。上書きの心配がないため、大規模なシステムでも安心して使い続けることができます。

システムエラーが発生しました。時間を置いてお試しください。

5. 文字の種類を限定するリテラル型での管理

5. 文字の種類を限定するリテラル型での管理

さらに高度で親切な管理方法として、文字そのものを型として扱う方法があります。これをリテラル型と呼びます。通常、プログラミングで文字はすべて一括りで扱われますが、リテラル型を使うと「この変数には、指定した特定の文字しか入れてはいけません」という超強力なルールを作ることができます。

例えば、入力チェックの結果として返ってくる状態が「成功」「警告」「致命的」の3種類だけだとします。この3つの文字以外が入り込まないように制限をかけることで、予期せぬ不具合を完全にシャットアウトできます。縦棒の記号を使って「または」という意味を持たせ、複数の文字を登録します。実際の書き方を見てみましょう。

type ErrorSeverityLevel = "low" | "medium" | "high";

function printLogMessage(level: ErrorSeverityLevel) {
    if (level === "high") {
        console.log("緊急事態です。管理者へ連絡してください。");
    } else {
        console.log("注意または確認が必要です。");
    }
}

printLogMessage("high");

上記のプログラムを実行すると、下記のように条件に応じたメッセージがしっかりと出力されます。もし関数を呼び出すときに間違えて別の文字を入れると、実行する前にパソコンが間違いを指摘してくれます。

緊急事態です。管理者へ連絡してください。

6. 条件に応じてメッセージを自動で選ぶ仕組み

6. 条件に応じてメッセージを自動で選ぶ仕組み

これまでに学んだオブジェクトと型を組み合わせて、いよいよ実践的なバリデーションの仕組みを作ってみましょう。画面から入力されたデータを受け取り、その内容が正しいかどうかを判定して、型に基づいて管理されているメッセージの辞書から適切な文章を自動的に選んで画面に表示するプログラムです。

ここでは、文字の長さをチェックする簡単な仕組みを考えます。パスワードの入力欄をイメージしてください。文字が全く入力されていない場合と、入力されているけれど文字数が少なすぎる場合の2つのパターンを判定します。これまでの知識がすべて詰まった実用的なプログラムです。

type PasswordErrorKeys = "empty" | "tooShort";

const passwordErrorDictionary: Record = {
    empty: "パスワードが入力されていません。",
    tooShort: "パスワードは6文字以上で入力してください。"
};

function checkPasswordInput(input: string) {
    if (input === "") {
        console.log(passwordErrorDictionary.empty);
    } else if (input.length < 6) {
        console.log(passwordErrorDictionary.tooShort);
    } else {
        console.log("正常に受け付けられました。");
    }
}

checkPasswordInput("abc");

このプログラムに「abc」という短い文字を渡して実行すると、文字数が3文字で6文字未満であるため、下記のように自動で適切なメッセージが選択されて出力されます。

パスワードは6文字以上で入力してください。

7. 型に基づいたメッセージ管理が重要な理由

7. 型に基づいたメッセージ管理が重要な理由

プログラミングを始めたばかりの頃は、「なぜわざわざこんなに細かく型を設定して面倒なことをするのだろう」と思うかもしれません。しかし、システムが大きくなればなるほど、この型による管理が絶大な効果を発揮します。もし型を使わずに、プログラムのあちこちに直接「名前が未入力です」といった文字を書き込んでいると、後から「言葉遣いを少し丁寧に修正したい」となったときに、すべての場所を探して手作業で直さなければならなくなります。その作業の中で必ず修正漏れや、別の場所を誤って消してしまうといったミスが発生します。

一方で、今回のように一箇所にエラーメッセージを集約し、さらにTypeScriptの型で「この名前のメッセージがここにある」と定義しておけば、修正が一瞬で終わります。また、新しいエラーメッセージを追加したときも、設計図の型を更新するだけで、プログラム全体のどこに新しいメッセージを組み込めばいいのかをパソコンが自動でナビゲートしてくれます。このように、型を用いた管理は、開発者が楽をして、かつ絶対にバグを出さないための最高のお助けツールなのです。基本をしっかりと押さえて、安全で綺麗なプログラムを作成していきましょう。