カードバインド機能を実装する

はじめに

このプロジェクトでは、jQueryとAJAXを使ってカードバインド機能を実装する方法を学びます。このプロジェクトは、フロントエンド開発における重要なスキルであるデータの動的化の基本を理解するのに役立ちます。

👀 プレビュー

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

失敗した場合のエフェクトは以下の通りです。

🎯 タスク

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

• jQueryのajax関数を使ってJSONファイルからデータを取得する方法
• ユーザー入力と取得したカードデータを比較する方法
• 比較結果に基づいて成功または失敗のメッセージを表示する方法

🏆 成果

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

• jQueryとAJAXを使ってカードバインド機能を実装する
• フロントエンド開発における重要なスキルであるデータの動的化の基本を理解する
• サーバーからデータを取得するためのAJAXリクエストを行う
• jQueryを使ってDOMを操作して動的なコンテンツを表示する
• Bootstrapクラスを使ってアラートの表示と非表示を制御する

Skills Graph

プロジェクト構造をセットアップする

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

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

├── index.html ## カードバインドページ
├── bootstrap.min.css ## Bootstrapファイル
├── js
├───────cardnolist.json  ## JSONファイル
├───────index.js ## 完成させるコードが記載されたJavaScriptファイル
├───────jquery-3.6.0.min.js ## jQueryファイル

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

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

カードデータを取得する

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

1. js/index.jsファイルを開きます。
2. bind関数の中に、以下のコードを追加してcardnolist.jsonファイルに対してAJAXリクエストを行います。

function bind(cardno, password) {
  // TODO
  $.get("js/cardnolist.json", function (data) {
    // カードデータは現在 'data' 変数に格納されています
    console.log(data);
  });
}

このコードはjs/cardnolist.jsonファイルに対してAJAXリクエストを行います。

カードバインド機能を実装する

このステップでは、カードバインド機能を実装して、ユーザーの入力と取得したカードデータを比較します。

1. js/index.jsファイルの中で、bind(cardno, password)関数を探します。
2. // TODOのコメントを以下のコードに置き換えます。

$.get("js/cardnolist.json", (data) => {
  let flag = data.cardnolist.some(
    (value) => value.cardno == cardno && value.password == password
  );
  if (flag) {
    $("#tip1").removeClass("fade").addClass("show");
    $("#tip2").removeClass("show").addClass("fade");
  } else {
    $("#tip2").removeClass("fade").addClass("show");
    $("#tip1").removeClass("show").addClass("fade");
  }
});

このコードはJSONファイルからカードデータを取得し、ユーザーの入力がカード番号とパスワードのいずれかと一致するかどうかを確認し、その後Bootstrapクラスを使用して適切な成功または失敗のメッセージを表示します。

カードバインド機能をテストする

1. js/index.jsファイルを保存し、ブラウザでindex.htmlページを更新します。

2. 有効なカード番号とパスワード（例：「001431562123561238」と「123456」）を入力し、「submit」ボタンをクリックします。

   • 成功メッセージが表示されるはずです。

3. 無効なカード番号とパスワードを入力し、「submit」ボタンをクリックします。

   • 失敗メッセージが表示されるはずです。

おめでとうございます！カードバインド機能を正常に実装しました。

まとめ

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