これから始めるJavaScript講座 -WebサイトでのJavaScriptの役割について-

この記事では、これからJavaScriptを学びたいと思っている方に向けて、JavaScriptの基礎から実践的な使い方までをわかりやすく解説します。

「JavaScriptって何？」という初心者の方も、「なんとなく知ってるけど、実際にどう使えばいいかわからない」という方も安心してください！この記事を読むことで、JavaScriptがどのようにWebサイトに役立つかを理解し、すぐに使える実践的な知識が身につきます。

JavaScriptって何？

JavaScriptは、Webサイトを動的でインタラクティブにするためのプログラミング言語です。例えば、ボタンをクリックすると画面が切り替わるアニメーションや、リアルタイムで更新されるニュースフィードなど、私たちが普段使っているWebサイトにはJavaScriptがたくさん使われています。

他の言語と比べると、JavaScriptは次のような特徴があります：

ブラウザで動く：特別なソフトをインストールしなくても、ブラウザさえあれば実行できます。
HTMLやCSSと組み合わせる：HTMLはサイトの構造を作り、CSSは見た目を整え、JavaScriptは動きを加えます。
初心者でも始めやすい：基本的なコードはシンプルで、結果がすぐに確認できます。

WebサイトでのJavaScriptの役割

JavaScriptが具体的にどんな場面で使われているかをいくつか例を挙げてみましょう。

1. ユーザーの操作に応じた動き

JavaScriptを使うことで、ユーザーがボタンをクリックしたり、入力フォームに文字を入力したりしたときに動きをつけることができます。

例：ボタンをクリックして色を変える

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボタンで色を変える</title>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <button id="changeColorBtn">色を変える</button>

  <script>
    const box = document.getElementById('box');
    const button = document.getElementById('changeColorBtn');

    button.addEventListener('click', () => {
      box.style.backgroundColor = box.style.backgroundColor === 'blue' ? 'red' : 'blue';
    });
  </script>
</body>
</html>

このコードでは、ボタンをクリックするたびに四角いボックスの色が変わります。シンプルですが、JavaScriptの基本的な操作を学ぶ良い練習になります。

2. フォームのバリデーション

ユーザーが入力した内容をチェックして、エラーがあれば教えてあげるのもJavaScriptの役割です。

例：メールアドレスの確認

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォームのバリデーション</title>
</head>
<body>
  <form id="emailForm">
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>
    <button type="submit">送信</button>
    <p id="errorMessage" style="color: red; display: none;">正しいメールアドレスを入力してください。</p>
  </form>

  <script>
    const form = document.getElementById('emailForm');
    const emailInput = document.getElementById('email');
    const errorMessage = document.getElementById('errorMessage');

    form.addEventListener('submit', (event) => {
      if (!emailInput.value.includes('@')) {
        event.preventDefault();
        errorMessage.style.display = 'block';
      } else {
        errorMessage.style.display = 'none';
      }
    });
  </script>
</body>
</html>

このコードでは、「@」が含まれていないメールアドレスが入力された場合、エラーメッセージを表示します。

3. データの非同期通信（Ajax）

ページ全体をリロードせずにサーバーと通信できるのもJavaScriptのおかげです。

例：ボタンをクリックしてデータを取得

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>非同期通信の例</title>
</head>
<body>
  <button id="fetchDataBtn">データを取得</button>
  <div id="dataDisplay"></div>

  <script>
    const button = document.getElementById('fetchDataBtn');
    const display = document.getElementById('dataDisplay');

    button.addEventListener('click', async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const data = await response.json();
        display.innerHTML = `<h3>${data.title}</h3><p>${data.body}</p>`;
      } catch (error) {
        display.textContent = 'データの取得に失敗しました。';
      }
    });
  </script>
</body>
</html>

ボタンを押すとサーバーからデータを取得し、その内容を画面に表示します。非同期通信の基本的な例です。