こんにちは、Kotonoです！
WEBサイトを作っていて、要素をクリックしたら要素が変化したりする動きをつけたい時ってありますよね。
要素をクリックしたらという条件付けは、JavaScriptで簡単に行なうことができます。
今回はクリック時の動きを指定するonclickというものについて解説していきます。
onclickイベントを使うことによって、HTMLドキュメント内の要素をクリックをした時の処理が行えるようになり、よりサイトをリッチに仕上げることができます。
ぜひ覚えて、より素敵なサイトを作れるようになっちゃいましょう！
onclickとは？
onclickイベントをあなたは使っていますか？
onclickとは、JavaScriptの数あるイベントハンドラーの一つです。
イベントハンドラーを一言で言うと、イベントが起こった時の処理を指します。
onclickの場合、「クリック」という行為が対象イベントとなります。
その為、onclickイベントとは、HTMLドキュメント内の要素をクリックした際に起こるイベント処理の事です。
ユーザーがボタンをクリックした時に何かが起こってほしい場合など、onclickによってクリック後に発動してほしい関数を指定する事が出来ます。
属性の値に記述する方法
では、属性の値に記述する方法を学んでみましょう。
これが基本的な使い方になります。
次のサンプルを見てください！
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" value="Check" onclick='console.log("Hello world!")'>
</body>
</html>
出力結果
Hello world!
上記コードでは、HTMLドキュメント内にボタン要素を作成し、必要な属性を追加しています。
この場合、onclickイベントハンドラーを発動させるために、onclick属性の値にconsole.log(“Hello world!”)と指定しました。
こうすると、ボタンをクリックした際にJavaScriptコンソールにHello world!と表示させる事が出来ます。
関数を指定する方法
先ほどのサンプルコードでは、onclickの中に直接console.logを指定したシンプルなものでした。
今回は、onclick属性の値に関数を指定してみましょう。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" value="Check" onclick="myfunc()">
<script>
var myfunc = function () {
console.log("Hello world!");
}
</script>
</body>
</html>
出力結果
Hello world !
上記サンプルコードでは、onclick属性の値としてmyfuncを設定しました。
myfuncは、先ほどのサンプルコードと同じく、JavaScriptコンソールにHello world!と表示させる関数です。
見ての通り、出力結果はHello world!です。
この方法を使用する事によって、長めの処理内容でも簡潔なコードを書く事が出来るので便利です。
onclickで複数の関数を実行してみよう
これまでのサンプルコードでは、実行したい関数をひとつだけ指定する場合の解説でした。
ここからは、複数の関数を実行したい場合に、onclickへふたつ以上の関数を指定するための方法をご紹介します。
複数の関数を実行する場合は、関数1と関数2を「;」セミコロンで区切りましょう。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" value="Check" onclick="myfunc1();myfunc2()">
<script>
var myfunc1 = function () {
console.log("Hello world!");
}
var myfunc2 = function() {
console.log("How are you?")
}
</script>
</body>
</html>
出力結果
Hello world ! How are you ?
上記コードでは、二つの関数を指定しました。
myfunc1はJavaScriptコンソールにHello world !と表示させ、myfunc2は同じくJavaScriptコンソールにHow are you ?と表示させます。
そして、ボタン要素のonclick属性の値にはmyfunc1とmyfunc2を「;」セミコロンで区切りました。
見て分かるように、実行結果はmyfunc1、myfunc2の順番に表示されます。
基本的には、複数の関数を指定した場合、コード内で指定した順番通りに実行されます。
onclickの引数にthisを指定してみよう
onclickに指定した関数にthisをつけると、戻り値を取得できるので便利です。
基本的にthisはクリックの対象である要素の事です。
その為、大体はその要素を動的に変化したいときなどに役立ちます。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" value="Check" onclick="myfunc(this)">
<script>
var myfunc = function (button) {
console.log(button.value);
}
</script>
</body>
</html>
出力結果
Check
上記コードでは、onclick属性にmyfunc関数を指定しました。
myfunc関数は、先ほどのサンプルコードとは違い、引数がthisと設定されています。
今回は、JavaScriptコンソールに、戻り値であるボタン要素のvalue属性の値を表示させてみました。
「ボタン要素のvalue属性の値」というと難しく聞こえるかもしれませんが、単にボタンの上に表示されている文字の事で、この場合はCheckです。
thisを使用することによって、戻り値で要素自体が返ってくるので、その要素の何かを変更したい時に有効です。
例えば、ボタンの上に表示されている文字を変更したい場合などにも使えます。
以下のコードをご覧ください。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" id="mybutton" value="Before" onclick="myfunc(this)">
<script>
var myfunc = function (button) {
button.value = "After";
}
</script>
</body>
</html>
上記のサンプルコードでは、ボタンの上に表示されている文字を、クリック後に変更させてみました。
HTML要素のonclick属性の値に任意の関数myfuncを当てはめ、その引数としてthisを指定します。
myfunc関数は、戻り値であるボタン要素のvalue属性の値にAfterと設定します。
では、実際にコードを実行してみましょう。
ボタンをクリックする前に表示れている文字は、以下の画像でご覧いただけるようにBeforeです。
クリック後は、Afterに文字が変わります。
このように、thisはイベントの対象要素を動的に変更するのに欠かせません。
クリックイベントの指定方法まとめ
クリックイベントの指定方法は、主に三つあります。
これまでのサンプルコードでは、HTML属性を使用する方法で統一しました。
HTML属性
HTMLドキュメント内の要素のonclick属性を使用する方法です。
指定したい関数を、要素のタグ内から直接呼び出します。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" id="mybutton" value="Check" onclick="myfunc()">
<script>
var myfunc = function(){
console.log("HTML属性を使用しました");
}
</script>
</body>
</html>
出力結果
HTML属性を使用しました
このように、HTML要素のonclick属性の値に関数を設定します。
この方法が最も簡単で一般的です。
onclickプロパティ
ドット（.）を使用し、onclickプロパティの値として指定したい関数を代入します。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" id="mybutton" value="Check">
<script>
var button = document.getElementById("mybutton");
var myfunc = function(){
console.log("onclickプロパティを使用しました");
}
button.onclick = myfunc;
</script>
</body>
</html>
出力結果
onclickプロパティを使用しました
この場合は、HTML要素の中身を変更しません。
getElementById関数で任意の要素を取り出して、その要素のonclickプロパティの値に関数を設定します。
addEventListener
JavaScriptの既存メソッドのaddEventListenerを使用し、任意の要素にイベントリスナーを登録します。
<html>
<body>
<p>ボタンをクリック！</p>
<input type="button" id="mybutton" value="Check">
<script>
var button = document.getElementById("mybutton");
var myfunc = function(){
console.log("addEventListenerを使用しました");
}
button.addEventListener("click",myfunc);
</script>
</body>
</html>
出力結果
addEventListenerを使用しました
この場合も、HTML要素の中身を変更しません。
getElementById関数で任意の要素を取り出し、その要素の既存メソッドaddEventListenerを使用します。
addEventListenerは2つの引数が必要で、1つ目はイベント名「click」になります。onclickのようにonは付けないので、注意してください。
2つ目は、呼び出したい関数です。この場合、myfuncです。
この方法も普及していて一般的なので、覚えておいて損はありません。
まとめ
今回は、onclickイベントハンドラーについて学習しました。
上記のサンプルコードでは、onclickの基本的な使い方から複数の関数を指定する方法や、三つのイベント指定方法などをご紹介しました。
特に、thisなどが使えるようになると非常に便利です。
onclickはイベントハンドラーの中でも頻繁に使う機会があると思います。
初心者から上級者まで、分け隔てなく使用率の高いこのonclickをマスターしておいて損はないですよね。
ぜひonclickなどのイベント処理を習得し、JavaScriptプログラムに磨きをかけていってくださいね。
【体験談】あなたは大丈夫？学習効率をなめて痛い目をみた話
突然ですが、あなたは学習効率をなめていませんか？
まず、私が実際にやってしまったプログラミング学習の失敗体験を聞いてください。
どの言語学習にも当てはまる失敗パターンだった・・・
私は、ある程度の目的と目標を持ってJava言語の独学で勉強していました。
使ったものは、
- 学習書籍
- 無料学習サイト
この2つでした。
「Java」を勉強しようと思った理由は、Javaが一番有名でスタンダードだったからです。
しかし、なかなか学習が進まない中、恐ろしいことに気づきました。
そもそもJavaで何が作れるのかうまく把握していないことに気づいてしまったのです。
そこで、キャリアアドバイザーの友人や現役エンジニアの先輩に相談した結果、自分がやりたかった学習の方向性がかなりズレてしまっていたことを知りました。
自分がやりたかった方向性として、
- Javaを学びたい ×
- Web系フリーランスエンジニアになって高収入を得たい ○
そして学習の問題点として、
- 書籍の流れ通りに学習することで全体像が把握できていなかった
- 何を作る予定なのかが明確になかった
- 将来どうなりたいのか軸がブレブレだった
以上がありました。
今回はJavaという例でしたが、どの言語にも当てはまるよくある挫折例なので注意しましょう。
▼キャリアアドバイザーと一緒にキャリアを考えよう（無料）
失敗体験から学んだ「学習する前」が最重要であること
先ほどは、がむしゃらな学習で失敗した体験談をお話してきました。ここからが重要です。
失敗から学んだ重要なことは、
- 経験豊富な第三者に相談して、自分にない視点でキャリアを見直すこと
- 目的・目標設定を必ずすること。必ずです。
- 学習経験者と一緒に学習スケジュールを作ること
この3つでした。
もうお気づきかもしれませんが、全て「学習前にすること」ですよね。
失敗があるので断言できますが、学習前に勝負は決まってしまいます。
これから学習するみなさんは、十分注意してください！
▼キャリアアドバイザーと一緒にキャリアを考えよう（無料）
質の高い目的・目標設定でキャリアの広がりは100倍以上
あなたのプログラミング学習の目的はどんなものでしょうか？
- 就職・転職するため
- フリーランスエンジニアになるため
この2つのうちどちらかである方は多いかもしれません。ですが、これでは抽象的すぎて今後何をすればいいのかが分からず、学習効率がかなり悪くなってしまいます。
今後の学習を効率的に進めるためにも、明確に将来どうなりたいのかを決めて、そこに向かって目標設定することで人生を切り開くきっかけになっていきます。
実際にプログラミングの挫折率9割という挫折率の高さを考えると、独学であれこれと参考書や学習サイトに手を出して結局身につかなかったということも少なくないのです。
まずは目的・目標設定を決め、学習する軸を決めて効率的な学習環境を整えましょう。
▼キャリアアドバイザーと一緒にキャリアを考えよう（無料）
