【初心者向け】HTMLでonclickを使う方法から実例まで

（最終更新日：2023年6月）

✔当記事は以下の疑問を抱く方へ特におすすめ

「HTMLのonclick属性って何をするものなのか？」
「HTMLのonclick属性の正しい使い方を知りたい」
「HTMLでのonclick属性の具体的な利用例を見てみたい」

✔当記事でご紹介する内容

HTMLのonclick属性の基本的な概念
onclick属性の使い方とその応用方法
onclick属性を用いたHTMLの具体的な例

当記事では、HTMLのonclick属性の基本的な使用方法から、さまざまな応用方法まで、具体的な例を用いて丁寧に解説していきます。

最後までご覧いただき、onclick属性を活用したHTML作成の技術を習得しましょう。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間17万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/04/28 14:21:07時点 Amazon調べ-詳細)

HTMLとJavaScript：基礎から理解

こちらでは、ウェブ開発に必須の技術である「HTMLとJavaScript」についてお伝えしていきます。

これらの理解はウェブ開発の第一歩とも言えます。

HTMLとJavaScriptの概要
HTMLとJavaScriptの協働

HTMLとJavaScriptの概要

HTMLはウェブページの骨組みを作るマークアップ言語です。

ウェブページ上に以下の情報を表示させます。

テキスト
リンク
画像

一方JavaScriptは、ウェブページに動的な要素を追加するプログラミング言語です。

ユーザーの操作に反応したり、情報を操作したりが可能になります。

HTMLとJavaScriptの協働

HTMLとJavaScriptは一緒に使われることでウェブページをより使いやすく、魅力的にします。

HTMLで定義された内容や構造を、JavaScriptにより動的な振る舞うよう設定できるからです。

例えばボタンをクリックした時の動作や、情報の動的な表示などが可能になります。

// ボタンクリック時の処理
document.getElementById("myButton").addEventListener("click", function() {
  // テキストを表示する
  document.getElementById("myText").textContent = "Button clicked!";
});

イベントとは：基礎から理解

こちらでは、HTMLでonClickを使う際に必要な「イベント」について詳しく見ていきましょう。

イベントとその取り扱いは、ウェブページを動的に制御するために重要です。

イベントの概要
ユーザーによるイベントとJavaScriptでの取り扱い

イベントの概要

イベントは、ウェブページ上で起こる特定の行動を指します。

例を挙げると、以下のようなユーザーの行動です。

リンクをクリックする
フォームを送信する
キーボードを操作する

イベントはブラウザによって検出可能です。

検出したイベントをJavaScriptを通じて、コードと連動させるのです。

ユーザーによるイベントとJavaScriptでの取り扱い

JavaScriptは、ユーザーによるイベントを「捕捉」して、特定のアクションをトリガーできます。

「トリガー」とは、関数などを実行すること。

たとえばユーザーがボタンをクリックしたときにメッセージを表示したり、特定のアニメーションを起動したりできます。

これらはすべて「イベントリスナー」というJavaScriptの機能を使って実装されます。

// ボタンクリック時の処理
document.getElementById("myButton").addEventListener("click", function() {
  // メッセージを表示する
  document.getElementById("message").textContent = "Button clicked!";
});

HTMLのonclick属性の紹介

ここでは、「onclick属性」について詳しく見ていきましょう。

onclick属性は、ユーザーが要素をクリックしたとき、特定のJavaScriptのコードを実行するために使用されます。

onclick属性の定義
onclick属性の使用例
onclick属性でアローファンクションの使用例
HTML内でのonclick属性の位置

onclick属性の定義

onclickはHTML要素の属性で、その要素がクリックされた時に実行するJavaScriptのコードを指定します。

この属性の値としては、実行したいJavaScriptのコードを直接書くことができます。

onclick属性の使用例

例えば、ユーザーがボタンをクリックした時にアラートメッセージを表示するには、以下のとおり。

<button onclick="alert('クリックしました！')">クリックしてみて！</button>

この例では、ボタンがクリックされると、「クリックしました！」というアラートメッセージが表示されます。

onclick属性でアローファンクションの使用例

onclick属性内では、アローファンクションも使えます。

こちらが例です。

<button onclick="() => { 
  const message = 'クリックしました！';
  alert(message);
  }">クリックしてみて！</button>

HTML内でのonclick属性の位置

onclick属性は、JavaScriptを実行したいHTML要素に直接配置します。

一般的にはボタンやリンクなど、ユーザーがクリックする可能性のある要素に対して使用されますが、任意の要素に対して使用することが可能です。

<div onclick="myFunction()">Click me</div>

<script>
  function myFunction() {
    // divがクリックされたときの処理
    alert("Div clicked!");
  }
</script>

onclick属性の詳細な使い方

onclick属性の詳細な使い方を見ていきましょう。

ここでの知識は、より複雑なイベントハンドラを書くための基礎となります。

複数の関数を指定する方法
引数の渡し方とthisの利用
location.hrefを使ったリンク操作
returnを使ったイベント中断

複数の関数を指定する方法

onclick属性を使って、ひとつのイベントで複数の関数を実行可能です。

この場合に関数は、セミコロン (;) を使って区切りましょう。

以下にその例を示します。

<button onclick="func1(); func2();">クリックする</button>

上記の例では、ボタンをクリックするとfunc1()とfunc2()という2つの関数が順に実行されます。

引数の渡し方とthisの利用

onclick属性内から関数に、引数を渡すことも可能です。

thisキーワードを使い、現在の要素（この場合、onclick属性を持つ要素）への参照を関数に渡せます。

以下にその例を示します。

<button onclick="myFunction(this, 'Hello')">クリックする</button>

上記の例では、ボタンをクリックするとmyFunction関数が実行され、その関数には2つの引数が渡されます。

ボタン自体（this）
文字列’Hello’

location.hrefを使ったリンク操作

onclick属性を使って、クリック時に特定のURLに遷移も可能です。

これはlocation.hrefプロパティを利用して実現します。

以下にその例を示します。

<button onclick="location.href='https://www.example.com'">クリックする</button>

上記の例では、ボタンをクリックすると指定されたURL（この場合、https://www.example.com）に遷移します。

returnを使ったイベント中断

returnを使って、イベントを中断も可能。

特定の条件下で、イベントを中断したい場合に使えます。

以下にその例です。

<button onclick="if(!confirm('本当によろしいですか？')) return;">クリックする</button>

上記の例では、ボタンをクリックするとまず確認ダイアログが表示されます。

もしユーザーがキャンセルを選んだ場合、return文が実行されて後続の処理が中断されます。

HTMLとJavaScriptを用いたWeb開発

こちらでは、HTMLとJavaScriptを用いたWeb開発についてお伝えします。

HTMLだけのスキルとウェブサイト制作
途中で挫折しないスキル習得のアプローチ

HTMLだけのスキルとウェブサイト制作

ウェブ開発において、JavaScriptの知識は不可欠です。

なぜならJavaScriptは、動的な機能を追加したり、ユーザーエクスペリエンスを向上させたりできるから。

スライドショー
フォームのバリデーション
インタラクティブな地図

こちらはフォームバリデーションの例です。

<!DOCTYPE html>
<html>
<head>
  <title>フォームのバリデーション</title>
</head>
<body>
  <h1>お問い合わせフォーム</h1>
  <form id="contactForm" onsubmit="validateForm(event)">
    <label for="name">お名前:</label>
    <input type="text" id="name" name="name" required><br>

    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required><br>

    <label for="message">メッセージ:</label>
    <textarea id="message" name="message" required></textarea><br>

    <button type="submit">送信</button>
  </form>

  <script>
    function validateForm(event) {
      // フォームのバリデーションを実行する関数

      // フォームの入力値を取得
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;
      var message = document.getElementById("message").value;

      // 入力値のバリデーション
      if (name === "") {
        alert("お名前を入力してください。");
        event.preventDefault(); // 送信をキャンセル
        return;
      }

      if (email === "") {
        alert("メールアドレスを入力してください。");
        event.preventDefault(); // 送信をキャンセル
        return;
      }

      if (message === "") {
        alert("メッセージを入力してください。");
        event.preventDefault(); // 送信をキャンセル
        return;
      }

      // バリデーションが成功した場合は、フォームの送信を続行
      alert("送信しました！");
    }
  </script>
</body>
</html>

ただしJavaScriptの理解と実装は、一定の時間と労力を必要とするため、適切な学習戦略が重要です。