JavaScript初心者向け講座

開発環境のセットアップ

1. フォルダの作成

デスクトップに「js-dom-practice」という名前の新しいフォルダを作成します。

2. VSCodeでフォルダを開く

VSCodeを起動し、[ファイル] → [フォルダを開く] から作成したフォルダを選択します。

3. Live Serverの準備

VSCodeの拡張機能「Live Server」をインストールします。これにより、HTMLファイルの変更がブラウザに自動反映されます。

歴史と必要性

DOMは1998年にW3Cによって標準化された重要な仕様です。それまでのWebページは静的で、一度表示されたコンテンツを変更することができませんでした。

なぜDOMが必要なのでしょうか？例えば、オンラインショッピングを考えてみましょう。商品を買い物かごに入れたとき、ページ全体を再読み込みせずに買い物かごの中身を更新したい。また、入力フォームでエラーがあった場合、即座にユーザーに通知したい。このような動的な操作を実現するために、DOMは不可欠な存在となっています。

1. DOM操作の基本

基本概念

DOMを使うと、JavaScriptでHTML要素を取得、変更、追加、削除できます。最も基本的な操作は、要素の取得と内容の変更です。

基本的な書き方（dom-basic.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOM操作の基本</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>DOM操作の基本例</h1>
    <p id="target">この文章の内容を変更します</p>
    <button onclick="changeText()">テキストを変更</button>
    <button onclick="toggleHighlight()">ハイライト切替</button>

    <script>
        function changeText() {
            const element = document.getElementById('target');
            element.textContent = '文章が変更されました！';
        }

        function toggleHighlight() {
            const element = document.getElementById('target');
            element.classList.toggle('highlight');
        }
    </script>
</body>
</html>

実行手順：

作成したフォルダ内に「dom-basic.html」ファイルを作成します
上記のコードをコピーしてファイルに貼り付けます
ファイルを保存します（Ctrl + S または Command + S）
ファイルを右クリックして「Live Serverで開く」を選択します

演習1: TODOリストの作成

以下の機能を持つシンプルなTODOリストを作成してください：

新しいタスクを追加できる
タスクをクリックすると完了状態を切り替えられる
タスクを削除できる

テンプレート（todo-list.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TODOリスト</title>
    <style>
        .completed {
            text-decoration: line-through;
            color: #888;
        }
        .task {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 5px;
            margin: 5px 0;
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <h1>TODOリスト</h1>
    <div>
        <input type="text" id="taskInput" placeholder="新しいタスク">
        <button onclick="addTask()">追加</button>
    </div>
    <div id="taskList"></div>

    <script>
        function addTask() {
            // ここにコードを書いてください
        }

        function toggleTask(element) {
            // ここにコードを書いてください
        }

        function deleteTask(element) {
            // ここにコードを書いてください
        }
    </script>
</body>
</html>

解答例

function addTask() {
    const input = document.getElementById('taskInput');
    const taskList = document.getElementById('taskList');
    
    if (input.value.trim() !== '') {
        const taskDiv = document.createElement('div');
        taskDiv.className = 'task';
        
        const taskText = document.createElement('span');
        taskText.textContent = input.value;
        taskText.onclick = function() {
            toggleTask(this);
        };
        
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '削除';
        deleteButton.onclick = function() {
            deleteTask(this.parentElement);
        };
        
        taskDiv.appendChild(taskText);
        taskDiv.appendChild(deleteButton);
        taskList.appendChild(taskDiv);
        
        input.value = '';
    }
}

function toggleTask(element) {
    element.classList.toggle('completed');
}

function deleteTask(element) {
    element.remove();
}

この解答では、createElement()を使って新しい要素を作成し、 appendChild()で要素を追加しています。また、classList.toggle()でクラスの付け外しを、 remove()で要素の削除を行っています。

2. イベントリスナー

基本概念

イベントリスナーは、特定のイベント（クリックやキー入力など）が発生したときに実行される関数です。addEventListener()を使って設定します。

基本的な書き方（event-listener.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベントリスナー</title>
    <style>
        #colorBox {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>イベントリスナーの例</h1>
    <div id="colorBox"></div>
    <p id="coordinates">マウス座標: </p>

    <script>
        const box = document.getElementById('colorBox');
        const coords = document.getElementById('coordinates');

        // クリックでボックスの色を変更
        box.addEventListener('click', function() {
            const colors = ['red', 'blue', 'green', 'yellow', 'purple'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            this.style.backgroundColor = randomColor;
        });

        // マウスの動きを検知
        document.addEventListener('mousemove', function(event) {
            coords.textContent = `マウス座標: X: ${event.clientX}, Y: ${event.clientY}`;
        });
    </script>
</body>
</html>

演習2: シンプルな描画アプリ

マウスの動きを検知して線を描画する簡単なお絵かきアプリを作成してください。

テンプレート（drawing-app.html）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お絵かきアプリ</title>
    <style>
        #canvas {
            border: 1px solid #000;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>お絵かきアプリ</h1>
    <canvas id="canvas" width="400" height="400"></canvas>
    <div>
        <button onclick="clearCanvas()">クリア</button>
        <input type="color" id="colorPicker" value="#000000">
    </div>

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let isDrawing = false;

        function startDrawing(e) {
            // ここにコードを書いてください
        }

        function draw(e) {
            // ここにコードを書いてください
        }

        function stopDrawing() {
            // ここにコードを書いてください
        }

        function clearCanvas() {
            // ここにコードを書いてください
        }

        // イベントリスナーを設定してください
    </script>
</body>
</html>

解答例

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;

function startDrawing(e) {
    isDrawing = true;
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function draw(e) {
    if (!isDrawing) return;
    
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.strokeStyle = document.getElementById('colorPicker').value;
    ctx.lineWidth = 2;
    ctx.lineCap = 'round';
    ctx.stroke();
    
    [lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
    isDrawing = false;
}

function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

この解答では、canvas要素を使って描画を行っています。 mousedownイベントで描画開始、mousemoveイベントで線を描画、 mouseupイベントで描画終了を制御しています。また、カラーピッカーで線の色を変更できます。

用語解説

DOM: Document Object Model（文書オブジェクトモデル）の略。HTMLをJavaScriptで操作できるようにツリー構造で表現したものです。
要素: HTMLの各部品（タグで囲まれた部分）のこと。例：<div>, <p>, <button>など。
イベント: ユーザーの操作（クリックなど）や、ページの状態変化を検知する仕組み。
イベントリスナー: イベントが発生したときに実行される関数。addEventListener()で設定します。
セレクター: HTML要素を指定するための記法。IDやクラス、タグ名などで要素を特定します。