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

※本サイトにはプロモーション・広告が含まれています。

(最終更新日:2023年6月)

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

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

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

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

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

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

筆者プロフィール

筆者プロフィールアイコン

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

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

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

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

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

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

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

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

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

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

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の理解と実装は、一定の時間と労力を必要とするため、適切な学習戦略が重要です。

途中で挫折しないスキル習得のアプローチ

プログラミングスキルを習得する際の一つのアプローチとして、「少しずつ学ぶ」ことが大切といえます。

なぜなら少しずつ学ぶことで、挫折を避け、継続しやすくなるからです。

以下のように学習を小分けにし、少しずつ進めていきましょう。

  • 基本的なHTMLのタグや構文を理解
  • CSSでスタイリング
  • JavaScriptで動的な機能を追加する

また、具体的なプロジェクトを通じて学ぶことで、理論だけでなく実践的な知識も得られます。

まとめ

当記事では、以下の内容にスポットを当て、解説してきました。

  • HTMLとJavaScriptの基本的な関係
  • HTMLのイベントとJavaScript関数の関連性
  • onclick属性の使い型

Webエンジニアを目指す場合、HTMLとJavaScriptは必ず学ぶべきです。

食わせて、以下のような他技術も習得しましょう。

  • CSSを用いたデザインスキル
  • サーバーサイドの言語(例えばPHPやPython)
  • データベース技術
  • そしてソフトウェア開発のベストプラクティス

当サイトではそれぞれの学習で必要な記事を多数ご用意してますので、ぜひ立ち寄って見てみてください。

タイトルとURLをコピーしました