JavaScriptでHTMLを動的に書き換える完全ガイド

はじめに (対象読者・この記事でわかること)

この記事は、Web開発を始めたばかりの方、JavaScriptの基本的な文法は理解しているが、実際のWebページに動的な機能を実装した経験がない方、HTML要素を動的に操作したいと考えている方を対象としています。

この記事を読むことで、JavaScriptを使ってHTML要素を動的に書き換える方法が理解できます。具体的には、DOM操作の基本から、特定の要素の取得、内容の書き換え、新しい要素の追加、イベント処理による動的な更新までの一連の流れを習得できます。また、実践的な例を通して、実際のWeb開発で役立つテクニックを学ぶことができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - JavaScriptの基本的な文法（変数、関数、条件分岐、ループなど）

DOMとは？なぜHTMLを動的に書き換える必要があるのか？

Web開発において、ユーザーとのインタラクションに応じてWebページの内容を動的に変更することは非常に重要です。例えば、ユーザーがボタンをクリックした際に表示される内容を変更したり、フォームに入力された内容に基づいてページの一部を更新したりする場合があります。

このような動的な操作を実現するための技術が「DOM操作」です。DOM（Document Object Model）は、HTMLドキュメントをプログラムから操作できるようにするためのAPIです。DOMはHTMLドキュメントをツリー構造として表現しており、JavaScriptからこのツリー構造にアクセスして要素を追加、削除、変更することができます。

DOM操作には主に以下の方法があります： 1. 要素の取得：変更したいHTML要素を特定して取得 2. 内容の書き換え：取得した要素の内容を変更 3. スタイルの変更：要素の見た目を動的に変更 4. イベント処理：ユーザーの操作に応じて処理を実行

これらの操作を組み合わせることで、ユーザー体験を向上させる動的なWebページを構築できます。

JavaScriptでHTMLを書き換える具体的な方法

ステップ1：HTML要素の取得

まず、操作対象となるHTML要素を取得する必要があります。JavaScriptには要素を取得するための複数のメソッドが用意されています。

最も基本的な方法はgetElementByIdです。これはHTML要素のid属性を指定して要素を取得する方法です。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テストページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p id="message">これはメッセージです。</p>
    <button id="changeButton">クリックしてください</button>

    <script>
        // id="message"の要素を取得
        const messageElement = document.getElementById('message');
        console.log(messageElement); // <p id="message">これはメッセージです。</p>
    </script>
</body>
</html>

次に、querySelectorメソッドを使用する方法です。これはCSSセレクタを使って要素を取得する方法で、より柔軟な指定が可能です。

Javascript

// クラス名で要素を取得
const elementsByClass = document.querySelector('.className');

// 属性で要素を取得
const elementByAttribute = document.querySelector('[data-attribute="value"]');

// 複数の要素を取得（最初の要素のみ）
const firstElement = document.querySelector('div p');

// 複数の要素をすべて取得
const allElements = document.querySelectorAll('div p');

getElementsByClassName、getElementsByTagNameなどのメソッドもありますが、querySelectorとquerySelectorAllが現代的で推奨される方法です。

ステップ2：要素の内容を書き換える

要素を取得したら、その内容を書き換えることができます。主に以下のプロパティを使用します。

innerHTMLプロパティ

innerHTMLプロパティは、要素のHTMLコンテンツを取得または設定します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テストページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <p id="message">これはメッセージです。</p>
    <button id="changeButton">クリックしてください</button>

    <script>
        // 要素を取得
        const messageElement = document.getElementById('message');

        // テキストを書き換え
        messageElement.innerHTML = '新しいメッセージです。';

        // HTMLを書き換え
        messageElement.innerHTML = '<strong>重要なメッセージ</strong>です。';
    </script>
</body>
</html>

innerHTMLはHTMLタグを含むコンテンツ全体を書き換えるため、複雑なHTML構造を一度に変更する場合に便利です。

textContentプロパティ

textContentプロパティは、要素のテキストコンテンツを取得または設定します。HTMLタグはエスケープされてテキストとして扱われます。

Javascript

// 要素を取得
const messageElement = document.getElementById('message');

// テキストを書き換え
messageElement.textContent = '新しいメッセージです。';

// HTMLタグを含むテキストを設定（HTMLとして解釈されない）
messageElement.textContent = '<strong>重要なメッセージ</strong>です。';

textContentはセキュリティ上の理由からinnerHTMLよりも安全です。ユーザー入力を動的に表示する際は、XSS（クロスサイトスクリプティング）攻撃を防ぐためtextContentを使用することを推奨します。

valueプロパティ

フォーム要素（input、textarea、selectなど）の場合、valueプロパティを使用して値を取得または設定します。

Javascript

// input要素を取得
const inputElement = document.getElementById('username');

// 値を設定
inputElement.value = '新しいユーザー名';

// 値を取得
const currentValue = inputElement.value;
console.log(currentValue); // '新しいユーザー名'

ステップ3：新しい要素を追加する

既存の要素に新しい要素を追加するには、以下のメソッドを使用します。

createElementとappendChild

まずcreateElementメソッドで新しい要素を作成し、その後appendChildメソッドで親要素に追加します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テストページ</title>
</head>
<body>
    <h1>こんにちは、世界！</h1>
    <div id="container"></div>
    <button id="addElementButton">要素を追加</button>

    <script>
        // ボタンにクリックイベントを追加
        document.getElementById('addElementButton').addEventListener('click', function() {
            // 新しいp要素を作成
            const newParagraph = document.createElement('p');

            // テキストコンテンツを設定
            newParagraph.textContent = '新しく追加された段落です。';

            // idを設定
            newParagraph.id = 'newParagraph';

            // 親要素を取得
            const container = document.getElementById('container');

            // 親要素に新しい要素を追加
            container.appendChild(newParagraph);
        });
    </script>
</body>
</html>

insertBefore

insertBeforeメソッドを使用すると、特定の要素の前に新しい要素を挿入できます。

Javascript

// 新しい要素を作成
const newElement = document.createElement('div');
newElement.textContent = '挿入された要素';

// 参照要素を取得
const referenceElement = document.getElementById('someElement');

// 親要素を取得
const parentElement = referenceElement.parentNode;

// 参照要素の前に新しい要素を挿入
parentElement.insertBefore(newElement, referenceElement);

insertAdjacentHTML

insertAdjacentHTMLメソッドは、HTML文字列を指定した位置に挿入します。

Javascript

// 挿入するHTML文字列
const htmlString = '<div class="new-element">新しく追加された要素です。</div>';

// 基準要素を取得
const targetElement = document.getElementById('target');

// 基準要素の直後にHTMLを挿入
targetElement.insertAdjacentHTML('afterend', htmlString);

insertAdjacentHTMLの第一引数には、挿入位置を以下のいずれかで指定します： - 'beforebegin': 要素の直前 - 'afterbegin': 要素の直後（子要素として） - 'beforeend': 要素の直前（子要素として） - 'afterend': 要素の直後

ステップ4：要素を削除する

不要になった要素を削除するには、removeメソッドまたはremoveChildメソッドを使用します。

removeメソッド

removeメソッドは、要素自体を削除します。

Javascript

// 削除する要素を取得
const elementToRemove = document.getElementById('elementToRemove');

// 要素を削除
elementToRemove.remove();

removeChildメソッド

removeChildメソッドは、親要素から子要素を削除します。

Javascript

// 親要素を取得
const parentElement = document.getElementById('parent');

// 削除する子要素を取得
const childToRemove = document.getElementById('childToRemove');

// 子要素を削除
parentElement.removeChild(childToRemove);

ステップ5：要素のスタイルを変更する

要素の見た目を動的に変更するには、styleプロパティを使用します。

Javascript

// 要素を取得
const element = document.getElementById('target');

// スタイルを直接変更
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '20px';

// クラスを追加または削除
element.classList.add('highlight');
element.classList.remove('old-class');
element.classList.toggle('active'); // クラスが存在すれば削除、存在しなければ追加

ステップ6：イベント処理による動的な更新

ユーザーの操作に応じてページを更新するには、イベントリスナーを使用します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イベント処理の例</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>イベント処理の例</h1>

    <button id="showButton">詳細を表示</button>
    <div id="details" class="hidden">
        <p>これは詳細情報です。</p>
        <p>ボタンをクリックすると表示/非表示が切り替わります。</p>
    </div>

    <script>
        // ボタン要素を取得
        const showButton = document.getElementById('showButton');
        const details = document.getElementById('details');

        // クリックイベントを追加
        showButton.addEventListener('click', function() {
            // hiddenクラスの有無で表示/非表示を切り替え
            details.classList.toggle('hidden');

            // ボタンテキストを更新
            if (details.classList.contains('hidden')) {
                showButton.textContent = '詳細を表示';
            } else {
                showButton.textContent = '詳細を非表示';
            }
        });
    </script>
</body>
</html>

ハマった点やエラー解決

DOM操作を行う際によく遭遇する問題とその解決方法を以下に示します。

要素が見つからないエラー（Uncaught TypeError: Cannot read property '...' of null）

このエラーは、指定したセレクタに一致する要素が存在しない場合に発生します。

Javascript

// エラーの例
const element = document.getElementById('nonExistentElement');
element.innerHTML = '新しいコンテンツ'; // エラー発生

解決策：要素が存在するか確認してから操作を行います。

Javascript

// 解決策1：存在確認
const element = document.getElementById('nonExistentElement');
if (element) {
    element.innerHTML = '新しいコンテンツ';
}

// 解決策2：オプショナルチェイニング（ES2020以降）
const element = document.getElementById('nonExistentElement')?.innerHTML = '新しいコンテンツ';

DOMが読み込まれる前にスクリプトを実行している

HTML要素にアクセスする前にスクリプトが実行されると、要素がまだ存在しないためエラーが発生します。

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エラーの例</title>
</head>
<body>
    <script>
        // DOMが読み込まれる前に実行される
        const element = document.getElementById('target'); // nullが返る
        element.innerHTML = '新しいコンテンツ'; // エラー発生
    </script>

    <div id="target">元のコンテンツ</div>
</body>
</html>

解決策： 1. スクリプトをbodyの閉じタグの直前に配置する 2. DOMContentLoadedイベントを使用する 3. defer属性を使用する

Html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>解決策の例</title>
</head>
<body>
    <div id="target">元のコンテンツ</div>

    <!-- 解決策2：DOMContentLoadedイベントを使用 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const element = document.getElementById('target');
            element.innerHTML = '新しいコンテンツ';
        });
    </script>
</body>
</html>

innerHTMLを使用したXSS攻撃

ユーザー入力をそのままinnerHTMLに設定すると、XSS（クロスサイトスクリプティング）攻撃のリスクがあります。

Javascript

// セキュリティリスクのある例
const userInput = '<script>alert("XSS攻撃");</script>';
document.getElementById('output').innerHTML = userInput; // 悪意のあるスクリプトが実行される

解決策：ユーザー入力を表示する場合は、textContentまたはinnerTextを使用するか、入力をサニタイズ処理します。

Javascript

// 解決策1：textContentを使用
const userInput = '<script>alert("XSS攻撃");</script>';
document.getElementById('output').textContent = userInput; // HTMLとして解釈されずテキストとして表示

// 解決策2：サニタイズ処理
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

const userInput = '<script>alert("XSS攻撃");</script>';
const safeUserInput = escapeHtml(userInput);
document.getElementById('output').innerHTML = safeUserInput; // エスケープされたテキストとして表示

要素の重複追加

イベントハンドラが複数回設定されると、同じ操作が何度も実行されてしまいます。

Javascript

// 問題のある例
function setupButton() {
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        console.log('ボタンがクリックされました');
    });
}

// 何度も呼び出されるとイベントリスナーが重複追加される
setupButton();
setupButton();
setupButton();
// ボタンを1回クリックすると3回ログが出力される

解決策：イベントリスナーを追加する前に、既存のリスナーを削除するか、イベントデリゲーションを使用します。

Javascript

// 解決策1：イベントリスナーを削除してから追加
function setupButton() {
    const button = document.getElementById('myButton');
    // 既存のイベントリスナーを削除
    button.replaceWith(button.cloneNode(true));
    // 新しいイベントリスナーを追加
    button.addEventListener('click', function() {
        console.log('ボタンがクリックされました');
    });
}

// 解決策2：イベントデリゲーション（親要素にイベントリスナーを設定）
document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.id === 'myButton') {
        console.log('ボタンがクリックされました');
    }
});

まとめ

本記事では、JavaScriptを使ってHTMLを動的に書き換える方法について解説しました。

要素の取得方法（getElementById、querySelectorなど）
内容の書き換え（innerHTML、textContent、valueプロパティ）
新しい要素の追加（createElement、appendChildなど）
要素の削除（remove、removeChild）
スタイルの動的な変更
イベント処理によるインタラクティブなページの実現
よくあるエラーとその解決策

この記事を通して、動的なWebページを作成するための基本的なDOM操作ができるようになりました。今後は、より高度なDOM操作やReact、Vueなどのフレームワークを使った効率的なUI開発についても記事にする予定です。

JavaScriptでHTMLを動的に書き換える完全ガイド💻