JavaScriptでのonclickの使い方を初心者向けに解説

ユーザーがボタンをクリックしたり、フォームを送信したりするなど、様々なアクションに応じて特定の動作を実行する際に、JavaScriptのonclickイベントが活躍します。

この記事では、JavaScript初心者向けにonclickの使い方について詳しく解説していきます。

JavaScriptのonclickとは？

JavaScriptのonclickは、要素がクリックされたときに特定のアクションを実行するためのイベントハンドラーです。

例えば、ボタンをクリックしたときにメッセージを表示する、画像を切り替える、フォームの内容を確認するなど、さまざまな動作をトリガーすることができます。onclickイベントは、HTML要素とJavaScriptの関数を結び付けることで動作します。

JavaScriptのonclickの使い方

onclickイベントの基本的な構文

onclickイベントは、HTML要素に直接記述することができます。以下は、基本的な構文の例です。

<button onclick="myFunction()">クリック</button>

上記の例では、ボタンがクリックされると、名前が”myFunction”で定義されたJavaScript関数が呼び出されます。

JavaScript関数の作成

onclickイベントを利用するためには、JavaScriptの関数を事前に作成する必要があります。関数は以下のようにして定義します。

function myFunction() {
　// ここに実行したいコードを書く
　alert("ボタンがクリックされました！");
}

上記の例では、”myFunction”という名前の関数が定義されています。この関数では、ボタンがクリックされたときにアラートメッセージが表示されます。

外部のJavaScriptファイルを使う

JavaScriptのコードをHTMLファイル内に直接書くのではなく、外部のJavaScriptファイルとして保存しておくこともできます。これにより、複数のHTMLファイルで同じJavaScriptコードを共有できるようになります。

外部ファイル（例：script.js）の例

function myFunction() {
　alert("ボタンがクリックされました！");
}

HTMLファイルでは、以下のように外部ファイルを読み込むことができます。

<script src="script.js"></script>

イベントオブジェクトを使用する

onclickイベントは、クリック時の情報を提供するイベントオブジェクトを使用することもできます。イベントオブジェクトを利用することで、マウスの座標やクリックされた要素などの情報を取得できます。

以下の例では、クリックした座標をアラートで表示する方法を示します。

<button onclick="showCoordinates(event)">クリック</button>

<script>
function showCoordinates(event) {
　const x = event.clientX;
　const y = event.clientY;
　alert(`クリックした座標：X=${x}、Y=${y}`);
}
</script>

これらの方法を覚えておけば、onclickイベントを使ったさまざまなインタラクティブな要素を作成することができます。

クリックイベントの指定方法

HTML属性による指定

最も基本的な方法の一つで、HTML要素の属性として直接onclickを記述します。

<button onclick="myFunction()">クリック</button>

この方法では、onclick属性にJavaScriptのコードを直接書くことで、クリックされたときに指定した関数が呼び出されます。しかし、コードがHTMLに直接埋め込まれるため、大規模なプロジェクトではメンテナンスが困難になる傾向があります。

onclickプロパティによる指定

HTML要素をJavaScriptで取得し、その要素のonclickプロパティに関数を代入する方法です。

<button id="myButton">クリック</button>

<script>
const button = document.getElementById('myButton');
button.onclick = function() {
　alert('ボタンがクリックされました！');
};
</script>

この方法でもクリックイベントを指定することができますが、複数のイベントを同時に設定することは難しく、また既存のイベントハンドラを上書きする可能性があるため、推奨される方法ではありません。

addEventListenerによる指定

addEventListenerメソッドは、HTML要素に対して複数のイベントハンドラを追加することができる方法です。

<button id="myButton">クリック</button>

<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
　alert('ボタンがクリックされました！');
});
</script>

この方法は、複数のイベントハンドラを追加することができ、既存のイベントハンドラを上書きする心配もありません。したがって、大規模なプロジェクトではaddEventListenerを使用することが一般的です。

以上の3つの方法でクリックイベントを指定することができますが、addEventListenerが柔軟性と拡張性に優れているため、特に大規模なプロジェクトやモダンなJavaScriptアプリケーションでは推奨される方法となっています。

まとめ

JavaScriptのonclickイベントを使うことで、ウェブページにインタラクティブな要素を追加することができます。クリックイベントは、HTML属性、onclickプロパティ、またはaddEventListenerメソッドを使用して指定することができます。

初心者でも簡単に実践できる方法として、addEventListenerメソッドの利用がおすすめです。これにより、ユーザーとより良い体験を提供することが可能となります。是非試してみてください！

挫折することなくエンジニアを目指すなら

独学？スクール？

これからHTMLやCSSなどといったプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際に学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

忍者CODEの学習は“実践型”！
だから結果を出せる！

●初めてJavaScriptを学習する方
∟はじめての方でも安心してJavaScriptを学習できるように、基礎知識から実践的な課題までプロへのロードマップが分かりやすいカリキュラムを採用。
●副業に有利なことを探されている方
∟未経験からでもスキルを習得できる“実践的カリキュラム”と、学習だけでなく受講後もプロのメンターがマンツーマンで徹底的に副業サポートまで行い、受講後は必ず案件をご紹介するプランの副業・案件”保証”プランもあります。
●業界最安級の受講費用で始めやすい
∟税込9,800円から始められる忍者CODEのプログラミングスクールは業界でも最安級！それでも学習し放題、チャットサポートは無期限・無制限と、プロのメンターとエンジニアを筆頭に、皆さんを徹底的にサポートします。

まずは自分の適性プラン診断から！