JavaScriptでクリック操作を実装したいときに、まず覚えたいのがonclickです。onclickを使えば、ボタンや画像、テキストなどがクリックされたタイミングで、任意の処理を実行できます。ただし、クリックイベントの設定方法はいくつかあり、どの方法を選ぶかによってコードの見やすさや管理のしやすさが変わります。
この記事では、onclickの意味から基本的な使い方、クリックイベントを設定する3つの方法、実用例、使うときのポイントまでを、初心者の方にもわかりやすく解説します。
JavaScriptのonclickとは？
onclickとは、要素がクリックされたときに処理を実行するためのイベントハンドラーです。JavaScriptでは、ボタンやリンク、画像などがクリックされたタイミングに合わせて、メッセージを表示したり、見た目を変えたり、別の処理を呼び出したりできます。
たとえば「ボタンを押したらアラートを表示する」「クリックしたら文字色を変える」といった動きは、onclickを使って実装できます。ユーザーの操作に反応する仕組みの中でも、特に基本となる考え方のひとつです。
JavaScriptそのものの基本概念から整理したい方は、以下の記事も参考にしてみてください。
onclickは、HTMLに直接書く方法だけでなく、JavaScript側で設定する方法もあります。また、実務ではaddEventListenerでclickイベントを登録する方法もよく使われます。書き方によってコードの見やすさや管理のしやすさが変わるため、用途に応じて使い分けることが大切です。
クリックイベントを設定する3つの方法
クリックイベントを設定するには、主に3つの方法があります。
- HTML属性に直接書く方法
- onclickプロパティに代入する方法
- addEventListenerで設定する方法
それぞれに特徴があり、手軽に書きたい場面と、管理しやすさを重視したい場面では向いている方法が異なります。
| 方法 | 特徴 | 向いている場面 | 注意点 |
|---|---|---|---|
| HTML属性に直接書く方法 | HTMLタグにそのまま処理を書けるため、書き方がシンプル | onclickの基本を学ぶとき、簡単な動作確認をしたいとき | HTMLとJavaScriptが混ざるため、コードが増えると見づらくなりやすい |
| onclickプロパティに代入する方法 | JavaScript側で処理を書けるため、HTMLと分けて整理しやすい | 小規模な処理をHTMLと分けて書きたいとき | あとから別の処理を追加すると、既存の処理を上書きしやすい |
| addEventListenerで設定する方法 | JavaScriptでイベントを登録でき、拡張しやすい | 実務や中規模以上の開発、今後コードが増える可能性があるとき | 最初は少し書き方が長く感じることがある |
まずは3つの書き方の違いを理解し、用途に応じて使い分けることが大切です。
HTML属性に直接書く方法
1つ目は、HTMLタグの中にonclick属性を書き、その中で実行したい処理や関数名を指定する方法です。書き方がシンプルでわかりやすいため、onclickの基本を学ぶときによく使われます。
<button onclick="showMessage()">クリック</button>
<script>
function showMessage() {
alert("ボタンがクリックされました！");
}
</script>ただし、この方法はHTMLの中にJavaScriptの処理が入り込むため、コードが増えると見通しが悪くなりやすい点に注意が必要です。簡単な動作確認や小規模な記述には向いていますが、処理が増える場合は別の方法のほうが管理しやすくなります。
onclickプロパティに代入する方法
2つ目は、JavaScriptで要素を取得し、その要素のonclickプロパティに関数を代入する方法です。HTMLとJavaScriptを分けて書けるため、HTML属性に直接書く方法よりも整理しやすくなります。
<button id="btn">クリック</button>
<script>
const button = document.getElementById("btn");
button.onclick = function() {
alert("ボタンがクリックされました！");
};
</script>一方で、この方法はあとから別のクリック処理を追加しにくいという特徴があります。すでに設定されているonclickの内容を上書きしてしまう可能性があるため、複数の処理を柔軟に扱いたい場合にはやや不向きです。
addEventListenerで設定する方法
3つ目は、addEventListenerを使ってclickイベントを登録する方法です。現在のJavaScriptでは、この方法がよく使われています。HTMLに処理を書かずに済み、クリック時の処理も追加しやすいため、コードを整理しながら機能を拡張しやすいのが特徴です。
<button id="btn">クリック</button>
<script>
const button = document.getElementById("btn");
button.addEventListener("click", function() {
alert("ボタンがクリックされました！");
});
</script>特に、今後コード量が増えることを考えるなら、最初からaddEventListenerに慣れておくと実務でも使いやすくなります。複数の処理を扱いやすく、保守もしやすいため、迷ったときに選びやすい書き方です。
JavaScriptのonclickの使い方
onclickやclickイベントを使うと、クリックされたタイミングで任意の処理を実行できます。基本の流れは、クリックされたときに動かしたい関数を用意し、その関数を要素に紐づけることです。まずは、クリックで関数を呼び出す形を押さえたうえで、コードの置き場所やイベント情報の受け取り方まで理解しておくと、実際の開発でも使いやすくなります。
クリック時に関数を呼び出す基本形
クリック処理のもっとも基本的な考え方は、クリックされたときに関数を呼び出すことです。あらかじめJavaScriptで関数を定義しておき、ボタンなどの要素がクリックされたタイミングでその関数を実行します。
<button onclick="myFunction()">クリック</button>
<script>
function myFunction() {
alert("ボタンがクリックされました！");
}
</script>この形を覚えておくと、「メッセージを表示する」「見た目を変える」「別の処理を始める」といった動きをまとめて扱いやすくなります。処理の内容を関数として切り出しておけば、同じ処理を何度も使い回しやすくなるのもメリットです。
外部のJavaScriptファイルに処理を書く
クリック時に実行する処理は、HTMLの中に直接書くこともできますが、実際には外部のJavaScriptファイルにまとめることが多いです。処理を別ファイルに分けることで、HTMLの見通しがよくなり、コード全体を整理しやすくなります。
外部ファイル（例：script.js）の例
function myFunction() {
alert("ボタンがクリックされました！");
}HTMLファイルでは、以下のように外部ファイルを読み込むことができます。
<script src="script.js"></script>特に、クリック時の処理が長くなる場合は、HTMLに直接書くよりも外部ファイルにまとめたほうが管理しやすくなります。デザインを担当するHTMLと、動きを担当するJavaScriptを分けて考えられるため、修正や追加もしやすくなります。
イベントオブジェクトを受け取る
クリックイベントでは、クリック時の情報を持つイベントオブジェクトを受け取ることもできます。イベントオブジェクトを利用することで、マウスの座標やクリックされた要素などの情報を取得できます。
以下の例では、クリックした座標をアラートで表示する方法を示します。
<button onclick="showCoordinates(event)">クリック</button>
<script>
function showCoordinates(event) {
const x = event.clientX;
const y = event.clientY;
alert(`クリックした座標：X=${x}、Y=${y}`);
}
</script>これらの方法を覚えておけば、onclickやclickイベントを使ったさまざまなインタラクティブな要素を作成しやすくなります。
クリックイベントの実用例
onclickは、クリックされたことをきっかけにさまざまな処理を実行できるため、Webページの見た目や動きを変える場面でよく使われます。難しい処理だけでなく、メッセージの表示や文字の変更など、基本的な機能にも幅広く活用できます。
ここでは、onclickを使った代表的な実用例を3つ紹介します。
ボタンを押したらメッセージを表示する
もっとも基本的な使い方のひとつが、ボタンをクリックしたときにメッセージを表示する処理です。たとえば、ボタンを押したら「送信しました」「クリックされました」といった文言を表示すれば、ユーザーは操作が反映されたことをすぐに確認できます。
このような処理は、onclickの動きを理解する最初の例としてもわかりやすく、学習段階でもよく使われます。単純な動作に見えますが、ユーザーに反応を返すという点で、実際のWeb制作でも役立つ基本的な考え方です。
クリックしたら文字や色を変える
onclickを使うと、クリックをきっかけに文字の内容や色を変更することもできます。たとえば、ボタンを押したらテキストを別の内容に変えたり、背景色や文字色を切り替えたりすることで、画面に変化をつけられます。
このような処理は、ユーザーの操作に応じて状態を見せたいときに便利です。選択中のボタンだけ色を変える、説明文を表示に切り替えるなど、少し動きを加えるだけでも画面がわかりやすくなります。見た目の変化を通して、操作結果を直感的に伝えられるのが特徴です。
クリックした要素を取得する
onclickでは、どの要素がクリックされたのかを取得して処理に活かすこともできます。これにより、同じ種類の要素が複数並んでいる場合でも、クリックされた対象に応じて動きを変えられます。
たとえば、複数のリストやボタンの中から、クリックされたものだけに印をつけたり、内容を表示したりすることができます。どの要素が操作されたのかを把握できるようになると、より実践的なインタラクションを作りやすくなります。
onclickを使うときのポイント
onclickは手軽にクリック処理を実装できる便利な仕組みですが、書き方を何となく選んでしまうと、あとからコードが見づらくなったり、修正しにくくなったりすることがあります。特に、学習段階では動けば問題ないと感じやすいものの、処理が増えるほど書き方の違いが影響しやすくなります。ここでは、onclickを使うときに意識しておきたいポイントを3つ紹介します。
書き方によって使いやすさが変わる
onclickは、HTML属性に直接書く方法、onclickプロパティに代入する方法、addEventListenerで設定する方法など、いくつかの書き方があります。どの方法でもクリック時に処理を実行できますが、コードの見やすさや管理のしやすさには違いがあります。
たとえば、簡単な動作確認であればHTMLに直接書く方法でも十分ですが、処理が長くなったり複数の要素を扱ったりする場合は、JavaScript側でまとめて管理したほうがわかりやすくなります。単に書けるかどうかではなく、あとから修正しやすいかまで考えて選ぶことが大切です。
迷ったらaddEventListenerを選ぶ
どの書き方を使うべきか迷ったときは、addEventListenerを選ぶのが基本です。HTMLとJavaScriptを分けて書きやすく、クリック時の処理を整理しやすいため、学習用だけでなく実務でもよく使われます。
また、addEventListenerは複数のイベント処理を追加しやすく、機能をあとから増やしたいときにも対応しやすい方法です。これからJavaScriptの書き方に慣れていきたい場合も、最初からaddEventListenerの使い方を押さえておくと応用しやすくなります。
処理が増えるときはコードを分けて考える
onclickで実行する処理が増えてきたときは、1か所にすべてを書き込むのではなく、役割ごとにコードを分けて考えることが大切です。クリックされたことをきっかけに関数を呼び出し、実際の処理は別の関数や外部ファイルにまとめるようにすると、全体の見通しがよくなります。
特に、表示の切り替え、要素の取得、データの処理などが混ざり始めると、1つの場所にまとめて書いたコードは急に読みにくくなります。onclickはあくまで処理を始める入口と考え、中身は整理して分ける意識を持つと、修正や追加がしやすいコードになります。
JavaScriptを学ぶ方法
JavaScriptは、ブラウザ上ですぐに動かせるため、初心者でも始めやすい言語です。しかし、実際に学習を進めると、エラーの原因がわからない、何をどの順番で学べばよいかわからないなど、さまざまな壁にぶつかります。
onclickのような内容を学ぶ段階になると、特に難しさを感じやすくなります。onclickは一見するとシンプルな機能ですが、JavaScriptだけでなくHTML、CSSとの関係も含めて理解しなければなりません。
JavaScriptの書き方や学び始めの流れを先に整理したい方は、以下の記事も参考になります。
【入門】JavaScriptの使い方特集！書き方や習得方法も紹介
そこでおすすめなのが忍者CODEです。忍者CODEは未経験者向けの学習導線が整っており、JavaScriptの基礎から実践まで段階的に学びやすいのが特徴です。動画教材で学びながら、必要に応じてサポートを受けられるため、独学で挫折しそうな方でも進めやすいでしょう。
さらに忍者CODEでは
・学習者同士でつながれるコミュニティへの招待
などといったサポート体制を設けているため、学習を進めていく中で出てきた問題点や不明点をスムーズに解決しながら、挫折することなくプログラミングスキルの習得が可能です。
これからWeb制作を学びたい方や、独学で進める中でつまずきを感じている方は、ぜひ公式サイトをご覧ください。
まとめ
onclickは、要素がクリックされたタイミングで処理を実行するための基本的な仕組みです。ボタンを押したときにメッセージを表示したり、文字や色を変えたり、クリックされた要素を取得したりと、さまざまな場面で活用できます。
JavaScriptで他にどんなことができるのかを知りたい方は、以下の記事もあわせて確認してみてください。
JavaScriptでできることは？初心者向けにわかりやすく解説
設定方法には、HTML属性に直接書く方法、onclickプロパティに代入する方法、addEventListenerで設定する方法があります。それぞれに違いはありますが、迷ったときは管理しやすく拡張しやすいaddEventListenerを選ぶと使いやすいです。
onclickは書き方自体はシンプルですが、処理が増えるほどコードの整理が大切になります。まずは基本的な使い方を押さえたうえで、状況に応じて適切な書き方を選べるようになると、JavaScriptでのクリック処理をより実践的に扱えるようになります。
