MENU
Webの仕事に携わりたい方、今からWebデザインをめざす方、今Webデザインの学習を行っている方へ | 動画で学ぶWebデザイン教室　 Fukuokamiyako

JavaScript01 : クリックで実現する基本的な動き

Webサイト制作 JavaScript講座
  • URLをコピーしました！

Webページでよく使われるクリックイベント（クリックをしたら）を活用して、Javascript 基本的な動きを学びましょう。ここでは以下の4つを作成します

  1. ボタンをクリックしたらメッセージを表示しよう
  2. クリックでボタンのテキストやスタイルを変更しよう
  3. ボタンをクリックして新しい要素を追加しよう
  4. ボタンをクリックするたびに背景色を変更しよう
目次

メッセージを表示しよう

ボタンをクリックすると、「ボタンがクリックされました！」というアラートメッセージが表示されます。

See the Pen メッセージを表示しよう by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

JavaScriptコード解説（全体）

// ボタンの要素を取得
const messageButton = document.getElementById("messageButton");

// クリック時の動作を設定
messageButton.addEventListener("click", () => {
  alert("ボタンがクリックされました！");
});

まずボタンを取得する

const messageButton = document.getElementById("messageButton");

document.getElementById

  • HTMLの中から、指定したidを持つ要素を探して取得します。
  • 今回はid="messageButton"のボタンを取得しています。

const

  • 変数（データを保存する箱のようなもの）を作ります。
  • ここでは、取得したボタンをmessageButtonという名前で保存しています。

次にクリックしたときの動きを設定する

// クリック時の動作を設定
messageButton.addEventListener("click", () => {
  alert("ボタンがクリックされました！");
});

addEventListener(“click”, …)

  • ボタンに「クリックされたときの動作」を登録するための関数です。
  • “click”は、クリックイベントを指定しています。他にも様々なイベントがあります。

addEventListenerとは？Webページ上の要素に特定の動作（イベント）を登録するためのJavaScriptの関数です。ボタンをクリックしたときにメッセージを表示したり、入力欄に文字を入力したときに何かが起こる動作を作ったり、ページをスクロールしたときに動きを追加する場面で使われます。イベントタイプは多く、click,mouseover,mouseout,input,load,resize,scroll,dragなどさまざま指定ができます。

動画で学ぶWebデザイン教室　 Fuku…
JavaScript超入門: ゼロからはじめるWebプログラミング | 動画で学ぶWebデザイン教室　 Fukuokamiyako JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押し…

クリックでボタンのテキストやスタイルを変更しよう

ボタンをクリックするたびに、そのボタンの内容とスタイルが変わります

See the Pen ボタンをクリックするたびにボタンが変わる by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

JavaScriptコード解説（全体）

// ボタンの要素を取得
const toggleButton = document.getElementById("toggleButton");

// ボタンの状態を記録する変数
let isStyled = false;

// ボタンをクリックしたときの動作を設定
toggleButton.addEventListener("click", () => {
  if (isStyled) {
    toggleButton.textContent = "スタイルを変更";
    toggleButton.style.backgroundColor = "";
    toggleButton.style.color = "";
  } else {
    toggleButton.textContent = "元に戻す";
    toggleButton.style.backgroundColor = "black";
    toggleButton.style.color = "white";
  }
  isStyled = !isStyled; // 状態を反転させる
});

まずボタンの状態を記録する

let isStyled = false;

ボタンの現在の状態を記録するための変数です。初期状態はスタイルが変更されていない（false）とします。

次にクリック時の動作を設定する

toggleButton.addEventListener("click", () => {
  // 動作の内容
});

ボタンがクリックされたときに実行する動作を設定します。

その中で条件分岐でスタイルを変更する

if (isStyled) {
  toggleButton.textContent = "スタイルを変更";
  toggleButton.style.backgroundColor = "";
  toggleButton.style.color = "";
} else {
  toggleButton.textContent = "元に戻す";
  toggleButton.style.backgroundColor = "black";
  toggleButton.style.color = "white";
}
isStyled = !isStyled;
  • if文
    • 現在の状態（isStyled）に応じて、スタイルやテキストを切り替えます。
  • textContent
    • textContent関数を使って、ボタンのテキストを変更します。
  • style.backgroundColorとstyle.color
    • CSSプロパティを直接変更します。
  • isStyled = !isStyled
    • 状態を反転させることで、次回クリック時に逆の動作をします。

styleプロパティについて

上記のコード内にある　style.backgroundColor　や　style.color　は、JavaScriptのstyleプロパティで、これは、CSSのプロパティをJavaScriptのコード内で直接変更・取得できます。

CSSとJavaScriptの違いは、JavaScriptではキャメルケース（小文字始まりで、単語の先頭が大文字）に変換されます。

CSSプロパティJavaScriptプロパティ
background-colorstyle.backgroundColor
colorstyle.color
font-sizestyle.fontSize
margin-leftstyle.marginLeft
border-radiusstyle.borderRadius
動画で学ぶWebデザイン教室　 Fuku…
JavaScript超入門: ゼロからはじめるWebプログラミング | 動画で学ぶWebデザイン教室　 Fukuokamiyako JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押し…

ボタンをクリックして新しい要素を追加しよう

ボタンをクリックすると、ページに新しい1回目のクリックカウントが表示されます。

See the Pen 新しい要素を追加しよう by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

JavaScriptコード解説（全体）

// ボタンの要素を取得
const addElementButton = document.getElementById("addElementButton");

// クリック回数をカウントする変数
let clickCount = 0;

// ボタンをクリックしたときの動作を設定
addElementButton.addEventListener("click", () => {
  clickCount += 1; // クリック回数を1増やす

  // 新しい段落要素を作成
  const newElement = document.createElement("p");
  newElement.textContent = `${clickCount}回目のクリックです！`;

  // 作成した要素を画面に追加
  const container = document.getElementById("container");
  container.appendChild(newElement);
});

まずボタンを取得する

const addElementButton = document.getElementById("addElementButton");

document.getElementById

  • HTMLからid="addElementButton"の要素を取得します。

次にクリック回数をカウントする

let clickCount = 0;

let

変数を作成するためのキーワードで、後から値を変更する場合に使います。clickCountはその変数です。

ここでクリックイベントを設定する

addElementButton.addEventListener("click", () => {
  clickCount += 1; // クリック回数を1増やす
});

clickCount += 1

現在のclickCountの値に複合演算子を使って、1を加えます。これによりクリック回数を記録します。

その場所に新しい要素を作成してテキストを設定する

const newElement = document.createElement("p");
newElement.textContent = `${clickCount}回目のクリックです！`;

document.createElement(“p”)

createElement関数を使って、新しい段落タグ（<p>）を作成します。

textContent

textContent関数を使って、段落に表示する内容を設定します。テンプレート文字列（バッククォート “）を使って、クリック回数を含むメッセージを設定しています。

最後に新しい要素を画面に追加する

const container = document.getElementById("container");
container.appendChild(newElement);

document.getElementById(“container”)

HTMLのid="container"を持つ要素（メッセージを追加する<div>）を取得します

appendChild(newElement)

新しい段落要素を<div>内に追加します。

ボタンをクリックするたびに背景色を変更しよう

ボタンをクリックするたびに、ページ全体の背景色がランダムに変わります。

See the Pen ランダムに背景色を変更しよう by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

JavaScriptコード解説（全体）

// ボタンの要素を取得
const colorButton = document.getElementById("colorButton");

// クリック時の動作を設定
colorButton.addEventListener("click", () => {
  // ランダムな色を生成
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  
  // 背景色を変更
  document.body.style.backgroundColor = randomColor;
});

クリックしたときの動きを設定する

colorButton.addEventListener("click", () => {
  // ランダムな色を生成
  const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  document.body.style.backgroundColor = randomColor;
});

addEventListener(“click”, function() { … })

  • ボタンに「クリックされたときの動作」を登録します。
  • "click"は、クリックイベントを指定しています。

次にランダムな色を生成する

const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`;

Math.random()

  • 0以上1未満のランダムな数値を生成します。
  • 例えば、0.123456や0.987654などの値が出てきます。

Math.floor()

  • 小数点以下を切り捨てます。これによってランダムな整数を作れます。

16777215

  • 16進数カラーコードで表現できる最大値（#FFFFFF）です。これを基にランダムな色を作ります。

.toString(16)

  • 数字を16進数の文字列に変換します。
  • 例えば、10は"a"、255は"ff"になります。

作成した背景色に変更する

document.body.style.backgroundColor = randomColor;

document.body

  • ページ全体を指すオブジェクトで、body要素が変わります。

.style.backgroundColor

  • ページのCSSプロパティbackground-colorを変更します。

randomColor

  • ランダムに生成した16進数の変数に入っている色をここで適用しています。

他　ランダムではなく特定の色を設定したい場合は

colorButton.addEventListener("click", () => {
  document.body.style.backgroundColor = "red";
});

他　ランダムではなくクリックごとに色を切り替える

クリックするたびに「青→緑→青→緑」と交互に切り替えるには、if文を使います。

let isBlue = false;

colorButton.addEventListener("click", () => {
  if (isBlue) {
    document.body.style.backgroundColor = "green";
  } else {
    document.body.style.backgroundColor = "blue";
  }
  isBlue = !isBlue;
});
動画で学ぶWebデザイン教室　 Fuku…
JavaScript超入門: ゼロからはじめるWebプログラミング | 動画で学ぶWebデザイン教室　 Fukuokamiyako JavaScriptとは？まずはJavaScriptを知ろう JavaScriptの基本 JavaScriptは、Webページに「動き」や「反応」を加えるためのプログラミング言語です。例えば、ボタンを押し…
Webサイト制作 JavaScript講座
CSS HTML Javascript クリックイベント プログラム
よかったらシェアしてね！
  • URLをコピーしました！
目次