TypeScriptの型チェックとバリデーションの違いとは？初心者向けデータ検証の基本

1. プログラミングにおけるデータ検証の重要性

1. プログラミングにおけるデータ検証の重要性

パソコンの操作やプログラミングをこれまでに一度もやったことがない方でも、インターネットで買い物をしたり、会員登録をしたりした経験はあるかと思います。その際、メールアドレスを入力する欄に数字だけを入れたり、スマートフォンの電話番号の欄に文字を入力したりすると、エラー画面が表示されて登録が進まないことがあります。このように、システムが予期しないおかしなデータを受け取ってしまわないように事前に確認する作業のことを、システム開発の世界ではデータ検証やエラーチェックと呼びます。

もしこのデータ検証を全く行わずにシステムを作ってしまうと、年齢を入れる場所に名前が登録されてしまったり、金額を入れる場所にマイナスの数字が入ってしまったりして、コンピュータが混乱して壊れてしまいます。そのため、Webサイトやアプリケーションを安全に動かすためには、正しいデータだけを受け付ける仕組みが絶対に必要不可欠になります。今回は、最新のシステム開発で非常によく使われているTypeScriptという道具を使いながら、この仕組みを正しく作るための二つのアプローチについて詳しく解説していきます。この違いを明確に理解することが、プログラミング初心者から一歩抜け出すための大切な鍵となります。

2. TypeScriptにおける型チェックとは何か

2. TypeScriptにおける型チェックとは何か

まず最初に、プログラムを作る側の視点で重要となる型チェックという仕組みについて説明します。型チェックとは、一言で言うと「プログラムを書いている最中に、コンピュータがデータの種類を監視して、書き間違いを教えてくれる機能」のことです。ここで言う「型」とは、データの種類のことを意味しています。例えば、文字の集まりは「文字列型」、計算に使う数字は「数値型」というように、コンピュータは全てのデータを種類ごとに分けて管理しています。

TypeScriptという言葉には「タイプ（型）」という文字が入っている通り、この型の管理が非常に得意なプログラミング言語です。開発者がプログラムの設計図を書く段階で、「この箱には数字だけを入れます」「この箱には文字だけを入れます」という約束事をあらかじめ決めておきます。すると、間違えて文字の箱に数字を入れようとした瞬間に、コンピュータが「指定された種類と違います」と赤線を引いて警告を出してくれます。このように、人間がプログラムを書くときのうっかりミスを、実際にシステムを動かす前の段階で防いでくれるのが型チェックの最大の役割です。これによって、開発中にバグと呼ばれるプログラムの不具合を大幅に減らすことができます。

3. 型チェックの具体的な動きをプログラムで見る

3. 型チェックの具体的な動きをプログラムで見る

それでは、型チェックが実際にどのように働くのか、具体的なプログラムの例を見てみましょう。ここでは、ユーザーの名前を保存するための箱を用意し、そこに間違った種類のデータを入れようとしたときに、コンピュータがどのように反応するかを確認します。まだプログラムを触ったことがない方でも、文字の形式に注目すれば簡単に見分けることができます。

let userName: string = "たろう";
userName = 12345;

上記のプログラムにおいて、: stringという部分が「この箱には文字列、つまり文字だけを入れます」という宣言にあたります。そして、最初の行で「たろう」という文字を入れるのは全く問題ありません。しかし、次の行で12345という数値を入れようとしています。このプログラムを実行しようとしたり、専用の編集画面で見たりすると、コンピュータは以下のようなエラーメッセージを表示して、プログラムが動くのをストップさせます。

型 'number' を型 'string' に割り当てることはできません。

このエラーは、プログラムを動かす前の段階で出力されます。つまり、開発者がパソコンの前で作業をしている時点で、間違いを確実に教えてくれるのです。これが型チェックの仕組みであり、安全なプログラムの土台となります。

4. データバリデーションとは何か

4. データバリデーションとは何か

次に、もう一つの重要な概念であるデータバリデーションについて説明します。型チェックが「プログラムを書くとき」のチェックだったのに対して、データバリデーションは「プログラムが実際に動いているとき」に行うデータの中身のチェックです。一般的には、日本語で入力妥当性検証や、単にバリデーションと表現されることが多いです。

なぜこれが必要なのかというと、型チェックだけでは防げないエラーがたくさんあるからです。例えば、画面の入力欄から「年齢」を入力してもらう場面を想像してください。型チェックのおかげで、文字ではなく「数値」が送られてくることは保証されているとします。しかし、その数値が「マイナス５歳」だったり「２万歳」だったりしたらどうでしょうか。これらは数学的には正しい数値ですが、人間の年齢としては明らかに間違っています。このような、データとしての形式は合っているけれど、現実のルールとして正しい中身になっているかどうかを判定する作業がデータバリデーションです。これは、システムが動き出してから、実際に画面から送られてきたデータに対してリアルタイムに実行されます。

5. データバリデーションの具体的なプログラム例

5. データバリデーションの具体的なプログラム例

データバリデーションは、プログラムの中で条件分岐という手法を使って書くことが一般的です。条件分岐とは、「もしデータがこのルールに当てはまっていたら、こういう処理をする」という仕組みのことです。実際のコードを見て、中身のチェックがどのように行われているかを確認してみましょう。今回は年齢の入力を想定したルールを作ります。

let inputAge: number = -5;

if (inputAge < 0 || inputAge > 150) {
    console.log("エラー：年齢は0歳から150歳の間で入力してください。");
} else {
    console.log("正しい年齢が入力されました。");
}

このプログラムでは、まず最初の行でinputAgeという箱に数字の-5を入れています。これは数値なので、先ほど説明した型チェックは問題なく通過します。しかし、その下のifと書かれた条件の部屋で、「もし数字が0より小さい、または150より大きかったらエラーにする」という個別のルールを設定しています。このプログラムを実際に動かすと、以下のような画面出力になります。

エラー：年齢は0歳から150歳の間で入力してください。

このように、実際に動かした結果としてデータのおかしさを指摘し、システムが暴走するのを防ぐのがデータバリデーションの役割です。

6. 型チェックとバリデーションの決定的な違い

6. 型チェックとバリデーションの決定的な違い

ここまでの説明で、二つの仕組みについてそれぞれの役割が見えてきたかと思います。ここで一度、この二つの決定的な違いを分かりやすく整理してみましょう。最も大きな違いは、「いつチェックが行われるか」というタイミングと、「どのようなデータが対象か」という目的の二点にあります。

型チェックは、プログラムを組み立てている建築中の段階で行われるものです。建築士が図面を見ながら、柱の長さや材料の種類が間違っていないかを確認する作業に似ています。そのため、プログラムが完成してインターネット上に公開された後は、型チェックの機能は役割を終えて消えてしまいます。一方で、データバリデーションは、建物が完成して実際に人が住み始めてから行われるものです。玄関に警備員を配置して、怪しい持ち物を持った人が入ってこないか、住人のルールを守っているかを毎日チェックする作業に該当します。このように、開発者を守るための型チェックと、動いているシステムとユーザーを守るためのデータバリデーションは、どちらか一方があれば良いというものではなく、両方を組み合わせて使うことで初めて完璧な安全性を手に入れることができるのです。

7. なぜ型チェックだけでバリデーションの代わりにならないのか

7. なぜ型チェックだけでバリデーションの代わりにならないのか

プログラミングを学び始めたばかりの頃は、「TypeScriptでしっかり型を決めておけば、画面からの入力チェックも自動的にやってくれるのではないか」と勘違いしてしまいがちです。しかし、それは技術的に不可能です。その理由は、インターネットを通じて画面から送られてくるデータは、プログラムの外側からやってくる予測できない未知の存在だからです。

TypeScriptが提供する型チェックは、あくまでプログラムの内部に最初から書かれている固定されたルールに対してのみ有効です。ユーザーがキーボードを使って画面に入力する文字や、スマートフォンから送信ボタンを押して届くデータの中身は、プログラムが動いている最中に初めて判明するものです。コンピュータは、事前に中身がわからないデータに対して、文字か数字かといった大まかな分類はできても、「文字数が適切か」「禁止された単語が入っていないか」といった細かい業務ルールまで自動で推測することはできません。そのため、外からやってくるデータに対しては、人間の手で明確なバリデーションのルールを記述してあげる必要があるのです。

8. 実践的な複合エラーチェックのコードを学ぼう

8. 実践的な複合エラーチェックのコードを学ぼう

最後に、型チェックとデータバリデーションの両方の考え方を取り入れた、少し実践的なプログラムの例を見てみましょう。今回は、新しくウェブサイトの会員登録をするときに、パスワードが適切な長さで入力されているかどうかを判定する仕組みを作ります。文字の種類を固定しながら、中身の長さも厳しくチェックする流れを体験してください。

let userPassword: string = "abc";

if (userPassword.length < 8) {
    console.log("エラー：パスワードは8文字以上にしてください。");
} else {
    console.log("安全なパスワードが設定されました。");
}

このプログラムでは、まず: stringによってパスワードが必ず「文字」のデータであることを型チェックの仕組みで保証しています。万が一、間違えて数字の塊をそのまま入れようとしたら開発中に気づくことができます。その上で、動いている最中に.lengthという道具を使って文字の長さを数え、「もし8文字より少なかったらエラーにする」というバリデーションの処理を行っています。今回のデータは「abc」という3文字だけなので、ルールに違反していると判定され、画面には以下のように表示されます。

エラー：パスワードは8文字以上にしてください。

この二重のガードレールを用意することによって、どんなに不慣れなユーザーが操作しても、システムが絶対に誤作動を起こさない頑丈なプログラムを作り上げることができるようになります。二つの違いをしっかりと頭に入れて、これからの学習に活かしていきましょう。