第8回：JavaScriptを使ったカフェサイトの魅力アップ

2024-08-10

今回からJavaScriptを使ってカフェサイトをさらに魅力的にする方法を学びます。
初めてJavaScriptに触れるかたもいるかもしれませんが、心配はいりません。
少しずつ進めながら、サイトに動きを加えることで、訪れた人々に「おっ！」と思わせる仕掛けを作りましょう。
難しそうに感じるかもしれませんが、ステップを踏んで進めば必ずできるようになります。

JavaScriptの基本

JavaScriptはウェブページに動的な機能を追加するためのプログラミング言語で、ここで初めてプログラミング言語に触れるかたが多いです。
HTMLやCSSは厳密にはマークアップ言語と言います。
以下に基本的なJavaScriptの構文を紹介します。

変数の宣言

let message = "Hello, World!";
const pi = 3.14;
var count = 0;

let、const、varを使って変数を宣言します。

関数の定義

function greet(name) {
  return "Hello, " + name + "!";
}

functionを使って関数を定義します。

イベントリスナーの追加

document.getElementById("button").addEventListener("click", function() {
  alert("Button clicked!");
});

addEventListenerを使って、要素にイベントリスナーを追加します。

カフェサイトへの適用例

カフェサイトに動きを追加するためにJavaScriptを使ってメニューのフィルタリング機能を実装します。

document.addEventListener("DOMContentLoaded", function() {
  const buttons = document.querySelectorAll(".filter-buttons button");
  const menuItems = document.querySelectorAll(".menu-item");

  buttons.forEach(button => {
    button.addEventListener("click", function() {
      const category = this.id;

      menuItems.forEach(item => {
        if (category === "all" || item.getAttribute("data-category") === category) {
          item.style.display = "block";
        } else {
          item.style.display = "none";
        }
      });
    });
  });
});

簡単に解説します。

document.addEventListener(“DOMContentLoaded”, function() {…}): スクリプトを実行するタイミングを、ページが完全に読み込まれた後にします。
querySelectorAll: すべてのフィルターボタンと、すべてのメニュー項目を取得します。
forEach: 本来は繰り返し処理に使うものですが、ここでは各ボタンにイベントを追加するためや、各メニュー項目にスタイルを適用するために使っています。

HTMLの修正

カフェサイトに動きを追加するためにJavaScriptを使ってメニューのフィルタリング機能を実装します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カフェサイト</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
<body>
  <header>
    <h1>カフェへようこそ</h1>
    <nav>
      <a href="index.html">ホーム</a>
      <a href="menu.html">メニュー</a>
      <a href="contact.html">お問い合わせ</a>
    </nav>
  </header>
  <main>
    <div class="filter-buttons">
      <button id="all">全て</button>
      <button id="coffee">コーヒー</button>
      <button id="dessert">デザート</button>
    </div>
    <div class="menu-container">
      <div class="menu-item" data-category="coffee">
        <h2>エスプレッソ</h2>
        <p>濃厚な味わいのエスプレッソです。</p>
      </div>
      <div class="menu-item" data-category="dessert">
        <h2>チーズケーキ</h2>
        <p>濃厚でクリーミーなチーズケーキです。</p>
      </div>
      <!-- 他のメニュー項目 -->
    </div>
  </main>
  <footer>
    <p>© 2024 カフェサイト. All rights reserved.</p>
  </footer>
</body>
</html>

カフェへようこそ

プロジェクトの確認

index.htmlとstyle.cssを保存して、JavaScriptはscript.jsという名前で保存して、ブラウザ（google chromeやmicrosoft EDGEなど）でindex.htmlを開いてみましょう。
index.htmlをダブルクリックするとスムーズかと思います。

まずここまででカフェのWEBサイトが上記のように表示されることを確認してください。

放課後クラブ

ここでは余力のあるかた向けに、もうひと手間かけてプログラムを仕上げていきます。

ここまでのプログラムだと、デザートを選択して、チーズケーキの詳細ページに遷移して、このページに戻ってきた時に、デザートのメニューが選択されていない状態になってしまいます。

それだとユーザーはまたデザートを選択しなければなりません。
今はまだメニューが2つしかないため、そこまで不便ではないかもしれませんが、これでは使い勝手が良いサイトとは言えません。
UX（ユーザーエクスペリエンス）が低いとも言います。

画面遷移して戻ってきてもデザートが選択されているようにプログラムを修正していきます。

document.addEventListener("DOMContentLoaded", function() {
  const buttons = document.querySelectorAll(".filter-buttons button");
  const menuItems = document.querySelectorAll(".menu-item");
  const savedCategory = localStorage.getItem("selectedCategory") || "all";

  // 初期表示
  filterMenu(savedCategory);

  buttons.forEach(button => {
    button.addEventListener("click", function() {
      const category = this.id;

      // 選択したカテゴリをlocalStorageに保存
      localStorage.setItem("selectedCategory", category);

      filterMenu(category);
    });
  });

  function filterMenu(category) {
    menuItems.forEach(item => {
      if (category === "all" || item.getAttribute("data-category") === category) {
        item.style.display = "block";
      } else {
        item.style.display = "none";
      }
    });
  }
});

ここでは以下の3点に注目してみてください。

localStorage.getItem(“selectedCategory”): ブラウザに保存されたカテゴリーがあれば取得します。
無ければ”all”とします。
localStorage.setItem(“selectedCategory”, category): 選択されたメニューのカテゴリーをブラウザに保存します。
filterMenu: メニュー項目をフィルタリングする動作を関数化します。
慣れてくると、関数化してない直書きのプログラムコードは読みづらく、保守性が低い（良くない）と感じるようになります。