ゼロプロ～Season2【Webアプリケーションの基礎編：2-2-2】JavaScriptの基礎：動的なWebページ作成

Webアプリケーションをより魅力的でインタラクティブにするためには、JavaScriptの基礎を理解することが重要です。本記事では、JavaScriptを使った動的なWebページの作成方法をわかりやすく解説します。

JavaScriptとは？

JavaScriptは、Webブラウザ上で動作するプログラミング言語です。主に以下のような役割を担います。

主な特徴

動的な動作：ボタンをクリックした際の反応やアニメーションの実装。
データ操作：フォームデータの処理やサーバーとのデータ通信。
DOM操作：HTMLやCSSの内容をリアルタイムで変更。

JavaScriptをHTMLで使う方法

HTMLファイル内でJavaScriptを使うには、以下の方法があります。

方法1: <script>タグを使用して直接記述

HTML内にJavaScriptコードを直接書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの基礎</title>
</head>
<body>
    <h1>JavaScriptで動的なWebページ</h1>
    <button onclick="alert('ボタンがクリックされました！')">クリック</button>
</body>
</html>

方法2: 外部ファイルとしてJavaScriptを読み込む

JavaScriptコードを外部ファイルに保存し、HTMLから読み込みます。この方法は、コードを管理しやすくするために推奨されます。

外部ファイルの例

HTMLファイル:

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの基礎</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>JavaScriptで動的なWebページ</h1>
    <button id="changeTextButton">クリックして変更</button>
    <p id="message">ここにメッセージが表示されます。</p>
</body>
</html>

外部JavaScriptファイル (script.js):

// ボタン要素を取得
let button = document.getElementById("changeTextButton");

// ボタンがクリックされたときの処理
button.addEventListener("click", function() {
    let message = document.getElementById("message");
    message.textContent = "ボタンがクリックされました！";
    message.style.color = "green";
});

方法3: <script>タグをheadまたはbody内に配置

<head>内に記述: ページが読み込まれる前にスクリプトを実行します。
<body>の最後に記述: ページが完全に読み込まれた後にスクリプトを実行します。ページ表示速度を優先する場合はこの方法がおすすめです。

例:

<body>
    <h1>JavaScriptで動的なWebページ</h1>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            console.log("ページが完全に読み込まれました！");
        });
    </script>
</body>

JavaScriptの基本構文

以下は、JavaScriptの基本的な構文の例です。

変数の宣言

JavaScriptでは、letやconstを使って変数を宣言します。

let message = "こんにちは、JavaScript!";
console.log(message);

条件分岐

条件によって処理を切り替えます。

let age = 20;
if (age >= 18) {
    console.log("成人です。");
} else {
    console.log("未成年です。");
}

ループ

繰り返し処理を実行する場合に使用します。

for (let i = 0; i < 5; i++) {
    console.log(i);
}

DOM操作の基本

DOM（Document Object Model）は、HTMLやCSSをプログラムで操作するための仕組みです。

DOM要素の取得

JavaScriptを使ってHTML要素を取得します。

let heading = document.querySelector("h1");
console.log(heading.textContent);

イベントリスナーの追加

ユーザーの操作（クリックなど）に応じて動作を定義します。

document.querySelector("button").addEventListener("click", function() {
    alert("ボタンがクリックされました！");
});

DOM要素の変更

取得した要素の内容やスタイルを変更します。

let paragraph = document.querySelector("p");
paragraph.textContent = "このテキストはJavaScriptで変更されました。";
paragraph.style.color = "blue";

簡単なWebページの例

以下は、JavaScriptを使って動的な動作を実装した簡単な例です。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの基礎</title>
</head>
<body>
    <h1>JavaScriptで動的なWebページ</h1>
    <p>この段落の内容が変更されます。</p>
    <button>クリックして変更</button>
    <script src="script.js"></script>
</body>
</html>

JavaScriptコード

// ボタン要素を取得
let button = document.querySelector("button");

// ボタンがクリックされたときの処理を定義
button.addEventListener("click", function() {
    let paragraph = document.querySelector("p");
    paragraph.textContent = "この内容はボタンをクリックして変更されました。";
    paragraph.style.color = "green";
});

出力イメージ

ページを表示すると、段落とボタンが表示されます。
ボタンをクリックすると、段落の内容と色が変わります。

JavaScript学習のポイント

基本構文を理解する：変数、条件分岐、ループなど。
DOM操作を練習する：要素の取得や変更、イベントリスナーの追加。
小さなプロジェクトを作成する：簡単なタスクをこなして慣れていく。

まとめ

JavaScriptは、動的でインタラクティブなWebページを作成するための重要なツールです。基本を押さえながら実際に手を動かして学習を進めましょう。

次回は「クライアントサイドとサーバーサイドの違い」について解説します。お楽しみに！