🎓

Web制作でのJavaScriptの書き方

2024/12/24に公開

JavaScript

tech

1. ページごとに処理を分ける

ページごとに処理を分けることで、ウェブサイト全体の動きとページ固有の動きを効率的に制御できます。

基本構造と使い方

import 文でファイルを読み込む
ページごとのスクリプト（例：pages/home.js）を import 文を使って追加します。
条件分岐でページごとの処理を切り替える
ページのIDを元にスクリプトを実行します。

コード例:

import { commonInit } from "../pages/common";

((doc, win) => {
  switch (doc.body.id) {
    case "home": // ホームページ用スクリプト
      homeInit();
      break;
    case "about": // Aboutページ用スクリプト
      aboutInit();
      break;
  }
  commonInit(); // 全ページ共通処理
})(document, window);

即時関数（IIFE: Immediately Invoked Function Expression）
プログラムの中で「変数」や「機能」を作ると、それがずーっと残って他のものとぶつかっちゃうことがあります。そのため、「即時関数」を使い、作ったものがその場だけで使われ、他のスクリプトと変数が衝突しないよう、即時関数で囲むのが基本です。

書き方:

((doc, win) => {
  // ここにコードを記述
})(document, window);

2. 機能ごとに分ける

小さな機能をモジュールとして切り分け、必要に応じて他のファイルから利用できるようにします。(module/~.js のように)

コード例: モジュールを使った機能追加

import ScrollAnimation from "modules/ScrollAnimation";

new ScrollAnimation({
  target: document.getElementsByClassName("js-scrollTarget"),
  activeClass: "is-visible",
  triggerPosition: "middle",
  responsive: true,
});

3. 効率的で読みやすいコードを目指す

3-1. CSSを操作する際のルール

JavaScriptでスタイルを直接操作するのではなく、クラスを追加して管理します。

❌ ダメな例:

doc.getElementById("js-button").style.fontSize = "20px";

⭕ 良い例:

doc.getElementById("js-button").classList.add("is-active");

css

.is-active {
  font-size: 20px;
}

3-2. 動的な数値取得

HTML の要素数など、動的に変化する値はJavaScriptで取得します。

❌ 固定値を使う例:

const itemCount = 3; // 固定値はNG

⭕ 動的な数値を使う例:

const listItems = doc.querySelector(".js-itemList").children.length; // 動的に取得

3-3. 変数のキャッシュ

頻繁に使う要素は変数に保存しておくことで、処理を効率化できます。

❌ キャッシュせずに毎回取得する例:

doc.getElementById("js-toggle").addEventListener("click", () => {
  if (doc.getElementById("js-toggle").classList.contains("is-open")) {
    doc.getElementById("js-toggle").classList.remove("is-open");
  }
});

⭕ キャッシュする例:

const toggleElement = doc.getElementById("js-toggle");
toggleElement.addEventListener("click", () => {
  if (toggleElement.classList.contains("is-open")) {
    toggleElement.classList.remove("is-open");
  }
});

4. varは使わない

変数宣言には、let または const を使用します。var はバグを引き起こしやすいため推奨されません。