バリデーションとは？コード付きで解説

皆さんは、「バリデーション」って聞いたことがありますか？

プログラミングの世界では、とても重要になってくる概念です。

今日は、そのバリデーションについて、JavaScriptのコードを交えて解説しようと思います。

バリデーションってなに？

バリデーションとは、日本語に直訳すると「検証」です。

プログラミングにおいては、特に「入力値の検証」を指すことが多いですね。

たとえば、電話番号の入力欄にひらがなで文字が入力されていると、電話番号として扱えませんよね。

メールアドレスの入力欄に電話番号などを入力された場合などは、

そこに入力されるべき文字列として正しいとは言えないです。

こういった間違った入力、あるいは悪意のあるスクリプトの書き込みを防止するために、

検証(validation)する必要があります。

つまり、

ユーザから入力されたデータが正しい形式・条件を満たしているかを確認することをバリデーションと言うわけです。

どんな時に使う？

実際には、ウェブサイトのフォームで情報を入力する際によく使われます。

例えば、新規会員登録やログイン時に、ユーザ名やパスワード、メールアドレスなどを入力する必要がありますよね。

この時に、入力されたデータが適切な形式となっているか、バリデーションを通じて確認するのです。

仮にあなたが作ったWebサービスの新規登録画面があるとして、

メールアドレスを入力してください▼

となっているところに、とあるユーザーによって

メールアドレスを入力してください▼

hogehogeマン

と、もはやメールアドレスの形すらしてないような文字列を入力されたとすると、

さすがにこのまま登録できてしまうとアプリケーションとしてどうなの？ということになります。

正しい入力形式になっているかを判断すべきなので、ここでバリデーションが使われるわけです。

バリデーションがないとどうなる？

バリデーションがないと上記のように変な文字列を入れても通ってしまうことになり、

それが本当にメールアドレスなのかどうかシステムは判断できません。

入力されたデータが不適切な形式だった場合、プログラムが予期しない動作をしたり、

悪意ある攻撃を許したりすることにつながります。

これらを防ぐために、バリデーションは非常に重要になってくるわけです。

コードで見てみよう

ではバリデーションを実装していないコードと、バリデーションを実装したコードの2パターンを見てみましょう。

まず、バリデーションを実装していないコードです。

function submitForm() {
  let email = document.getElementById('email').value;
  console.log(`送信されたメールアドレス: ${email}`);
}

次に、バリデーションを実装したコードです。

function validateEmail(email) {
  let regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return regex.test(email);
}

function submitForm() {
  let email = document.getElementById('email').value;
  if (!validateEmail(email)) {
    alert('正しいメールアドレスを入力してください。');
    return;
  }
  console.log(`送信されたメールアドレス: ${email}`);
}

バリデーションを実装したコードでは、

メールアドレスが正しい形式であるかをチェックしてから処理を進めていて、

もしバリデーションの判定パターンに正しく合致できていない場合は、

正しいメールアドレスを入力してください。

とアラートで表示するようになっています。

ちなみに下記のコードの部分では「regex」という変数に正規表現が代入されています。

function validateEmail(email) {
  let regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  return regex.test(email);
}

これによってメールアドレスかどうかを判定するようにしています。

正規表現とは
文字列のパターンを表現するための特殊な記述方法で、特定のパターンが含まれているかをチェックする際によく使われる。

ここは詳しく知りたい方だけ読んでくれたらいいですが、

[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$という部分がメールアドレスのパターンを表しています。

具体的には、

• [a-zA-Z0-9._-]+: @の前に1文字以上の英数字またはピリオド、アンダースコア、ハイフンが来る
• @: @記号が続く
• [a-zA-Z0-9.-]+: @の後に1文字以上の英数字またはピリオド、ハイフンが来る
• .: ピリオドが続く
• [a-zA-Z]{2,6}: ピリオドの後に2～6文字の英字が来る

というパターンを表しています。regex.test(email)によって、入力されたメールアドレスがこのパターンに合致するか（つまり、適切なメールアドレスの形式であるか）をチェックしています。

話は少し逸れましたが、メールアドレスの一例を挙げてバリデーションのあるなしを紹介しました。

さいごに

今回は、バリデーションについて解説しました。要点をまとめると、

・バリデーションは「入力値の検証」を指す
・フォームの入力情報を確認する際などに使用する
・ユーザからの入力が正しい形式であることを保証し、予期せぬエラーを防ぐ役割がある
・実装により、不適切なデータがシステムに送信されるのを防げる

となります。バリデーションは、ユーザー体験とシステムの安定性を保つために重要な概念です。

ぜひ今後のプログラミングに活かしてみてくださいー。