JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】

ボタンが押されたときに JavaScript を実行しよう

私たちは普段ウェブページを見ているときに、画面をスクロールしたりクリックしたりして、ウェブページを操作していますよね。そのような動きを可能にしているのが、JavaScript です。

今回は、ボタンが押されたときにポップアップメッセージを表示するコードを解説します。ユーザーのアクションに応じて JavaScript を実行させる基本的な書き方を、一緒に学んでいきましょう。

下のサンプルで、ボタンクリックの動きを試してみてください。

See the Pen JavaScript alert box by Pyxofy (@pyxofy) on CodePen.

ウェブページを操作するためには？

JavaScript でウェブページを操作するためには、次の３つのことを決めてからコードを書いていきますよ。

どの HTML 要素に動きをつけますか？
何をきっかけに JavaScript コードを実行しますか？
どんなコード（関数）を実行しますか？

上のサンプルのように、ボタンが押されたときにメッセージを表示したい場合は、このようになります。

ボタン要素に動きをつけます。
クリックをきっかけに JavaScript コードを実行します。
ポップアップメッセージを表示するコード（関数）を実行します。

では、これら３つのことを頭に入れながら、JavaScript コードの書き方を詳しく見ていきましょう。

HTML 要素を取得する - querySelector()

最初に、どの HTML 要素に動きをつけるかを決めて、対象となる要素を選び出します。要素を選び出すことは、「要素を取得する」などといわれます。ボタンをクリックできるようにするために取得する要素は、<button> 要素です。

HTML の例：

<!-- 取得する<button>要素 -->
<button type="button">クリック！</button>

要素を取得する方法はいろいろあります。たとえば、getElementById() や getElementByTagName() などは今では古いやり方となっていて、現在推奨されているのは、querySelector() です。

document. に続けて、querySelector() を書きます。
括弧 () の中に、取得する要素に該当する CSS セレクターを指定します。セレクターは引用符で囲んで書きます。

構文：

document.querySelector('CSSセレクター')

<button> 要素を取得するときは、下のようになります。

document.querySelector('button')

取得した要素は、あとで参照できるように、変数に格納するのが一般的です。こうすることで、毎回要素を選び出す手間なく、変数で繰り返し参照できるようになります。

代入演算子 = を使って、取得した要素を変数に格納します。

const btn = document.querySelector('button');

プログラムの中でその要素を１回しか参照しない場合は、変数に格納せず、document.querySelector('button') のまま書くこともできます。変数を使う場合と使わない場合の書き方の違いは、このあとの「1. イベントリスナー - addEventListener()（推奨）」のところで紹介しますね。

変数については、こちらの記事をご覧ください。

JavaScript - 変数の基本 - var, let, const【初心者向け】

プログラミングを学習する際に、最初の段階で学んでおきたい基礎知識のひとつが、変数です。変数とは何か？なんのために使うのか？どうやって書くのか？など、初めて変数に触れる方の疑問に答えます。

PyxofyPyxofy

querySelector() で選び出せるのは、最初の要素だけです。たとえば、いくつかあるボタンのどれかひとつを選びたいときは、querySelector('#id') のように id を使って取得します。

さて、対象となる要素を取得できたら、何をきっかけにして JavaScript を実行するのかを指定しましょう。そのきっかけとなるのが、「イベント」です。

イベントとは？

ウェブページを表示しているブラウザの中では、いろいろなことが起こります。たとえば、

ユーザーがボタンをクリックしました。
ユーザーがフォームを送信しました。
ブラウザが HTML の読み込みを完了しました。

などです。このように、ユーザーやブラウザが行う動作や出来事のことを、イベントといいます。イベントの種類はいろいろあります。いくつかの例を下にあげますね。

click：要素がクリックされたときに発生するイベント。
mouseover：マウスのポインターが要素の上に移動したときに発生するイベント。
scroll：要素がスクロールされたときに発生するイベント。

今回解説するコードの場合、JavaScript 実行のきっかけとなるのは、click イベントです。イベントが決まったら、どんなコード（関数）を実行するかを決めていきましょう。

イベントハンドラーとは？

イベントが発生したときに実行される処理をまとめたコードのブロックのことを、イベントハンドラーといいます。コードのブロックは、通常は関数です。

今回、ボタンがクリックされたときに実行するコードは、ポップアップメッセージを表示する関数です。

function() {
  alert('Pyxofy へようこそ!');
}

関数やポップアップメッセージについては、こちらの記事をご覧ください。

JavaScript - 関数の基本 - 関数宣言と関数式【初心者向け】

プログラミングをする際、関数の知識は欠かせません。関数を使えば、同じコードを何度も書くことなく特定の処理を実行できるようになります。関数の書き方、パラメータや引数、return 文や戻り値、巻き上げなどの意味を学びましょう。

PyxofyPyxofy

JavaScript - ダイアログの表示方法 - alert(), confirm(), prompt()

ポップアップで表示するダイアログを三つ紹介します。ユーザーに対してメッセージを表示する alert()、確認をする confirm()、入力を求める prompt() の使い方を学びましょう。

PyxofyPyxofy

イベントハンドラーは、イベントリスナーと呼ばれることもあります。どちらとも、イベントが発生したときにコードを実行する目的で使われる用語です。

イベントハンドラーの登録方法３つ

イベントに反応してコードが実行されるように定義することを、「イベントハンドラーを登録する」といいます。イベントハンドラーを登録する方法は、3つあります。

イベントリスナー - addEventListener()（推奨）
イベントハンドラープロパティ - onイベント
HTML 属性（非推奨）

ポップアップメッセージを表示する関数がボタンのクリックに反応して実行されるように、イベントハンドラーを登録しましょう。

1. イベントリスナー - addEventListener()（推奨）

イベントが発生したときにコードを実行する方法として現在推奨されているのが、イベントリスナー addEventListener() です。括弧 () の中には、２つの引数を指定しますよ。

第１引数として、イベントの種類を引用符で囲んで書きます。
カンマ , に続けて、第２引数として、実行される無名関数または関数名を書きます。

構文：

addEventListener('イベントの種類', 実行される無名関数または関数名)

ボタンのクリックにイベントリスナーを設定するときは、次のようになります。

btn は、<button> 要素への参照です。
ドット . に続けて、addEventListener() を書きます。
イベントの種類は、'click' です。

btn.addEventListener('click', 実行される無名関数または関数名);

もし、<button> 要素への参照が１回で済むプログラムの場合は、変数を使わずに下のように書くこともできますよ。

document.querySelector('button').addEventListener('click', 実行される無名関数または関数名);

第２引数には、実行されるコードを書きます。無名関数を指定する場合と関数名を指定する場合、２通りの書き方を見てみましょう。

コード例１：無名関数を指定する場合

//****************************************
// ボタンクリックに反応してメッセージを表示する
//****************************************

const btn = document.querySelector('button');

// 無名関数を指定する
btn.addEventListener('click', function() {
  alert('Pyxofy へようこそ!');
});

コード例２：関数名を指定する場合

//****************************************
// ボタンクリックに反応してメッセージを表示する
//****************************************

const btn = document.querySelector('button');

// 実行される関数
function showMessage() {
  alert('Pyxofy へようこそ!');
}

// 関数名を指定する
btn.addEventListener('click', showMessage);

コード例１とコード例２は、どちらも同じように動作します。

実行結果

無名関数と関数名、どちらを使う？

今回実行される関数は、ポップアップメッセージを表示するだけの単純なものですね。このようにコードがシンプルな場合は、例１のように、括弧 () の中に無名関数を直接書く方法が一般的です。

一方、実行される関数の処理が複雑な場合は、例２のように、関数は別で定義するとコードが理解しやすくなります。このとき、第２引数には関数の名前だけを書くことに注意してください。関数名() と書くと、ボタンのクリックを待たずに関数が呼び出され実行されてしまいます。

正しい書き方：

btn.addEventListener('click', showMessage);

誤った書き方：

btn.addEventListener('click', showMessage());

ここまでは、addEventListener() を使って、ボタンクリックでメッセージを表示するコードの書き方を紹介しました。次のセクションでは、onイベント で表されるイベントハンドラープロパティについて解説します。

2. イベントハンドラープロパティ - onイベント

イベントハンドラープロパティは、イベントの種類ごとに用意されているプロパティです。プロパティ名は onイベント という形をとります。対象となる要素のプロパティの値として、実行されるコードを代入します。

構文：

onイベント = 実行される無名関数または関数名;

クリックイベントに対してイベントハンドラーを登録するときに使うのは、onclick プロパティです。ボタンがクリックされたときにポップアップメッセージを表示するコードを書いてみましょう。

btn は、<button> 要素への参照です。
ドット . に続けて、イベントハンドラープロパティ onclick を書きます。
代入演算子 = のあとに、関数を書きます。

//****************************************
// ボタンクリックに反応してメッセージを表示する
//****************************************

const btn = document.querySelector('button');

// イベントハンドラーの登録
btn.onclick = function() {
  alert('Pyxofy へようこそ!');
};

上のコードでは、プロパティの値として無名関数を代入しています。名前つきの関数を別で定義する場合は、代入演算子 = のあとに関数名を書きます。関数名には括弧 () をつけない、ということに注意してくださいね。

//****************************************
// ボタンクリックに反応してメッセージを表示する
//****************************************

const btn = document.querySelector('button');

// 実行される関数
function showMessage() {
  alert('Pyxofy へようこそ!');
}

// イベントハンドラーの登録
btn.onclick = showMessage;

同じクリックイベントでも、addEventListener() では click、イベントハンドラープロパティでは onclick で表すということを間違えないようにしましょう。

addEventListener() と onイベントプロパティの違いは？

ここまで、イベントハンドラーを登録する方法として、addEventListener() と onイベント プロパティを紹介してきました。現在は、addEventListener() を使う方が推奨されています。その理由は、次のとおりです。

onイベント プロパティで登録できるのは、ひとつのイベントに対してひとつのイベントハンドラーだけです。
addEventListener() では、ひとつのイベントに対して複数のイベントリスナーを登録できます。また、removeEventListener() を使うことで、必要なときにイベントリスナーを削除することができます。

addEventListener() を使った方がより柔軟なプログラムを書ける、ということですね。

3. HTML 属性（非推奨）

最後に紹介するのは、HTML の途中に JavaScript を混在させるため、現在は推奨されていない書き方です。ただ、この方法で書かれているコードに出会うことがあるかもしれないので、参考に知っておいてください。

HTML：

<!-- HTML属性でイベントと関数を結びつける -->
<button type="button" onclick="showMessage()">クリック！</button>

JavaScript：

// 実行される関数
function showMessage() {
  alert('Pyxofy へようこそ!');
}

まとめ

今回は、ユーザーのボタンクリックで JavaScript を実行させる方法を解説しました。

JavaScript でウェブページを操作するためには、 addEventListener() や onイベント プロパティを使う方法などがあり、書き方はひとつではありません。基本的な考え方としては、対象となる要素を選び出し、コードを動かすきっかけとなるイベントと実行される関数を結び付ける、ということです。

ウェブページに動きをつけられるようになると JavaScript を学ぶのがより楽しくなると思うので、ぜひ挑戦してみてくださいね。

最後まで読んでいただき、ありがとうございます。記事に関するコメントはこちらにお寄せください。Twitter @pyxofy・LinkedIn・Mastodon・Facebook

この記事をシェアしてくれると嬉しいです！