JavaScriptを「動かす」方法を学ぼう！

前回の記事で、JavaScriptの基本的な「ことば」（文法）を学びました。しかし、覚えた文法をどこに書けば、Webサイトが動くようになるのでしょうか？

今回は、HTMLとCSSで作ったWebサイトに、JavaScriptを組み込んで実際に動かす方法を、簡単な例を交えながら学んでいきましょう。

JavaScriptをHTMLに組み込む方法
実際にコードを書いてみよう
コードの解説
まとめ：JavaScriptでWebサイトは「生き物」になる

JavaScriptをHTMLに組み込む方法

JavaScriptのコードは、HTMLファイルに<script>タグを使って書き込みます。

この<script>タグは、Webサイトのどこにでも書くことができますが、一般的にはページの読み込み速度を上げるために、<body>タグの一番下に書くのがおすすめです。

【理由】 HTMLは上から順番に読み込まれます。もしJavaScriptのコードを<head>タグに書いてしまうと、まだWebページの表示が完了していないうちにJavaScriptが動き始め、うまく機能しないことがあるからです。

実際にコードを書いてみよう

今回は、ボタンをクリックするとメッセージが表示される、とてもシンプルなWebページを作ってみましょう。

以下のHTMLコードを、エディタにコピー＆ペーストして「index.html」という名前で保存してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptを動かす</title>
</head>
<body>

  <h1>JavaScriptを動かそう！</h1>

  <button id="myButton">ここをクリック！</button>

  <p id="message"></p>

  <script>
    // 1. ボタンと表示する場所をHTMLから見つけ出す
    const button = document.getElementById('myButton');
    const message = document.getElementById('message');

    // 2. ボタンがクリックされたら、〇〇を実行する
    button.addEventListener('click', function() {
      // 3. 実行する「〇〇」の中身を書く
      message.textContent = 'ボタンがクリックされました！';
    });
  </script>

</body>
</html>

コードの解説

たったこれだけで、ボタンを押すと文字が表示されるWebサイトが完成します。コードを上から順番に見ていきましょう。

const button = document.getElementById('myButton');
- document.getElementById()は、HTMLの中から指定したidを持つタグを探し出すための命令です。ここでは、id="myButton"を持つボタンを見つけ出しています。
button.addEventListener('click', function() { ... });
- addEventListener()は、HTMLタグに「イベント」（＝何かが起こったこと）を監視させる命令です。
- 'click'は「クリックされた」というイベントを意味します。
- つまり、「buttonがクリックされたら、function() { ... }の中のコードを実行してください」という命令になります。
message.textContent = 'ボタンがクリックされました！';
- textContentは、HTMLタグの中身のテキストを操作するためのものです。
- 'ボタンがクリックされました！'という新しいテキストを、id="message"を持つ<p>タグに代入しています。

まとめ：JavaScriptでWebサイトは「生き物」になる

JavaScriptのコードをHTMLに組み込むことで、Webサイトはただの静止画ではなく、まるで生き物のようにユーザーの操作に反応するようになります。

今回の例はとてもシンプルですが、この**「イベント（起こったこと）を監視し、特定の命令を実行する」**という仕組みが、ほとんどのJavaScriptの基本となっています。

次回は、今回作ったコードを応用して、もっと複雑で面白いWebサイトの動きに挑戦してみましょう。お楽しみに！