この記事にたどり着く前に、おそらくGoogleのSERP（検索エンジン結果ページ）のボタンをクリックしたはずです。新しいページを閲覧する際やフォームを送信する際にも、さらに多くのボタンをクリックする機会があるでしょう。リンクをクリックすると、同じウェブサイトの別のページや全く別のウェブサイトに移動します。一方、JavaScriptは開発者がボタンを操作して特定の機能をトリガーするのに役立ちます。
このステップバイステップガイドでは、プログラミング初心者がJavaScriptを用いてページ上にシンプルなボタンを作成する方法を学べます。ブラウザ（DOM）上でJavaScriptを介したカスタムボタン機構を構築する方法を、わかりやすく解説します。基本的なJavaScript形式で実行されるシンプルな手順は、誰でも容易に習得可能です。
ステップ1: 必要なファイルとリンクの作成
JavaScriptにおいてボタンは、クリック時にアクションをトリガーする要素です。HTMLタグでボタンを作成し、JavaScriptでクリックなどのユーザー操作にイベントリスナーで応答できます。ボタンは動的にスタイル設定や有効化/無効化も可能で、ウェブページ上のユーザーインタラクションを強化する多機能ツールとなります。
まず、すべてのファイルを作成しリンクを設定します。プロジェクトの基本的な枠組みとなるHTMLドキュメントから始めることを検討してください。通常のHTMLドキュメントと同様に、DOCTYPEをHTMLに設定し、言語を英語に指定し、head/bodyタグを作成します。headセクションでCSSドキュメント（style.css）をリンクし、bodyセクション内にid=「button」属性を持ち、「クリックして！」のようなテキストを含む<button>タグを作成します。
最後に、bodyセクションの終了直前にJavaScriptファイル（script.js）をリンクすれば、HTMLドキュメントの使用準備が整います。
これでJavaScriptコードの作成準備が整いました。ボタンを変数に保存します。例：const theButton = document.getElementById(「button」);
一意のIDがある場合はgetElementById()を使用します。単一ボタンへのアクセスで最も高速かつ一般的な方法です。それ以外の場合はquerySelector()メソッドでドキュメント内のあらゆる要素を参照できます。
ステップ2: イベントリスナーの追加
次にaddEventListener()関数でイベントリスナーを追加します。この関数には2つの引数が必要です：イベント自体と、そのイベント発生時の処理内容です。ボタンクリック時にテキストを紫色で下線付きに変更するとします。
関数は次のようになります：
上記のコードでボタンの機能を指定したら、作業は完了です。ブラウザでクリックすると、テキストが紫色になり下線が引かれます。ウェブページと同じ動作です。
ステップ3: カスタマイズ
さらに機能を追加したい場合は？独自の期待を強調する創造的な方法でボタンをカスタマイズしてください。クリック後にボタンが変化し、同時にテキスト付きのアラートを表示させたい場合は？これを実現する方法はいくつかあります。
さらに機能を追加したい場合は？必要に応じて、創造的な方法でボタンをカスタマイズしてください。
例えば、2つの状態を切り替えるボタンを作成してみましょう：
- 初期状態：テキスト「クリックして！」（状態：未クリック）
- 初回クリック時：肯定的なアラートを表示し、テキストを「もうクリックしないで！」に変更
- 再度クリック時：面白い「お叱り」アラートを表示し、テキストを「クリックして！」に戻す
これでシンプルな切り替え効果が実現します。完全なJavaScriptコードは以下の通りです：
とはいえ、この方法では個人のスタイルや機能要件に合ったボタンを一から作成できる点に留意してください。例えばフォームの「送信」ボタンのようなシンプルなボタン機構を実装したい場合、<div />タグではなく<button />タグの使用を検討しましょう。
まとめ
上記ガイドが示す通り、JavaScriptを用いたボタンの作成は標準的なWeb開発手法で非常に簡潔に行えます。HTMLでボタンを定義し、JavaScriptでインタラクティブ性を追加するだけでボタンは完成します。また、主要なブラウザすべてで動作するモダンなボタンを作成する際には、コア部分にイベントリスナーを導入する必要があります。
この方法はシンプルで、わずかなコード行数で実現できます。もちろん、ご自身の期待に沿うより複雑な機能を実現するために、コードを自由に拡張してください。
