デジタルトレンドナビ
システム開発

2024.03.07

バリデーションチェックの基本

バリデーションチェックの基本

Webアプリケーション開発において、ユーザー入力を正しく処理することは非常に重要です。意図しないデータが送信された場合、エラーが発生したり、セキュリティ上のリスクが生じたりする可能性があります。


そこで、バリデーションチェックの出番です。バリデーションチェックとは、ユーザーが入力したデータが正しい形式や内容であるかを検証する処理です。


本記事では、バリデーションチェックの基本的な仕組みと、初心者でも簡単に実装できる方法を解説します。

この記事でわかること

  • バリデーションチェックとは?
  • バリデーションチェックの種類
  • バリデーションチェックの実装例

バリデーションチェックとは?

バリデーションチェックとは?

バリデーションチェックとは、Webフォームに入力されたデータが正しいかどうかを確認する処理のことを指します。例えば、メールアドレスの形式が正しいかどうか、電話番号が数字のみで入力されているかどうかなどをチェックします。

バリデーションチェックの必要性

バリデーションチェックを行うことで、以下のようなメリットを得られます。

ユーザー入力の誤りを防ぐ

  • 間違ったデータが送信されることを防ぎ、エラー発生を抑制
  • ユーザーインターフェースの改善にもつながる

セキュリティを強化する

  • 不正なデータ入力を防ぎ、SQLインジェクションなどの攻撃を防ぐ
  • ユーザーの個人情報保護にも役立つ

データの品質を向上させる

  • 正しいデータのみを保存することで、データ分析や処理の効率化につながる
  • データの信頼性を向上させる

バリデーションチェックの種類

バリデーションチェックの種類

バリデーションチェックには、大きく分けて以下の2種類があります。

  • クライアントサイドバリデーション
  • サーバーサイドバリデーション

クライアントサイドバリデーション

クライアントサイドバリデーションは、ユーザーのブラウザ上で実行されるバリデーションチェックです。JavaScriptを用いて実装されます。

クライアントサイドバリデーションのメリットは、以下のような点が挙げられます。

  • サーバーへの負荷を軽減できる
  • ユーザーにリアルタイムでエラーメッセージを表示できる

デメリットとしては、以下のような点が挙げられます。

  • JavaScriptを無効にしているブラウザでは動作しない
  • 複雑なバリデーションチェックを実装するのが難しい

サーバーサイドバリデーション

サーバーサイドバリデーションは、サーバー側で実行されるバリデーションチェックです。PHPやRubyなどのサーバーサイド言語を用いて実装されます。

サーバーサイドバリデーションのメリットは、以下のような点が挙げられます。

  • JavaScriptを無効にしていても動作する
  • 複雑なバリデーションチェックを実装しやすい

デメリットとしては、以下のような点が挙げられます。

  • クライアントサイドバリデーションよりも処理速度が遅い
  • ユーザーにエラーメッセージを表示するまでに時間がかかる

バリデーションチェックの実装例

バリデーションチェックの実装例

クライアントサイドバリデーション

[HTML]

<input type=”text” name=”email” required>
<input type=”submit” value=”送信”>

[JavaScript]

const emailInput = document.querySelector('input[name="email"]');

emailInput.addEventListener('input', () => {
  const email = emailInput.value;
  const regex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])| 
  (([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

  if (!regex.test(email)) {
    emailInput.classList.add('error');
  } else {
    emailInput.classList.remove('error');
  }
});

上記のコードでは、HTMLのrequired属性を用いて、メールアドレスの入力必須チェックを行っています。また、JavaScriptのaddEventListenerを用いて、inputイベントが発生した際にバリデーションチェックを行っています。

バリデーションチェックには、正規表現を用いて入力値の形式をチェックするなど、さまざまな方法があります。

サーバーサイドバリデーション

[PHP]

<?php
  $email = $_POST['email'];
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo 'メールアドレスが正しくありません';
    exit;
  }

  // ここに処理
?>

上記のコードでは、PHPのfilter_var関数を用いて、メールアドレスの形式チェックを行っています。

まとめ

まとめ

バリデーションチェックは、Webフォームの入力データの正しさを確認する重要な処理です。クライアントサイドバリデーションとサーバーサイドバリデーションを組み合わせて、適切なバリデーションチェックを行うようにしましょう。

投稿者

  • デジタルトレンドナビ編集部

    システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション(DX)など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。