HTMLのonclick属性を使ってクリック時に処理をする方法

今回はHTMLのonclick属性について解説をしていきます!

onclick属性では要素がクリックされたかどうかをイベントとして判断することが出来ます。

ただこのonclick属性について調べてみると、JavaScriptとも関係していて混乱する初心者の方もいるかもしれません。

この記事では、

  • onclick属性とは
  • HTMLとJavaScriptの関係
  • onClick属性の使い方と使われる場所

について解説をしていきます。

具体的なサンプルや役に立つ記事なども紹介していくのでぜひご覧ください!

目次

onclick属性とは

まずはonclick属性とは何かについて知っておきましょう。

onclick属性では、要素をクリックしたときに、どのような処理を行うかを設定することができます。

処理という言葉はHTMLだけでは聞かないなと思ったかもしれません。

このonclick属性はより複雑な処理をすることができるJavaScriptと一緒に使われることが多いです。

このonclick属性が設定された要素をクリックすることで、onclick属性に指定したJavaScriptの関数などが実行されるようになります。

HTMLとJavaScriptの関係

ここで一旦、HTMLとJavaScriptの関係についておさらいしておきましょう。

基本的にはHTMLのみでWebサイト上のコンテンツは完成させることが出来ます。

そのコンテンツをアニメーションで動かしたり、ユーザーからの入力を取得したりするのがJavaScriptになります。

その中でユーザーからのクリックを取得するために使われるのがonclick属性になります。

ちなみに、HTMLで作られたコンテンツに装飾を行う目的で使われるのが、CSSになります。

JavaScriptについての概要についてはこちらの記事で解説しているので、ぜひご覧ください!

JavaScriptとは?初心者向けに特徴や学習方法をわかりやすく解説
更新日:2024年9月24日

onclick属性の使い方

それでは簡単にonclick属性がどのように使われるのかを見てみましょう。

今回はaタグでリンクのボタンを作り、そこにonclick属性を設定してみます。

こちらのコードをご覧ください。

<html>
    <script>
        function js_alert() {
            alert("Pushed!");
        }
    </script>
    <body>
        <a href="#" onclick="js_alert()">ボタン</a>
    </body>
</html>

実行結果

クリック後

このコードでは、aタグで作ったリンクにonclick属性を追加しました。

onclick属性には、js_alert()関数が設定されています。

このjs_alert()関数は、scriptタグで囲った部分で定義されています。

もちろん、アラートを出す以外にも、関数で定義されるものであればどのようなものでも指定することが出来ます。

JavScriptで動くアニメーションなどでクリックされたかどうかを判定する場合も、今回と同じようにonclick属性を使います。

onclick属性が使われる場所

今までで一通り、onclick属性が使われる場所について解説をしてきました。

このonclick属性がどのようなところで使われるかイメージがつきにくい方もいるかもしれません。

このonclick属性は先程解説したように、クリックで実行されるようなアニメーションに使われる他にも、フォームでエンターキーを押したときにも実行されます。

Googleなどの検索画面で検索を行う場合、マウスで検索ボタンをクリックする他にエンターキーで検索が始まると思うのですが、あの動きはonclickで再現することが出来ます。

高条件の案件獲得にはHTML以外のスキルも必要

ウェブサイト制作をするには今回解説したHTMLは学習必須ですが、それだけでは仕事の幅は狭く、何ページも制作しなければならないなどと量をこなす仕事しかできなくなってしまいます。

同時にCSSやJavaScript、WordPressなどの技術を身につけることで、単価の高い仕事や、案件数も多くなるためおすすめです。

HTMLのみとウェブサイト制作では仕事の量が全く違う

HTML/CSSのみとウェブサイト制作全般では案件数は約10倍ほど変わります。仕事を取り続けられるエンジニアになるために様々な技術を身につけていきましょう。

クラウドワークスでも以下のように複数スキルの習得をすすめています。

HTML・CSSコーディングは短納期で大量のページを作成する案件も多く見受けられます。クライアントの要求に応えるため、コスト(1ページあたり単価)・スピード・クオリティの優先度を見極めながら進めるバランス感覚も求められる仕事です。複雑な案件ではHTML/CSSだけに留まらず、JavaScript(AJAX)を使った機能実装、WordPressをはじめとするCMSテンプレートの開発を手がけるケースもあります。このような場合にはプログラミング言語の知識も必要となるでしょう。
引用:CrowdWorks

ただ、なかにはどの言語を学べばいいのかわからない方もいますよね。そんな方は、弊社が提供している「プログラミング学習プラン診断」をご活用ください。

診断にかかる時間は1分ほど。4つの質問に答えるだけで、次のようなあなたにあうプログラミング言語やおすすめの学習プランを診断してもらえます。

どのプログラミング言語を選べばいいのかわからない方は、ぜひ一度お試しください。

自分にあうプログラミング言語を診断してみる

挫折なくプログラミングスキルの習得を目指すなら

先ほど、HTMLだけでなく複数のプログラミング言語を学ぶ重要性を解説しましたが、なかには

他の言語を学ぶなんてできるかな…
途中で挫折したらどうしよう…

と不安な方もいますよね。

実のところ、JavaScriptといったプログラミング言語の学習途中で挫折する独学者は多くいます。事実、弊社の調査では

  • 独学では不安がある
  • 効率よく学べそう
  • 確実にスキルを身につけられると思ったから

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

プログラミング学習における挫折率の調査
プログラミング学習者の87.5%が挫折を経験したことがある
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

またこうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。

61%の人がプログラミングの勉強を始めるならスクールが良いと回答
確実にスキルを身につけられそうという理由でプログラミングスクールを選ぶ人が多い

調査概要:プログラミングに興味がある方の意識調査
調査期間:2021/11/19~2021/12/3
対象者:プログラミング学習を検討している10代~50代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。

上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できる実践的なスキルが身につかなければ、結局後悔することになります。

そこで、おすすめしたいのが「SAMURAI ENGINEER(侍エンジニア)」です。

SAMURAI ENGINEER(侍エンジニア)
SAMURAI ENGINEER(侍エンジニア)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
SAMURAI ENGINEER(侍エンジニア)
700x700_02
700x700_03
700x700_04
700x700_05
700x700_06
700x700_07
700x700_08
previous arrow
next arrow
料金月分割4.098円~
実績・累計指導実績4万5,000名以上
・受講生の学習完了率98%
・受講生の転職成功率99%
・転職成功後の平均年収65万円UP
・転職成功後の離職率3%

侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。

先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、プログラミングスキルを習得するのは非常に難易度が高いといえます。

しかし、侍エンジニアでは

  • 現役エンジニア講師によるマンツーマンレッスン
  • 現役エンジニアに質問できるオンラインでのQ&Aサービス

といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%「転職成功率99%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。

また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもITエンジニアへの転職や副業での収入獲得に必要なスキルだけを効率的に習得可能です。

最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。

なお、侍エンジニアでは最大80%OFFで受講可能な給付金コースを提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1:転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してITエンジニアへの転職や副業での収入獲得などの目的が実現できますよ。

公式サイトで詳細を見る

まとめ

この記事ではonclick属性の基本的な部分について、HTML寄りの解説を行ってきました。

基本的な部分については分かっていただけだでしょうか?

onclick属性を使いこなしていくためにはJavaScriptについての知識も欠かせません。

ぜひ紹介した記事で、JavaScriptについても学んでみてください!

この記事を書いた人

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。

目次