10選！JavaScriptで座席表予約機能を簡単に作成・カスタマイズ

初心者向けJavaScript座席表予約機能作成例JS
2023.04.26
この記事は約13分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScriptで座席表予約機能を簡単に作成・カスタマイズすることができるようになります。

初心者の方でも分かりやすいように、基本概念から詳しく解説していくので、ぜひ最後までお読みください。

●座席表予約機能の基本概念

座席表予約機能とは、劇場や映画館、コンサート会場などで座席を選択して予約できる機能のことです。

通常、座席表は行(row)と列(column)で構成されており、座席の状態（空席・予約済み・選択中）に応じて表示が変わります。

今回は、初心者の方でも分かりやすいように、JavaScriptを使って座席表予約機能を作成・カスタマイズする方法を解説します。

●HTMLとCSSの準備

まずは、座席表を表示するためのHTMLとCSSを準備します。

下記のようなHTMLファイルを作成し、座席表の基本構造を定義しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>座席表予約機能</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="seat-map">
    <!-- ここに座席表が表示されます -->
  </div>
  <script src="scripts.js"></script>
</body>
</html>

次に、座席表の見た目を整えるためのCSSを定義します。

下記のようなCSSファイル(styles.css)を作成し、座席のスタイルを定義しましょう。

#seat-map {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 5px;
}

.seat {
  width: 30px;
  height: 30px;
  border: 1px solid #000;
  text-align: center;
  line-height: 30px;
}

.seat.available {
  background-color: #ccc;
}

.seat.reserved {
  background-color: #f00;
}

.seat.selected {
  background-color: #0f0;
}

これで、HTMLとCSSの準備ができました。

次に、JavaScriptで座席表予約機能を実装していきます。

●JavaScriptでの座席表予約機能の作成

まずは、座席の配置や選択、予約情報の表示を行う基本的な機能を実装していきましょう。

○サンプルコード1：座席の配置

座席を配置するために、次のようなコードをscripts.jsファイルに追加していきます。

// 座席の生成
function createSeats(row, column) {
  const seatMap = document.getElementById('seat-map');
  for (let i = 0; i < row; i++) {
    for (let j = 0; j < column; j++) {
      const seat = document.createElement('div');
      seat.className = 'seat available';
      seat.dataset.row = i;
      seat.dataset.column = j;
      seat.textContent = `${i + 1}-${j + 1}`;
      seatMap.appendChild(seat);
    }
  }
}

// 座席の生成を実行
createSeats(5, 10);

このコードでは、createSeats関数を定義し、引数で指定した行(row)と列(column)数分の座席を生成しています。

座席はdiv要素として作成され、適切なクラス名とデータ属性が設定されます。

○サンプルコード2：座席の選択と解除

次に、座席の選択と解除を行う機能を実装しましょう。

// 座席のクリックイベント
function onSeatClick(event) {
  const seat = event.target;
  if (seat.classList.contains('available')) {
    seat.classList.remove('available');
    seat.classList.add('selected');
  } else if (seat.classList.contains('selected')) {
    seat.classList.remove('selected');
    seat.classList.add('available');
  }
}

// イベントリスナーを追加
document.getElementById('seat-map').addEventListener('click', onSeatClick);

このコードでは、onSeatClick関数を定義して、座席がクリックされた際の処理を行っています。

空席の場合は選択状態に、選択状態の場合は空席に戻るようにクラス名を変更しています。

○サンプルコード3：予約情報の表示

最後に、選択された座席の予約情報を表示する機能を実装しましょう。

// 予約情報の表示
function showReservationInfo() {
  const selectedSeats = document.querySelectorAll('.seat.selected');
  const reservationInfo = document.getElementById('reservation-info');
  reservationInfo.innerHTML = '';

  selectedSeats.forEach((seat) => {
    const row = seat.dataset.row;
    const column = seat.dataset.column;
    const seatInfo = document.createElement('li');
    seatInfo.textContent = `座席：${row + 1}-${column + 1}`;
    reservationInfo.appendChild(seatInfo);
  });
}

// 予約情報の表示を更新
document.getElementById('seat-map').addEventListener('click', showReservationInfo);

このコードでは、showReservationInfo関数を定義し、選択された座席の予約情報を表示する処理を行っています。

選択された座席のデータ属性から行と列の情報を取得し、リスト要素にして表示しています。

座席がクリックされるたびに予約情報が更新されるよう、イベントリスナーにshowReservationInfo関数を追加しています。

これで、座席表予約機能の基本的な実装が完了しました。

次に、応用的な機能をいくつか実装していきましょう。

●応用例とサンプルコード

ここでは、基本的な座席表予約機能を拡張するための応用例とサンプルコードを提供します。

○サンプルコード4：複数の座席タイプを表示

異なる座席タイプ（通常席、特別席など）を表示する機能を実装します。

// 座席タイプのデータ
const seatTypes = [
  { type: 'normal', color: 'blue', label: '通常席' },
  { type: 'special', color: 'red', label: '特別席' },
];

// 座席タイプを適用する関数
function applySeatType(seat, type) {
  seat.classList.remove('normal', 'special');
  seat.classList.add(type);
  seat.dataset.type = type;
}

// 座席タイプの適用例
applySeatType(document.querySelector('.seat[data-row="1"][data-column="2"]'), 'special');

このコードでは、座席タイプを定義し、座席要素に適用する関数を作成しています。

applySeatType関数を使用して、特定の座席にタイプを適用することができます。

○サンプルコード5：座席表のスクロール機能

座席表が大きくなった際に、スクロールして表示できるようにします。

<style>
  #seat-map-container {
    width: 800px;
    height: 600px;
    overflow: auto;
  }
</style>

<div id="seat-map-container">
  <div id="seat-map"></div>
</div>

このコードでは、CSSスタイルを適用して、座席表を囲むコンテナにスクロール機能を追加しています。

○サンプルコード6：座席の検索機能

座席番号を入力して、該当する座席を検索・選択できるようにします。

// 座席の検索機能
function searchSeat(row, column) {
  const seat = document.querySelector(`.seat[data-row="${row}"][data-column="${column}"]`);
  if (seat) {
    seat.click();
  } else {
    alert('該当する座席が見つかりませんでした。');
  }
}

このコードでは、searchSeat関数を定義し、指定された行と列に該当する座席を検索してクリック（選択）する処理を行っています。

○サンプルコード7：座席のズーム機能

座席表の拡大・縮小を実現します。

// ズームレベルの管理
let zoomLevel = 1;

// ズーム機能を適用する関数
function applyZoom(zoom) {
  const seatMap = document.getElementById('seat-map');
  seatMap.style.transform = `scale(${zoom})`;
}

// ズームイン
function zoomIn() {
  zoomLevel += 0.1;
  applyZoom(zoomLevel);
}

// ズームアウト
function zoomOut() {
  zoomLevel -= 0.1;
  applyZoom(zoomLevel);
}

このコードでは、ズームレベルを管理する変数 zoomLevel を用意し、applyZoom 関数を定義して座席表にズーム変更を適用しています。

さらに、zoomIn と zoomOut 関数を定義して、ズームレベルを増減させる処理を行っています。

○サンプルコード8：座席表のデータ保存

座席の予約情報を保存する機能を実装します。

// 座席情報の保存
function saveSeatData() {
  const reservedSeats = Array.from(document.querySelectorAll('.seat.reserved'));
  const seatData = reservedSeats.map(seat => ({
    row: seat.dataset.row,
    column: seat.dataset.column,
    type: seat.dataset.type,
  }));
  localStorage.setItem('seatData', JSON.stringify(seatData));
}

// 座席情報の読み込み
function loadSeatData() {
  const seatDataJson = localStorage.getItem('seatData');
  if (seatDataJson) {
    const seatData = JSON.parse(seatDataJson);
    seatData.forEach(data => {
      const seat = document.querySelector(`.seat[data-row="${data.row}"][data-column="${data.column}"]`);
      applySeatType(seat, data.type);
      seat.classList.add('reserved');
    });
  }
}

このコードでは、saveSeatData 関数と loadSeatData 関数を定義して、座席の予約情報を localStorage に保存・読み込みする処理を行っています。

○サンプルコード9：座席表の印刷機能

座席表を印刷する機能を実装します。

function printSeatMap() {
  window.print();
}

このコードでは、printSeatMap 関数を定義し、座席表を印刷する処理を行っています。

○サンプルコード10：座席表のレイアウト変更

座席表の行と列の数を変更する機能を実装します。

// 座席表の生成を担当する関数を更新
function createSeatMap(rows, columns) {
  const seatMap = document.getElementById('seat-map');
  seatMap.innerHTML = ''; // 座席表をクリア

  for (let row = 1; row <= rows; row++) {
    for (let column = 1; column <= columns; column++) {
      const seat = document.createElement('div');
      seat.className = 'seat';
      seat.dataset.row = row;
      seat.dataset.column = column;

      seat.addEventListener('click', handleSeatClick);

      seatMap.appendChild(seat);
    }
    const rowBreak = document.createElement('div');
    rowBreak.className = 'row-break';
    seatMap.appendChild(rowBreak);
  }
}

// 行と列の数を変更する関数
function changeSeatLayout(rows, columns) {
  createSeatMap(rows, columns);
}

// 例：10行12列の座席表に変更
changeSeatLayout(10, 12);

このコードでは、座席表の生成を担当する createSeatMap 関数を更新し、座席表をクリアしてから新しい行と列の数で座席表を生成する処理を行っています。

また、changeSeatLayout 関数を定義して、行と列の数を変更する処理を行っています。

●注意点と対処法

  • ブラウザ間の互換性に注意してください。
    特定のブラウザでのみ動作するコードを避け、広くサポートされている機能を利用しましょう。
  • 座席表のサイズが大きくなると、パフォーマンスに影響が出る場合があります。
    適切なデータ構造やアルゴリズムを使用して、効率的に処理できるようにしましょう。
  • セキュリティにも注意が必要です。
    ユーザー入力をそのまま使用する際は、適切なバリデーションやサニタイズを行ってください。

まとめ

このガイドでは、座席表予約機能の基本概念から応用例までを解説し、サンプルコードを提供しました。

これらのコードを参考に、独自の座席予約システムを構築できるでしょう。

注意点や対処法を押さえながら、効率的で安全な座席予約機能を実装しましょう。