Web アプリで住所を作成して管理する

はじめに

このプロジェクトでは、Web アプリケーションで新しい住所を作成し、住所を管理する方法を学びます。このプロジェクトでは、州・都市の階層型ドロップダウン、フォーム検証、ラベルのスタイリング、および新しい住所のレンダリングの実装が含まれます。

👀 プレビュー

address form demo gif

🎯 タスク

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

data.js ファイルのデータを使って州のドロップダウンを初期化する方法
州・都市の階層型ドロップダウン機能を実装する方法
タグリストのラベルにクリックイベントを追加し、選択されたラベルをアクティブにし、他のラベルを非アクティブにする方法
新しい住所を保存する前に、住所、連絡先、電話番号のフィールドを検証する方法
新しい住所リスト項目を作成し、住所リストに追加する方法

🏆 成果

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

JavaScript を使って DOM を操作する
ユーザーインタラクションとイベントを処理する
フォーム検証とデータ処理を実装する
HTML 要素を動的に作成して追加する

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

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

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

├── index.html
├── css
├── images
└── js
    ├── data.js
    └── index.js

ここで：

index.html はメインページです。
css はスタイルファイル用のフォルダです。
images は画像用のフォルダです。
js/data.js は州と都市のデータです。
js/index.js は完成させる必要のある JavaScript ファイルです。

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

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

州・都市の階層型ドロップダウンを実装する

このステップでは、州・都市の階層型ドロップダウン機能を実装する方法を学びます。

js/index.js ファイル内の provincechange() 関数を探します。
この関数は、州が選択されたときに都市のドロップダウンを更新する役割を果たします。
まず、document.getElementById("param_province") を使って選択された州のドロップダウン要素への参照を取得します。
次に、document.getElementById("param_city") を使って都市のドロップダウン要素への参照を取得します。
その後、selectedProvince.value を使って州のドロップダウンから選択された州のインデックスを取得します。
そして、選択された州のインデックスを使って、data.js ファイルの towns 配列から対応する都市を取得します。
最後に、都市のドロップダウンオプションの長さを都市の数に設定し、各ドロップダウンオプションのテキストと値を設定するために都市をループ処理します。

// Implement the state-city cascading dropdown.
function provincechange() {
  var selectedProvince = document.getElementById("param_province");
  var city = document.getElementById("param_city");
  var { value } = selectedProvince;
  var cities = towns[value];
  city.length = cities.length;
  for (var i = 0; i < cities.length; i++) {
    city.options[i].text = cities[i];
    city.options[i].value = i;
  }
}

ラベルにクリックイベントを追加する

このステップでは、タグリストのラベルにクリックイベントを追加する方法を学びます。これにより、選択されたラベルのスタイルがアクティブになり、他のラベルは非アクティブになります。

js/index.js ファイル内の addClick() 関数を探します。
この関数は、ラベルにクリックイベントを追加する役割を果たします。
まず、document.querySelectorAll(".mark a") を使ってすべてのラベル要素への参照を取得します。
次に、選択されたラベルのインデックスを格納する param_mark 入力フィールドへの参照を取得します。
その後、ラベル要素をループ処理して、各要素にクリックイベントリスナーを追加します。
イベントリスナーの中で、まず labels.forEach((l) => l.classList.remove("active")) を使ってすべてのラベルから active クラスを削除します。
次に、label.classList.add("active") を使ってクリックされたラベルに active クラスを追加します。
最後に、param_mark 入力フィールドの値をクリックされたラベルのインデックスに設定します。

function addClick() {
  var labels = document.querySelectorAll(".mark a");
  var input = document.getElementById("param_mark");

  labels.forEach((label, index) => {
    label.addEventListener("click", () => {
      labels.forEach((l) => l.classList.remove("active"));
      label.classList.add("active");
      input.value = index;
    });
  });
}

住所情報を検証して保存する

このステップでは、住所情報を検証し、新しい住所を住所リストに保存する方法を学びます。

js/index.js ファイル内の saveInfo() 関数を探します。
この関数は、入力フィールドを検証し、新しい住所を保存する役割を果たします。
まず、州、都市、住所、マーク、名前、および電話番号の入力フィールドの値を取得します。
次に、州、住所、名前、または電話番号のフィールドが空であるかどうかを確認します。これらの必須フィールドのいずれかが空の場合、警告ダイアログを表示します。
すべての必須フィールドが入力されている場合、新しいリスト項目要素 (<li>) を作成し、住所情報で埋めます。
新しい住所リスト項目には、ラベル（選択されたマークに基づく）、完全な住所（州と都市）、住所、および名前と電話番号が含まれます。
最後に、新しい住所リスト項目を .address-list 要素に追加し、アドレス管理ページにリダイレクトするために back() 関数を呼び出します。

function saveInfo() {
  var { value: provinceIdx, options: provinces } =
    document.getElementById("param_province");
  var { value: cityIdx, options: cities } =
    document.getElementById("param_city");
  var { value: address } = document.getElementById("param_address");
  var { value: markId } = document.getElementById("param_mark");
  var labelNodes = document.querySelectorAll(".mark a");
  var label = labelNodes[markId].text;
  var { value: name } = document.getElementById("param_name");
  var { value: phone } = document.getElementById("param_phone");

  if (provinceIdx === 0 || !address || !name || !phone) {
    document.querySelector(".warning-dialog").style.display = "block";
    return;
  }

  var addressListElement = document.querySelector(".address-list");
  var newAddressElement = document.createElement("li");
  newAddressElement.innerHTML = `
    <div class="show-area">
      <label class="school">${label}</label>
      <span>${provinces[provinceIdx].text}${cities[cityIdx].text}</span>
    </div>
    <div class="show-address">
      <span>${address}</span>
      <a><img src="./images/edit.png" /></a>
    </div>
    <div class="show-info">
      <span>${name}</span>
      <span>${phone}</span>
    </div>
  `;
  addressListElement.appendChild(newAddressElement);
  back();
}

これらの手順に従うことで、プロジェクトで「新しい住所を追加」機能を正常に実装することができました。おめでとうございます！

最終的なページの表示は以下の通りです。

Image Description

まとめ

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

住所管理 Web アプリケーション