JavaScript - ボタンクリックでメッセージを表示する方法【初心者向け】
ユーザーの操作をきっかけに動く JavaScript の書き方を紹介します。ボタンのクリックに反応するシンプルなコードを書きながら、要素の取得やイベント、イベントハンドラーやイベントリスナーなどの基本を解説します。
ボタンが押されたときに JavaScript を実行しよう
私たちは普段ウェブページを見ているときに、画面をスクロールしたりクリックしたりして、ウェブページを操作していますよね。そのような動きを可能にしているのが、JavaScript です。
今回は、ボタンが押されたときにポップアップメッセージを表示するコードを解説します。ユーザーのアクションに応じて JavaScript を実行させる基本的な書き方を、一緒に学んでいきましょう。
下のサンプルで、ボタンクリックの動きを試してみてください。
See the Pen JavaScript alert box by Pyxofy (@pyxofy) on CodePen.
ウェブページを操作するためには?
JavaScript でウェブページを操作するためには、次の3つのことを決めてからコードを書いていきますよ。
- どの HTML 要素に動きをつけますか?
- 何をきっかけに JavaScript コードを実行しますか?
- どんなコード(関数)を実行しますか?
上のサンプルのように、ボタンが押されたときにメッセージを表示したい場合は、このようになります。
- ボタン要素に動きをつけます。
- クリックをきっかけに JavaScript コードを実行します。
- ポップアップメッセージを表示するコード(関数)を実行します。
では、これら3つのことを頭に入れながら、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');
プログラムの中でその要素を1回しか参照しない場合は、変数に格納せず、document.querySelector('button')
のまま書くこともできます。変数を使う場合と使わない場合の書き方の違いは、このあとの「1. イベントリスナー - addEventListener()(推奨)」のところで紹介しますね。
変数については、こちらの記事をご覧ください。
querySelector()
で選び出せるのは、最初の要素だけです。たとえば、いくつかあるボタンのどれかひとつを選びたいときは、querySelector('#id')
のように id
を使って取得します。
さて、対象となる要素を取得できたら、何をきっかけにして JavaScript を実行するのかを指定しましょう。そのきっかけとなるのが、「イベント」です。
イベントとは?
ウェブページを表示しているブラウザの中では、いろいろなことが起こります。たとえば、
- ユーザーがボタンをクリックしました。
- ユーザーがフォームを送信しました。
- ブラウザが HTML の読み込みを完了しました。
などです。このように、ユーザーやブラウザが行う動作や出来事のことを、イベントといいます。イベントの種類はいろいろあります。いくつかの例を下にあげますね。
今回解説するコードの場合、JavaScript 実行のきっかけとなるのは、click
イベントです。イベントが決まったら、どんなコード(関数)を実行するかを決めていきましょう。
イベントハンドラーとは?
イベントが発生したときに実行される処理をまとめたコードのブロックのことを、イベントハンドラーといいます。コードのブロックは、通常は関数です。
今回、ボタンがクリックされたときに実行するコードは、ポップアップメッセージを表示する関数です。
function() {
alert('Pyxofy へようこそ!');
}
関数やポップアップメッセージについては、こちらの記事をご覧ください。
イベントハンドラーは、イベントリスナーと呼ばれることもあります。どちらとも、イベントが発生したときにコードを実行する目的で使われる用語です。
イベントハンドラーの登録方法3つ
イベントに反応してコードが実行されるように定義することを、「イベントハンドラーを登録する」といいます。イベントハンドラーを登録する方法は、3つあります。
- イベントリスナー -
addEventListener()
(推奨) - イベントハンドラープロパティ -
onイベント
- HTML 属性(非推奨)
ポップアップメッセージを表示する関数がボタンのクリックに反応して実行されるように、イベントハンドラーを登録しましょう。
1. イベントリスナー - addEventListener()(推奨)
イベントが発生したときにコードを実行する方法として現在推奨されているのが、イベントリスナー addEventListener()
です。括弧 ()
の中には、2つの引数を指定しますよ。
- 第1引数として、イベントの種類を引用符で囲んで書きます。
- カンマ
,
に続けて、第2引数として、実行される無名関数または関数名を書きます。
構文:
addEventListener('イベントの種類', 実行される無名関数または関数名)
ボタンのクリックにイベントリスナーを設定するときは、次のようになります。
btn
は、<button>
要素への参照です。- ドット
.
に続けて、addEventListener()
を書きます。 - イベントの種類は、
'click'
です。
btn.addEventListener('click', 実行される無名関数または関数名);
もし、<button>
要素への参照が1回で済むプログラムの場合は、変数を使わずに下のように書くこともできますよ。
document.querySelector('button').addEventListener('click', 実行される無名関数または関数名);
第2引数には、実行されるコードを書きます。無名関数を指定する場合と関数名を指定する場合、2通りの書き方を見てみましょう。
コード例1:無名関数を指定する場合
/****************************************/
/* ボタンクリックに反応してメッセージを表示する */
/****************************************/
const btn = document.querySelector('button');
//無名関数を指定する
btn.addEventListener('click', function() {
alert('Pyxofy へようこそ!');
});
コード例2:関数名を指定する場合
/****************************************/
/* ボタンクリックに反応してメッセージを表示する */
/****************************************/
const btn = document.querySelector('button');
//実行される関数
function showMessage() {
alert('Pyxofy へようこそ!');
}
//関数名を指定する
btn.addEventListener('click', showMessage);
コード例1とコード例2は、どちらも同じように動作します。
無名関数と関数名、どちらを使う?
今回実行される関数は、ポップアップメッセージを表示するだけの単純なものですね。このようにコードがシンプルな場合は、例1のように、括弧 ()
の中に無名関数を直接書く方法が一般的です。
一方、実行される関数の処理が複雑な場合は、例2のように、関数は別で定義するとコードが理解しやすくなります。このとき、第2引数には関数の名前だけを書くことに注意してください。関数名()
と書くと、ボタンのクリックを待たずに関数が呼び出され実行されてしまいます。
正しい書き方:
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
この記事をシェアしてくれると嬉しいです!