onclickの使い方｜HTMLイベントの基本とJavaScript連携サンプル集

HTMLでボタンや画像をクリックしたときに、何か動かしたいなって思うことありますよね。

でも、「どうやってクリックに反応させるの？」って最初はちょっと難しく感じるかもしれません。

今回は、そんなときに役立つonclickというHTMLイベントについてわかりやすく説明します。

クリックした瞬間に、文字を出したり、色を変えたり、いろんな動きがつけられるようになります。

onclickの使い方やJavaScriptとの組み合わせ方がわかれば、かんたんな動きのあるウェブページを自分でも作れるようになりますので、ぜひ最後まで読んで参考にしてみてください。

onclickとは？HTMLイベントの基本を理解しよう

onclickの意味と役割とは

HTMLの中で「onclick（オン・クリック）」とは、ユーザーがマウスでクリックしたときに反応するイベントのことです。

このonclickイベントを使うと、クリックしたときにJavaScriptの処理を実行することができます。

たとえば、ボタンを押したときに文字を表示したり、画像を切り替えたりすることができます。

onclickがどんな役割を持っているのか、以下にまとめました。

このように、onclickイベントはウェブページに動きをつけるためにとても重要な機能です。

使い方を覚えれば、クリック一つでさまざまな処理ができるようになります。

HTMLにおけるイベント属性の種類

HTMLにはonclickのほかにもたくさんのイベント属性があります。

それぞれのイベントは、ユーザーのいろいろな操作に反応して動くようになっています。

ここでは代表的なイベント属性を紹介します。

イベント属性の種類は以下のようなものがあります。

これらのイベント属性を使うことで、ユーザーの行動に合わせてさまざまな処理を実行できます。

onclickはその中でも一番よく使われるイベントの一つです。

onclickが使われる代表的なシーン

onclickイベントは、日常的に見るウェブサイトの中でも多く使われています。

たとえば、ボタンをクリックしてメニューを開いたり、画像を切り替えたりする時などに使われます。

代表的な使い方を以下に示します。

このように、onclickはクリックに反応してページをもっと便利にするための基本的な仕組みとして広く使われています。

onclickを使うメリットとデメリット

onclickイベントはとても便利ですが、良い面と注意すべき点の両方があります。

ここではメリットとデメリットをわかりやすく説明します。

まずはメリットから見てみましょう。

一方でデメリットもあります。

このように、onclickはとても使いやすい一方で、きちんとした使い方を知っておくことが大切です。

onclickの基本的な書き方

onclickを使うには、HTMLのタグに「onclick」という属性を追加して、そこにJavaScriptのコードを書くのが基本です。

書き方の例を紹介します。

まず、簡単なサンプルコードを見てみましょう。


<button onclick="alert('こんにちは！')">クリックしてね</button>


このコードでは、ボタンをクリックすると「こんにちは！」というメッセージが表示されます。

onclickの書き方は以下のような手順で覚えると簡単です。

onclickの書き方はとてもシンプルなので、初めてJavaScriptを使う人でもすぐに試すことができます。

まずはこの基本の形をしっかり覚えましょう。

onclickと他のイベントの違い

onclickとよく比べられるイベントに「onchange」や「onmouseover」などがあります。

それぞれどのように違うのかを理解しておくと、場面に応じたイベントの使い分けができるようになります。

以下に主な違いをまとめます。

このようにイベントごとに動作のタイミングが異なります。

onclickはユーザーの明確な操作（クリック）に反応するので、初心者にも扱いやすく、動きがわかりやすいという特徴があります。

onclickの具体的な使い方と記述方法

ボタンにonclickを設定する方法

HTMLのボタンにonclickを設定することで、ユーザーがクリックしたときに特定の動作をさせることができます。

たとえば、アラートを表示したり、文字を変えたりする処理を追加できます。

基本的な書き方はとてもシンプルです。

以下のように記述します。


<button onclick="alert('こんにちは！')">押してみてね</button>


このように、onclickの中にJavaScriptの命令を書くことで、ボタンに動きをつけることができます。

ボタンに設定するポイントをまとめます。

ボタンとonclickの組み合わせは基本中の基本ですので、ぜひ試してみてください。

画像にクリックイベントを追加する方法

画像にもonclickを使って、クリックしたときに変化を起こすことができます。

たとえば、画像を別の画像に切り替えたり、拡大表示したりできます。

HTMLではimgタグに直接onclickを書きます。

簡単な例を紹介します。


<img src="apple.jpg" onclick="this.src='banana.jpg'" alt="果物" />


このコードでは、画像をクリックするとbanana.jpgに切り替わります。

画像にonclickを使うときのポイントは以下のとおりです。

画像にクリックイベントをつけると、視覚的にも楽しくてわかりやすい効果が作れます。

リンク（aタグ）でonclickを使うときの注意点

aタグにonclickをつけると、リンク先に飛ぶ前にJavaScriptの処理を実行できます。

ただし、使い方には注意が必要です。

リンクの動きを止めたいときは、JavaScriptでイベントを止める処理を入れる必要があります。

次の例では、クリックしてもページ移動しないようにしています。


<a href="#" onclick="alert('クリックされました'); return false;">リンク</a>


このように、return falseを使うことで、リンク先に飛ばないようにできます。

注意点を以下にまとめます。

aタグとonclickをうまく使えば、ページ移動せずにダイアログを出すなど、操作の幅が広がります。

複数の関数をonclickで実行する方法

onclickの中では、1つだけでなく、いくつもの関数や処理をまとめて実行することが可能です。

そのときはセミコロン（;）を使って処理を区切ります。

例として、2つの処理を実行するコードを紹介します。


<button onclick="sayHello(); changeColor();">実行する</button>


このコードでは、sayHello関数とchangeColor関数の2つを順番に実行します。

複数処理を実行するときのポイントをまとめます。

複数の動きを一度に起こすことで、よりリッチなユーザー体験を作ることができます。

HTMLに直接書く場合とJavaScriptで制御する場合の違い

onclickの処理はHTMLのタグに直接書く方法と、JavaScript側から指定する方法の2つがあります。

それぞれにメリットとデメリットがありますので、場面によって使い分けましょう。

まずはHTMLに直接書く場合の例です。


<button onclick="showMessage()">表示</button>


次にJavaScriptで指定する場合は、以下のように書きます。


document.getElementById("myBtn").onclick = showMessage;


2つの方法の違いは次のようになります。

小さなテストや練習ではHTMLに直接書く方法でも十分ですが、本格的なサイトではJavaScriptにまとめて書く方法をおすすめします。

よくある書き間違いやエラー例

onclickを使うときによくあるエラーには注意が必要です。

うっかりミスでうまく動かないこともあります。

初心者が間違えやすいポイントを知っておくと、すぐに修正できます。

代表的なエラーの原因を紹介します。

エラーが出たときは、まずはコンソールに表示されるメッセージを確認することが大切です。

冷静に見直せば解決できることがほとんどです。

シンプルなサンプルコード集

ここでは、onclickの基本的な使い方を学べる、簡単なサンプルコードをいくつか紹介します。

まずは試してみて、クリックでどんな動きができるのか体験してみましょう。


<button onclick="alert('ようこそ！')">メッセージ表示</button>



<img src="dog.jpg" onclick="this.src='cat.jpg'" alt="動物" />



<button onclick="document.body.style.backgroundColor='lightblue'">背景色変更</button>



<a href="#" onclick="alert('リンクをクリックしました'); return false;">リンクを押す</a>


どれも短くてわかりやすいコードばかりです。

まずはコピーして動かしてみることが上達の近道です。

慣れてきたら、自分なりにアレンジして試してみましょう。

JavaScriptとの連携でできること

onclickで関数を呼び出す基本構文

onclickイベントでは、クリックされたときにJavaScriptの関数を実行できます。

まずは「関数とは何か」を簡単に理解しておきましょう。

関数とは、何かの処理をまとめておいて、必要なときに呼び出せる便利な仕組みです。

以下は関数を呼び出す基本的な例です。


<button onclick="sayHello()">あいさつする</button>

<script>
function sayHello() {
alert(‘こんにちは！’);
}
</script>

関数を呼び出すには、onclick属性の中に関数名と「()」をつけて書きます。

ポイントは次のとおりです。

onclickと関数の組み合わせを覚えれば、コードがすっきりして何度も同じ処理を使いまわせるようになります。

クリック時に要素のスタイルを変更する方法

JavaScriptを使えば、onclickでHTMLの見た目（スタイル）を自由に変えることができます。

たとえば、背景の色を変えたり、文字の大きさを変更したりすることができます。

以下はボタンをクリックして背景色を変える例です。


<button onclick="changeBg()">背景を青にする</button>

<script>
function changeBg() {
document.body.style.backgroundColor = ‘lightblue’;
}
</script>

スタイルを変更するには、JavaScriptで「style」プロパティを使います。

よく使われるスタイル変更の例を紹介します。

クリックでスタイルを変えると、画面にすぐ変化が現れるので楽しく学べます。

フォーム操作やバリデーションとの連携

onclickを使うことで、フォームの送信前に入力内容をチェックしたり、入力されたデータを別の場所に表示したりできます。

これを「バリデーション」と呼びます。

以下は、名前の入力が空白だったら警告を出す例です。


<input type="text" id="username">
<button onclick="checkInput()">送信</button>

<script>
function checkInput() {
let name = document.getElementById(‘username’).value;
if (name === ”) {
alert(‘名前を入力してください’);
} else {
alert(‘こんにちは、’ + name + ‘さん！’);
}
}
</script>

フォームとonclickを組み合わせるときのポイントをまとめます。

フォームのチェックを自動でしてくれると、間違ったまま送信することを防げてとても便利です。

onclickでモーダルウィンドウを表示する

モーダルウィンドウとは、画面の上にポップアップのように出てくる表示枠のことです。

onclickイベントでモーダルを表示することもできます。

これにより、ページを移動せずにお知らせやフォームを見せることができます。

以下にシンプルなモーダル表示の例を示します。


<button onclick="showModal()">モーダルを開く</button>

<div id=”modal” style=”display:none; background:#fff; padding:20px; border:1px solid #ccc;”>
これはモーダルです！
</div>

<script>
function showModal() {
document.getElementById(‘modal’).style.display = ‘block’;
}
</script>

モーダルの基本ポイントは以下の通りです。

モーダルは情報を目立たせたいときや確認画面としてとても使いやすい要素です。

イベントリスナーとonclickの違い

onclick属性はとても簡単に使える反面、複雑な処理や複数のイベント管理には向いていないことがあります。

そのようなときは「イベントリスナー（addEventListener）」を使うと、より柔軟に対応できます。

以下にonclickとaddEventListenerの違いを示します。


// onclickの例
document.getElementById('btn').onclick = function() {
alert('クリックされました');
};

// addEventListenerの例
document.getElementById(‘btn’).addEventListener(‘click’, function() {
alert(‘クリックイベント’);
});

それぞれの違いを比べてみましょう。

addEventListenerを使うことで、コードの見た目も整理され、より信頼性の高い処理が実現できます。

動的に要素を生成してonclickを付与する方法

JavaScriptでは、ボタンや画像などの要素を、HTMLに書かなくても動的に作り出すことができます。

そしてその作った要素にonclickをつけることも可能です。

これを使うと、条件に合わせて画面を自由に変化させられます。

以下はボタンを作ってクリック時にメッセージを表示する例です。


<script>
let btn = document.createElement('button');
btn.innerText = '動的ボタン';
btn.onclick = function() {
alert('ボタンがクリックされました');
};
document.body.appendChild(btn);
</script>


ポイントは次の通りです。

動的な要素作成とonclickの連携は、ユーザーの操作に応じた柔軟な表示を可能にする重要な技術です。

外部JavaScriptファイルと組み合わせた実装

HTMLの中にすべてのJavaScriptを書くと、コードが長くなって管理が難しくなります。

そこでよく使われる方法が、JavaScriptを外部ファイルとして分けて書くやり方です。

この方法でonclickもきれいに整理できます。

基本の書き方は以下のようになります。


<button onclick="sayHi()">あいさつ</button>
<script src="script.js"></script>


外部ファイル（script.js）の中身はこうなります。


function sayHi() {
alert('こんにちは！');
}


外部ファイルと組み合わせるときの注意点をまとめます。

外部ファイルを使えば、コードがスッキリして、保守や再利用もしやすくなります。

プロの現場でもよく使われる手法です。

onclick使用時の注意点とベストプラクティス

HTMLとJavaScriptの分離が推奨される理由

onclickはHTMLに直接JavaScriptの処理を書くことができる便利な方法ですが、大規模な開発や長く運用するウェブサイトではHTMLとJavaScriptを分ける「分離」がとても大切になります。

分けて書くことで、コードが見やすくなり、後から修正しやすくなります。

onclickを直接書く方法と、JavaScriptファイルで管理する方法の違いを説明します。

このように、HTMLとJavaScriptを分けて書くことで、コードの整理ができてミスも減らすことができます。

onclickを使うときは、なるべくJavaScriptファイルで処理を書くように心がけましょう。

アクセシビリティへの配慮

ウェブサイトを作るときは、誰にとっても使いやすいデザインにすることがとても大切です。

クリックイベントを使う場合も、視覚や操作に制限のあるユーザーに配慮することが求められます。

以下はonclickを使うときに気をつけたいアクセシビリティのポイントです。

onclickを使っても、見えない人やマウスが使えない人でも安心して使えるように工夫することが大切です。

セキュリティ面でのリスクと対策

onclickを使ってJavaScriptを実行する場合、セキュリティの知識も持っておく必要があります。

特に、外部からの入力や悪意のあるスクリプトに対して正しく対処しないと、ウェブサイトが危険にさらされることがあります。

onclickに関する主なリスクとその対策をまとめます。

セキュリティ対策をしっかり行うことで、安心してonclickを使った機能を提供することができます。

onclickの代替手段（addEventListenerなど）

onclickは初心者にもわかりやすく使いやすいですが、本格的な開発では「addEventListener」という方法のほうが柔軟で安全なことが多いです。

addEventListenerを使うと、同じ要素に複数の処理を追加したり、イベントを簡単に切り替えたりできます。

以下にonclickとaddEventListenerの比較をまとめます。

たとえば、以下のように書くことでボタンにクリックイベントを追加できます。


document.getElementById('myBtn').addEventListener('click', function() {
alert('クリックされました');
});


この方法を使えば、onclickよりも自由にイベントを扱うことができ、保守性も高まります。

パフォーマンスへの影響と改善方法

onclickをたくさんの要素に設定した場合、ページの表示速度や操作の反応に影響することがあります。

とくに、ループや大量のボタンに対して個別にonclickを付けると、パフォーマンスが悪くなることがあります。

パフォーマンスを改善するためのポイントは次の通りです。

効率よく書くことで、たくさんの要素にonclickを使っても動作が軽く、使いやすいサイトになります。

保守性の高いコードの書き方

ウェブサイトを長く使っていくためには、わかりやすくて直しやすいコードを書くことが大切です。

onclickのようなイベント処理も、適当に書いてしまうと後から何が起こっているか分かりにくくなってしまいます。

保守しやすいコードにするためのコツを紹介します。

あとで自分や他の人が見てもすぐに理解できるように、シンプルで丁寧なコードを意識することがとても大切です。

ブラウザ互換性の確認ポイント

onclickイベントはほとんどのブラウザで動きますが、それでも完全に安心せずに互換性を確認することが必要です。

とくに古いブラウザやモバイルブラウザでは動作が少し違うことがあります。

ブラウザ互換性を確認するときのポイントは次の通りです。

動かす環境によって思わぬ不具合が起きることもあります。

多くの人が安心して使えるように、事前にチェックすることが大切です。

まとめ

onclickイベントは、HTMLとJavaScriptをつなぐとても便利なしくみです。

クリックしたときにすぐに反応してくれるので、動きのあるウェブページを作るために欠かせません。

これまでの内容をまとめると次のようになります。

まずはかんたんなサンプルから試して、onclickのしくみをしっかり覚えましょう。

そして少しずつ自分のページに応用してみてください。