1. JavaScript の概要

JavaScript は、ウェブページをインタラクティブにするための最も重要なプログラミング言語の一つです。以下では、JavaScript の概要について解説します。

1.1 JavaScript とは

JavaScript は、ウェブブラウザ上で実行されるスクリプト言語であり、以下の機能を持っています：

動的コンテンツの作成：ユーザーの操作に応じて、ウェブページの内容やスタイルを動的に変更できます。
ユーザーインターフェイスの操作：ボタンのクリックやフォームの送信など、ユーザーの操作をキャッチして処理することができます。
データ通信：サーバーとの非同期通信（Ajax）を行い、ページ全体を再読み込みすることなくデータを送受信できます。

1.2 JavaScript の歴史

JavaScript は 1995 年に Netscape 社で開発されました。その後、ECMAScript という名称で標準化され、現在も多くのウェブブラウザで広く使用されています。以下に主なバージョンと特徴を示します：

ECMAScript 6 (ES6/ES2015): モダン JavaScript の基礎。let/const、アロー関数、クラス、テンプレートリテラルなどが追加されました。
ECMAScript 2016 (ES7)以降: それ以降も毎年新機能が追加されています。

1.3 JavaScript の利用例

JavaScript の主な利用例をいくつか挙げます：

1.3.1 ウェブページの動的操作

ユーザーがボタンをクリックした際にメッセージを表示する簡単な例を見てみましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript Example</title>
  </head>
  <body>
    <button id="myButton">Click me!</button>
    <p id="message"></p>

    <script>
      document
        .getElementById("myButton")
        .addEventListener("click", function () {
          document.getElementById("message").innerText = "Button was clicked!";
        });
    </script>
  </body>
</html>

1.3.2 非同期通信（Ajax）

サーバーからデータを取得し、ページを再読み込みすることなく表示する例です。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ajax Example</title>
  </head>
  <body>
    <button id="loadDataButton">Load Data</button>
    <div id="data"></div>

    <script>
      document
        .getElementById("loadDataButton")
        .addEventListener("click", function () {
          fetch("https://jsonplaceholder.typicode.com/posts/1")
            .then((response) => response.json())
            .then((data) => {
              document.getElementById("data").innerText = JSON.stringify(data);
            })
            .catch((error) => console.error("Error:", error));
        });
    </script>
  </body>
</html>

1.4 JavaScript の基本特性

1.4.1 インタプリタ言語

JavaScript はインタプリタ言語であり、コードは逐次実行されます。これにより、ウェブブラウザ内で即座に変更を反映させることができます。

1.4.2 クライアントサイド言語

通常、JavaScript はクライアントサイドで実行され、ユーザーのブラウザ上で直接コードが動作します。ただし、Node.js によりサーバーサイドでも使用可能です。

1.4.3 プロトタイプベースオブジェクト指向

JavaScript はプロトタイプベースのオブジェクト指向言語であり、クラスではなく関数とプロトタイプチェーンを使用してオブジェクトを構築します。

1.5 JavaScript の基本的な書き方

ブラウザで最も基本的な JavaScript の実行方法を示します。

1.5.1 HTML 内に直接記述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline JavaScript Example</title>
  </head>
  <body>
    <h1>My First JavaScript</h1>
    <p id="demo">Hello World!</p>

    <script>
      document.getElementById("demo").innerText = "Hello, JavaScript!";
    </script>
  </body>
</html>

1.5.2 外部ファイルとして記述

外部ファイルに JavaScript コードを記述し、HTML から読み込む方法です。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>External JavaScript Example</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>My First JavaScript</h1>
    <p id="demo">Hello World!</p>
  </body>
</html>

// script.js
document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("demo").innerText = "Hello, External JavaScript!";
});

以上が JavaScript の概要となります。この内容を理解していただくことで、次に学ぶ基本的な文法やデータ型などへのスムーズな移行が可能となります。それぞれのトピックで実際のコードを試しながら理解を深めていきましょう。