JavaScript onclickイベント入門：初心者向けステップバイステップガイド

JavaScriptのonclickイベントは、ユーザーがボタンやその他のWeb要素をクリックしたときに関数を実行するための仕組みです。HTMLドキュメント内にインラインで記述することも、JavaScriptファイル内で定義することもできます。

JavaScriptで開発をしていると、ユーザーがWebページを操作したタイミングで特定のコードを実行したい場面がよくあります。たとえば、「ボタンが押されたら何か処理をしたい」といったケースです。では、このような機能はJavaScriptでどう実装すればよいのでしょうか。

そこで役立つのが「onclick」イベントです。onclickは最もよく使われるイベントの一つで、ユーザーがボタンやページ上の要素をクリックしたときにコードを実行できます。

このガイドでは、onclickの仕組みをわかりやすく解説し、Webサイトをインタラクティブにするための具体的な使い方を紹介します。

イベントの基本をおさらい

onclickはJavaScriptイベントの一種です。イベントとは、ブラウザ上で発生するアクションのことで、ユーザーまたはブラウザ自身によって引き起こされます。ボタンのクリック、フォームの送信、キーボードの押下などは、すべてイベントの例です。このチュートリアルでは、その中でも「ユーザーが要素をクリックする」イベントに焦点を当てます。

イベントを活用すると、Webページをインタラクティブにできます。たとえば、ボタンがクリックされたときにフォームを表示したり、フォーム送信時にユーザーへメッセージを表示したりすることが可能です。

イベントには主に2つの構成要素があります。それが「イベントハンドラー」と「イベントリスナー」です。

ボタンをクリックしたり、キーを押したり、要素にマウスカーソルを合わせたりすると、イベントが発生します。イベントハンドラーとは、イベントが発生したときに実行されるコードのことです。たとえば、ボタンをクリックした際には、対応するイベントハンドラーが実行されます。

一方、イベントリスナーはボタンなどの要素に備わっている部分で、ユーザーの操作を待ち受けています。操作が検知されると、リスナーがイベントハンドラーを実行します。

JavaScript onclickの書き方

JavaScriptのonclickイベントは、ボタンや他のWeb要素をクリックしたときに関数を実行します。たとえば、onclickイベントを使えば、ボタンをクリックしたときにダイアログボックスを表示させることもできます。

HTMLでonclickメソッドを使う場合の構文は次のとおりです。

<button onclick="codetorun">Click me</button>

このHTMLボタンがクリックされると、「codetorun」のJavaScript関数が実行されます。onclickはボタン専用の属性ではなく、divなど他の要素にも使用できます。

プレーンなJavaScriptでもonclickを利用できます。以下はJavaScriptでのonclickメソッドの例です。

var item = document.getElementById("button");
item.onclick = function() {
  // 実行したいコード...
}

ここでは、JavaScriptのgetElementByIdメソッドを使ってWebページから要素を取得しています。IDが「button」の要素をクリックすると、onclick関数が実行される仕組みです。

ボタンonclickの実例

ここからは実際の例を見てみましょう。ボタンをクリックしたときに、ページ上の段落テキストを別の内容に変更したいとします。これにはonclick属性を使います。まず、ボタンとテキストを含むHTMLページを作成し、イベント用のコードを格納するJavaScriptファイルも用意しましょう。

index.html

<!DOCTYPE html>
<html>

<head>
	<title>onclick example</title>
</head>
<!-- コードの本体 -->
<body>
	<button>Click here.</button>

	<p>This text will change when you click the button.</p>
</body>

<!-- JavaScriptのイベントコードを読み込む -->
<script src="js/onclick.js"></script>

</html>

これは基本的なWebページの例ですが、まだインタラクティブではありません。このページを開くとボタンとテキストが表示されますが、ボタンをクリックしても何も起こりません。これは、onclickのスクリプト関数をまだ実装していないためです。

Webページの準備ができたら、onclickイベントを作成していきましょう。まず、ボタンにonclick()イベントリスナーを追加します。これにより、ユーザーがボタンをクリックしたタイミングを検知できるようになります。

index.html

...
<body>
	<button onclick="changeParagraph()">Click here.</button>

	<p>This text will change when you click the button.</p>
</body>
...

次に、changeParagraph()イベントのコードを格納する「onclick.js」ファイルを作成します。このイベントは、段落（p要素）のテキストを別の内容に変更します。

onclick.js

const changeParagraph = () => {
	const paragraph = document.querySelector("p");
	paragraph.textContent = "This text has changed because you clicked the button.";
}

ここでは、changeParagraphというJavaScript関数を定義しています。querySelectorメソッドを使ってページ上の段落を選択し、textContentプロパティでテキストを書き換えています。ページを最初に読み込んだときは、ボタンと「This text will change when you click the button.」（ボタンをクリックするとこのテキストが変わります）というテキストが表示されます。

ボタンをクリックすると、Webページが更新され、新しいテキストが表示されます。

JavaScript onclickイベント入門：初心者向けステップバイステップガイド

まとめ

onclick()は、Webページ上の要素がクリックされたときに特定のコードを実行できるJavaScriptイベントです。

以上で解説は終わりです！上記のコードを使えば、ボタンを押したときにコードを実行するWebページを作成できました。今回の例ではテキストを変更するだけでしたが、alert()関数でアラートを表示したり、if文を組み込んで条件分岐を加えたりするなど、コードはシンプルにも複雑にも自由に拡張できます。

さらにJavaScriptを学びたい方は、ぜひ関連の学習ガイドも参考にしてみてください。

jQueryのfind()メソッドとは？初心者向けステップバイステップ解説

JavaScriptのparseInt()メソッド完全ガイド：文字列を整数に変換する方法

JavaScript関数の使い方を徹底解説！初心者向けステップバイステップガイド
JavaScriptの関数とは、再利用できるカスタムコードブロックのことです。関数を活用することでコードのモジュール化が促進され、オブジェクト指向プログラミングにおいても欠かせない存在となります。関数は「宣言」または「式」のいずれかの方法で定義できます。これからJavaScriptを学ぼうとしている方にとって、JS関数の基礎は必ず押さえておきたい重要ポイントです。プログラミング言語に触れた経験がある方なら、関数が複雑なプログラムを組み立てるための基本的な部品であることはご存じでしょう。しかし、その仕組みまで理解している方は少ないかもしれません。関数を使えば、共通の処理を一度書くだけで済
【JavaScript入門】onclick()でボタンクリック時に関数を呼び出す方法
はじめにWebページのボタンがクリックされたときに、特定の関数を実行したい場面は非常によくあります。JavaScriptでは、HTML要素のonclick属性に関数名を指定するだけで、この動作を簡単に実現できます。例えば、次のようなボタンがあるとします。<button onclick="displayingMessageOnButtonClick()">押してください</button>このボタンがクリックされた際に、指定した関数を呼び出すことが目的です。コード例以下がその完全なサンプルコードです。<!DOCTYPE html> <h