JavaScriptでメールアドレスとパスワードを検証する方法

メールとパスワードの検証とは

Webアプリケーション開発において、ユーザーのログイン情報が正しいかどうかを確認する処理は非常に重要です。今回は、JavaScriptを使って、入力されたメールアドレスとパスワードがデータベース上のユーザー情報と一致するかどうかを検証する方法を解説します。

まず、SNSプラットフォームの複数のユーザーの中から2人のログイン情報を格納したダミーデータ(配列)を用意します。

const array = [{
    email: 'usman@gmail.com',
    password: '123'
  },
  {
    email: 'ali@gmail.com',
    password: '123'
  }
];

実装する関数の仕様

今回作成するJavaScript関数は、引数としてメールアドレスの文字列とパスワードの文字列を受け取ります。

そして、その組み合わせに該当するユーザーがデータベース(ここでは配列)内に存在するかどうかに基づいて、ブール値(true / false)を返す必要があります。

• 一致するユーザーが存在する場合 → true
• 存在しない場合 → false

サンプルコード

以下が実際のコードです。

const array = [{
    email: 'usman@gmail.com',
    password: '123'
}, {
    email: 'ali@gmail.com',
    password: '123'
}];

const matchCredentials = (email, password) => {
    const match = array.find(el => {
        return el.email === email && el.password === password;
    });
    return !!match;
};

console.log(matchCredentials('usman@gmail.com', '123'));
console.log(matchCredentials('usman@gmail.com', '1423'));

コードのポイント

この実装では、配列のfind()メソッドを使用しています。find()は、条件に一致する最初の要素を返し、見つからない場合はundefinedを返します。

さらに、戻り値として!!match(二重否定)を使用することで、オブジェクトやundefinedといった値を明確なブール値(trueまたはfalse)に変換しています。これにより、呼び出し側で常に真偽値として扱えるため、コードの可読性と安全性が向上します。

実行結果

上記のコードをコンソールで実行すると、次のような出力が得られます。

true
false

結果の解説

1. 1つ目の呼び出し:matchCredentials('usman@gmail.com', '123') — メールアドレスもパスワードも配列内のデータと完全に一致しているため、trueが返されます。
2. 2つ目の呼び出し:matchCredentials('usman@gmail.com', '1423') — メールアドレスは一致しますが、パスワード'1423'は登録されている'123'と異なるため、falseが返されます。

このように、メールアドレスとパスワードの両方が一致した場合のみ認証が成功する、シンプルなログイン検証ロジックを実装できます。実際のアプリケーションでは、パスワードを平文で保存せずハッシュ化するなど、セキュリティ対策を必ず行ってください。