Yugien - 遊戯苑
テーマ

JavaScript

この記事では「JavaScript」について、基本の意味と使い方を初心者向けにやさしく説明します。

A hands-on page that shows how one button can toggle states—like show/hide, color, or expand/collapse—using classList.toggle and toggleAttribute with short, beginner-friendly examples.

toggle

toggleの基本：オン・オフを切り替えるしくみ

JavaScript の toggle は、「ある状態をオン・オフ切り替えるスイッチ」のようなものです。

たとえば、ボタンをクリックすると文字が出たり消えたりする、背景の色が変わったり戻ったりする、といった仕組みを作るときに便利です。

classList.toggle("クラス名") を使えば、指定したクラスを「つける／はずす」を自動で切り替えてくれるので、コードを短くシンプルにできます。

自分で「もし〜なら追加、そうでなければ削除」と書くよりも、toggle を使えば一行で完結できます。

イメージとしては、電気のスイッチを「カチッ」と押して、ついたり消えたりするのと同じです。

基本：ボタンで表示/非表示（classList.toggle）

見た目の切替は「非表示用クラス」を付け外しするのがコツです。

Hello!（基本サンプル）

HTML

<button id="jsToggleDemoBtn1" class="jsToggleDemoBtn" type="button">表示/非表示</button>
<div id="jsToggleDemoBox1" class="jsToggleDemoBox">Hello!（基本サンプル）</div>

CSS

.jsToggleDemoIsHidden {
    opacity: 0;
    visibility: hidden;
}

JavaScript

(function () {
	const btn = document.getElementById("jsToggleDemoBtn1");
	const box = document.getElementById("jsToggleDemoBox1");
	if (btn && box) {
		btn.addEventListener("click", () => {
			const isHiddenNow = box.classList.toggle("jsToggleDemoIsHidden");
			btn.textContent = isHiddenNow ? "表示する" : "隠す";
		});
	}
}());

開閉UI：aria-expanded と toggleAttribute を同期

「開いている/閉じている」を属性で表現。見た目はCSS、状態はARIA属性で伝える。

HTML

<button id="jsToggleDemoAccBtn"
        class="jsToggleDemoBtn"
        type="button"
        aria-expanded="false"
        aria-controls="jsToggleDemoAccPanel">
    詳細を表示
</button>
<div id="jsToggleDemoAccPanel" class="jsToggleDemoAccordionPanel" hidden>
    ここに詳細テキスト（aria連動アコーディオンのサンプル）
</div>

JavaScript

(function () {
	const accBtn = document.getElementById("jsToggleDemoAccBtn");
	const accPanel = document.getElementById("jsToggleDemoAccPanel");
	if (accBtn && accPanel) {
		accBtn.addEventListener("click", () => {
			const expanded = accBtn.getAttribute("aria-expanded") === "true";
			// ボタンの状態を反転して反映
			accBtn.setAttribute("aria-expanded", String(!expanded));
			// パネルの表示/非表示は hidden 属性で制御
			accPanel.toggleAttribute("hidden", expanded);
			// ボタンの文言も同期
			accBtn.textContent = expanded ? "詳細を表示" : "詳細を隠す";
		});
	}
}());

FAQ

Q. classList.toggle と toggleAttribute の違いは？
A. 前者はクラスを付け外し、後者は属性（例：hidden, aria-*）を付け外します。見た目はクラスで、状態は属性で表すと整理しやすいです。
Q. 第2引数 force はいつ使う？
A. 条件がはっきりしている時に便利です。true なら必ず追加、false なら必ず削除。「チェックONなら暗色テーマ」など。
Q. 切り替え後の状態を知りたい
A. const isOn = element.classList.toggle("active"); の戻り値で分かります。true なら付いた、false なら外れた、です。
Q. display: none を直接いじるのはダメ？
A. 小規模ならOKですが、増えると管理が難しくなります。非表示用クラスを1つ決め、JSはそのクラスを付け外しするだけにすると保守しやすいです。
Q. スクリーンリーダー対応は？
A. トグルボタンは aria-pressed、開閉ボタンは aria-expanded を使い、クリック時に値を同期させましょう。