JavaScript と jQuery でユーザーログイン機能を実装する

はじめに

このプロジェクトでは、JavaScript と jQuery を使ってユーザーログイン機能を実装する方法を学びます。このプロジェクトは、特にデータの動的化の分野において、必須のフロントエンド開発スキルを開発するのに役立ちます。

👀 プレビュー

成功した結果は以下の通りです。

成功したログイン画面

失敗した結果は以下の通りです。

ログイン試行の失敗結果

🎯 タスク

このプロジェクトでは、以下のことを学びます。

jQuery の AJAX 機能を使って JSON ファイルからユーザーデータを取得する方法
入力されたユーザー名とパスワードをユーザーデータと照合する方法
ログイン試行に基づいて適切な成功または失敗メッセージを表示する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

jQuery の AJAX メソッドを使って HTTP 要求を行い、レスポンスを処理すること
jQuery を使って DOM を操作し、ログイン結果に基づいて UI を更新すること
ユーザー入力をログイン機能と統合し、ログインプロセスを処理すること

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── bootstrap.min.css ## Bootstrap ファイル
├── index.html ## ユーザーログインページ
├── jQuery-3.6.0.min.js ## jQuery ファイル
├── userlist.json  ## JSON ファイル
├── login.js   ## ユーザーログイン用の JavaScript コード
├── index.html ## ユーザーログインページ

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

ユーザーデータを取得する

このステップでは、jQuery のajax関数を使ってuserlist.jsonファイルからユーザーデータを取得する方法を学びます。

login.jsファイルを開き、login関数を見つけます。
login関数の中に、以下のコードを追加してuserlist.jsonファイルに対して AJAX 要求を行います。

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // ユーザーデータは現在、'data'パラメータに格納されています
      console.log(data);
    }
  });
}

このコードはuserlist.jsonファイルに対して GET 要求を行います。

ユーザーログインを検証する

このステップでは、入力されたユーザー名とパスワードを AJAX 要求から取得したユーザーデータと比較する方法を学びます。

AJAX 要求のsuccessコールバック関数の中に、以下のコードを追加して、入力されたユーザー名とパスワードがユーザーレコードのいずれかと一致するかどうかを確認します。

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    let judge = data.userlist.some((item) => {
      return item.username == username && item.password == password;
    });
    //...
  }
});

このコードは、data.userlist配列のユーザーレコードのいずれかが入力されたユーザー名とパスワードと一致するかどうかを確認するためにsomeメソッドを使用しています。

someメソッドの呼び出しの後に、以下のコードを追加して適切な成功または失敗メッセージを表示します。

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    //...
    if (judge) {
      $("#tip1").removeClass("fade");
      $("#tip2").addClass("fade");
    } else {
      $("#tip2").removeClass("fade");
      $("#tip1").addClass("fade");
    }
  }
});

このコードは、jQuery を使用してページ上の成功と失敗メッセージ要素の表示を操作しています。

ログイン機能を統合する

この最後のステップでは、ページ上のユーザー入力要素とログイン機能を統合する方法を学びます。

$(document).ready()関数の中で、「login」ボタンのクリックイベントハンドラを見つけます。

$("#btnsubmit").click(function () {
  // TODO
});

クリックイベントハンドラの中に、以下のコードを追加して入力されたユーザー名とパスワードの値を取得し、login関数を呼び出します。

$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

このコードは、ユーザーがユーザー名とパスワード入力フィールドに入力した値を取得し、それらの値でlogin関数を呼び出します。

login.jsファイルを保存し、ブラウザでindex.htmlページを更新します。異なるユーザー名とパスワードの組み合わせを入力し、「login」ボタンをクリックして、成功と失敗のメッセージを確認してみてください。

成功した結果は以下の通りです。

成功したログインメッセージの表示

失敗した結果は以下の通りです。

ログイン失敗メッセージの表示

おめでとうございます！ユーザーログイン機能の実装を完了しました。

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。