映画チケット予約システムを構築する

はじめに

このプロジェクトでは、映画チケット予約システムを構築する方法を学びます。このプロジェクトでは、非同期で映画データを取得し、映画情報を Web ページにレンダリングし、席選択と合計金額計算の機能を実装します。

👀 プレビュー

movie reservation system demo

🎯 タスク

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

axios ライブラリを使用して非同期でデータを取得する方法
映画名、価格、座席の空き状況などの映画情報を Web ページにレンダリングする方法
席選択の機能を実装し、選択された席の数と合計金額を更新する方法
選択された席の数と合計金額を表示するように表示を更新する方法

🏆 成果

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

axios ライブラリを使用して非同期でデータを取得する
DOM を操作して動的なコンテンツを表示する
イベントハンドリングを使った対話型のユーザーインターフェイスを実装する
ユーザーのアクションに基づいて UI を更新する

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

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

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

├── css
│   └── style.css
├── data.json
├── index.html
├── effect.gif
└── js
    ├── axios.min.js
    └── script.js

その中で：

index.html はメインページです。
css/style.css は提供されたページスタイルファイルです。
data.json は要求する必要のあるデータファイルです。
js/axios.min.js は axios リクエストライブラリファイルです。
js/script.js はコードを補完する必要のあるファイルです。

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

次に、VM の上部にある「Web 8080」を開き、ページを手動で更新して、ブラウザで以下のような表示を確認します。

Image Description

非同期データの取得とレンダリング

このステップでは、axios ライブラリを使って非同期でデータを取得し、映画情報を Web ページにレンダリングする方法を学びます。

js/script.js ファイルを開きます。

axios.get() を使って data.json ファイルからデータを取得します。

let data = {};
axios
  .get("../data.json")
  .then((res) => {
    console.log(res);
    data = res.data;
    movieNameNode.innerHTML = data.name;
    moviePriceNode.innerHTML = data.price;
    data.seats.forEach((item) => {
      let row = document.createElement("div");
      row.className = "row";
      item.forEach((item) => {
        let seat = document.createElement("div");
        seat.className = "seat";
        row.appendChild(seat);
        if (item) {
          seat.classList.add("occupied");
        }
      });
      seatAreaNode.appendChild(row);
    });
  })
  .catch((err) => {
    console.log(err);
  });

上記のコードは、data.json ファイルからデータを取得し、その後、対応する DOM ノード内の映画名と価格を更新します。また、data.seats 配列の各行に対して席ノードの行を作成して座席エリアを生成し、既に予約されている席には "occupied" クラスを追加します。

席選択と合計金額の計算

このステップでは、席選択と合計金額の計算の機能を実装します。

js/script.js ファイルを開きます。
座席エリア内のすべての席ノードを取得するための変数を初期化します。
```
const seatNodes = document.querySelectorAll(".seat");
```
選択された席の数と合計金額を追跡するための変数を初期化します。
```
let selectedSeatsCount = 0;
let totalPrice = 0;
```

座席エリアにクリックイベントリスナーを追加します。

seatAreaNode.addEventListener("click", (event) => {
  const clickedSeat = event.target;
  if (
    clickedSeat.classList.contains("seat") &&
    !clickedSeat.classList.contains("occupied")
  ) {
    clickedSeat.classList.toggle("selected");
    if (clickedSeat.classList.contains("selected")) {
      selectedSeatsCount++;
      totalPrice += data.price;
    } else {
      selectedSeatsCount--;
      totalPrice -= data.price;
    }

    updateDisplay();
  }
});

上記のコードは、座席エリアにクリックイベントリスナーを追加します。空いている席がクリックされると、その席ノードの "selected" クラスを切り替え、それに応じて selectedSeatsCount と totalPrice 変数を更新します。

選択された席の数と合計金額を更新する updateDisplay() 関数を実装します。
```
function updateDisplay() {
  count.textContent = selectedSeatsCount;
  total.textContent = totalPrice;
}
```
この関数は、ID が "count" と "total" のノードのテキストコンテンツを更新して、現在の選択された席の数と合計金額を表示します。

これらの手順を完了すると、映画チケット予約機能が完全に実装され、ユーザーが席を選択して合計金額を確認できるようになります。最終的なページの表示は以下のとおりです。

Image Description

まとめ

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