JavaScript・はじめの一歩

ボタンを押したら動かす

「〜したら、〜する」がプログラミングの醍醐味。ボタンのクリックに反応させて、動きを体験しよう。

いよいよ”動き”の入口。JavaScriptの楽しさは、「何かをしたら、何かが起きる」を書けること。その代表が、ボタンのクリックです。「文字を書きかえる」と、今回の「きっかけ」を合わせると、ぐっと本物のアプリらしくなります。

HTMLボタンと入力欄動かす対象の「押せるボタン」そのものの作り方（HTML側）はこの回

イメージだけつかもう

button.addEventListener("click", () => {
  alert("押したね！");
});

むずかしく見えますが、読み下すと「ボタンがclickされたら、メッセージを出す」だけ。細かい書き方は後で大丈夫、今は”きっかけ→反応”の形を感じられればOK。

書くもの意味
addEventListener「〜されたら、を仕込む」呪文
"click"どんなきっかけか（ここではクリック）
() => { ... }起きたときにやること（反応）

文字の書きかえとつなげると、こうなる

「クリックされたら、文字を書きかえる」。textContent を反応の中に入れるだけです。

button.addEventListener("click", () => {
  let el = document.getElementById("greeting");
  el.textContent = "ありがとう！";
});

ボタンを押すと、見出しが「ありがとう！」に変わる。きっかけ（クリック）→ 反応（書きかえ）という、ひとつの小さな仕組みができあがりました。「いいねを押すと数が増える」も、正体はこれの仲間です。

フォームの「送信」もきっかけになる

<form>には、クリックとは別の、専用のきっかけがあります。それが"submit"（送信）。送信ボタンが押されたときに発生します。

form.addEventListener("submit", (event) => {
  event.preventDefault();
});

event.preventDefault()は「もともとの動き（ページの再読み込み）を止める」おまじない。フォームは本来、送信すると別のページに移動しようとしますが、しまちゃんのページはそのまま残ってお礼を見せたいので、これで止めておきます。

class の要素をつかまえる：querySelector

これまでgetElementByIdでidの場所をつかまえてきましたが、classをつけた場所をつかまえたいときはquerySelectorを使います。

const form = document.querySelector(".contact-form");

document.querySelector("目印")の目印は、CSSと同じ書き方。.で始めればクラス、#で始めればidをつかまえられます。getElementById("thanks")はquerySelector("#thanks")と書いても同じ意味。querySelectorのほうが、より広く使える万能選手です。

このレッスンのまとめ

  1. 動きは「きっかけ（イベント）→ 反応」でできている
  2. クリックは代表的なきっかけ。フォームには専用の"submit"もある
  3. event.preventDefault()で、送信のもともとの動き（再読み込み）を止められる
  4. classをつかまえるときはquerySelector

これでscript.jsは完成——しまちゃんのページは、/goalとまったく同じ動きをするようになりました。

これでJavaScriptの「はじめの一歩」はひと区切り。変数・書きかえ・きっかけと、動きをつくる基本の材料がそろいました。 :::

やってみよう：おくるボタンを押したときだけお礼を出す

前回はページを開いた瞬間にお礼が出てしまっていました。それを、「おくる」ボタンを押したとき（＝フォームがsubmitされたとき）だけに直しましょう。

const thanksMessage = "おたより ありがとう！ しまちゃんに とどきました。";

const form = document.querySelector(".contact-form");
const thanks = document.getElementById("thanks");

form.addEventListener("submit", function (event) {
  event.preventDefault();
  thanks.textContent = thanksMessage;
});

前回、<form>の外に直接書いていたthanks.textContent = thanksMessage;を、form.addEventListener("submit", ...)の中に引っこしました。あわせてquerySelectorで<form>もつかまえ、event.preventDefault()で再読み込みを止めています。こうして「ページを開いてすぐ」ではなく「ボタンを押したとき」だけ、お礼が表示されるようになりました。

ブラウザ表示。れんらくフォームの「おくる」ボタンを押した直後、ボタンの下に「おたより ありがとう！ しまちゃんに とどきました。」という緑色の文字が表示されている
ボタンを押した瞬間だけ、お礼のメッセージがふわっと現れます。