この記事にはプロモーションが含まれています。

【Web制作シリーズ】javascriptで動きのあるWebサイトを作ろう！DOM操作とイベント処理

2025-08-042025-08-10

この記事は、Web制作学習シリーズ最終回となる第7回目です。

ケケンタ

見た目はいい感じになったけど、動きがなくて「イマドキ」感が足りない気がする…

前回までのポートフォリオサイト作成を終えて、このように感じてはいないでしょうか。

そこでシリーズ最終回となるこの記事では、JavaScriptでWebサイトに命を吹き込んでいきます！

DOM操作とイベント処理をマスターして、ユーザーの操作に反応する動的なWebサイトを作成します。フォームバリデーションやインタラクティブな機能で、プロフェッショナルな体験を提供できます。

JavaScriptの力で、あなたのWebサイトをインタラクティブに！ この記事を読み終えるころには、完全な自己紹介サイトが完成します。

この記事でできるようになること

JavaScriptの基本文法を完全理解
DOM操作でページを動的に変更
イベントハンドリングでユーザー操作に反応
フォームバリデーションでユーザビリティを向上
インタラクティブな機能の実装

完成するもの

この記事で完成するもの

動的なポートフォリオサイト（JavaScript機能付き、フォームバリデーション、インタラクティブ要素）

シリーズの進行:
第6回でレスポンシブデザインを完成させ、今回はJavaScriptで動的な機能を追加。これであなたの完全なポートフォリオサイトが完成します！このシリーズを通して、HTML、CSS、レスポンシブデザイン、JavaScriptまで、Web制作の基礎を完全にマスターできました！

シリーズ目次

前回の記事

【Web制作シリーズ】レスポンシブ対応サイトを完成させよう！ブレークポイント対応の実践

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

¥1,399 (2025/08/11 08:44:57時点 Amazon調べ-詳細)

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥1,499 (2025/08/12 03:12:59時点 Amazon調べ-詳細)

学習目標

この記事で身につくスキル

JavaScriptの基本文法
DOM操作の基礎
イベントハンドリング
フォームバリデーション
インタラクティブな機能の実装

JavaScriptの基本文法を理解しよう

この章では、javascriptの基本を学びます。これまで学習してきたHTML/CSSとは書き方がガラリと変わって、一気に本格的なプログラミングに近いないようとなるため、きっと多くの方が「難しい」と感じるはず。まずはなんとなく雰囲気を掴んでいただき、javascriptを使うとこんなことができるんだ、というイメージを膨らませていただければと思います。

JavaScriptとは

JavaScriptは、Webページに動的な機能を追加するためのプログラミング言語です。

JavaScriptの特徴

ブラウザで直接実行できる
HTMLとCSSと連携
ユーザーの操作に反応
データの処理と表示

変数とデータ型

javascriptでは、変数という数値や文字列などの情報を格納するための箱を用意して、それをプログラム上で扱っていきます。

// 変数の宣言
let name = "田中太郎";
const age = 25;

// データ型
let string = "文字列";
let number = 42;
let boolean = true;
let array = [1, 2, 3, 4, 5];
let object = { name: "田中", age: 25 };

// テンプレートリテラル
let message = `こんにちは、${name}さん！`;

関数の定義と呼び出し

関数とは、簡単にいえば特定のプログラムをグループ化してどこでも使いまわせるようにするためのものです。

// 基本的な関数
function greet(name) {
    return `こんにちは、${name}さん！`;
}

// アロー関数（ES6）
const greetArrow = (name) => {
    return `こんにちは、${name}さん！`;
};

// 関数の呼び出し
let greeting = greet("田中");

console.log(greeting);  // 出力：こんにちは、田中さん！

returnを用いることで、関数から任意のデータを返す（取り出す）ことができます。

条件分岐とループ

条件分岐は、特定の条件に一致する方の処理を実行するためのプログラム、ループは、特定の処理を繰り返し実行したい場合に使用するプログラムです。

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

// for文
for (let i = 0; i < 5; i++) {
    console.log(`カウント: ${i}`);
}

// forEach（配列）
let fruits = ["りんご", "バナナ", "オレンジ"];
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

DOM操作の基礎

本章では、javascriptで実際にHTMLを操作するための知識を学んでいきます。

DOMとは

DOM（Document Object Model）は、HTML文書をJavaScriptで操作するための仕組みです。

要素の選択

// IDで要素を選択
let header = document.getElementById("header");

// クラスで要素を選択
let buttons = document.querySelectorAll(".button");

// CSSセレクターで要素を選択
let firstButton = document.querySelector(".button");

要素の作成と追加

// 新しい要素を作成
let newDiv = document.createElement("div");
newDiv.textContent = "新しい要素";
newDiv.className = "new-element";

// 要素を追加
let container = document.querySelector(".container");
container.appendChild(newDiv);

要素の内容と属性の操作

// テキストコンテンツ
let element = document.querySelector(".content");
element.textContent = "新しいテキスト";

// 属性の操作
let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");

// クラスの操作
let button = document.querySelector(".button");
button.classList.add("active");
button.classList.remove("inactive");

ケケンタ

上記のような書き方を用いることで、操作したいHTML要素を取得することができます。

イベントハンドリング

イベントとは

イベントは、ユーザーの操作やブラウザの動作によって発生する出来事です。

主要なイベント

click: クリック
mouseover: マウスオーバー
keydown: キー押下
submit: フォーム送信
load: ページ読み込み完了

イベントリスナーの追加

イベントリスナーは、DOM操作で取得したHTML要素に、任意のイベントを追加するために使用します。

例えば、特定のボタンに「クリックイベント」を追加することで、そのボタンがクリックされたときに任意の処理を実行させることが可能です。

// 基本的なイベントリスナー
let button = document.querySelector(".button");
button.addEventListener("click", function(event) {
    console.log("ボタンがクリックされました");
});

// 複数のイベントリスナー
button.addEventListener("mouseover", function() {
    this.style.backgroundColor = "blue";
});

button.addEventListener("mouseout", function() {
    this.style.backgroundColor = "red";
});

イベントオブジェクト

イベントオブジェクトは、簡単にいえば、イベントが発生した要素に関する情報のことです。

例えば、クリックイベンが追加されているボタンをクリックすると、そのときに発生したイベント関係の情報が、イベントオブジェクトに自動的に入ってくる仕組みになっています。

ケケンタ

これを用いることで、「どのボタンでイベントが発生したのか」といった情報を簡単に取得することが可能です。

button.addEventListener("click", function(event) {
    // イベントの種類
    console.log(event.type);

    // ターゲット要素
    console.log(event.target);

    // デフォルト動作の防止
    event.preventDefault();
});

現時点ではまだピンと来ないかと思いますが、上記までに紹介した仕組みを組み合わせることで、javascriptによって動的なWebサイトを制作することが可能になります。

フォームバリデーション

バリデーションとは、そのデータが正しい状態にあるかどうかを確認する処理のことを指します。

フォームバリデーションでは、「ユーザーがフォームに入力した内容が正しいかどうか」とチェックします。

ケケンタ

例えば、メールアドレスを入力してほしいのに、そこに名前などまったく無関係な情報が入ってしまっていては困りますよね。バリデーションを用いることで、こうした「意図していないデータ」が入力されてしまうのを防止することができ、またそのことをユーザー自身へ伝えることが可能です。

基本的なバリデーション

下記は実際にjavascriptでバリデーション処理を組んだ場合の例です。ここでは雰囲気だけ掴んでいただければバッチリです。

function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;

    let isValid = true;
    let errors = [];

    // 名前のバリデーション
    if (name.trim().length < 2) {
        errors.push('名前は2文字以上で入力してください');
        isValid = false;
    }

    // メールアドレスのバリデーション
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;  // 「正規表現」によるチェック
    if (!emailRegex.test(email)) {
        errors.push('有効なメールアドレスを入力してください');
        isValid = false;
    }

    // メッセージのバリデーション
    if (message.trim().length < 10) {
        errors.push('メッセージは10文字以上で入力してください');
        isValid = false;
    }

    displayErrors(errors);
    return isValid;
}

function displayErrors(errors) {
    // 既存のエラーメッセージを削除
    const existingErrors = document.querySelectorAll('.error-message');
    existingErrors.forEach(error => error.remove());

    // 新しいエラーメッセージを表示
    errors.forEach(error => {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'error-message';
        errorDiv.textContent = error;
        errorDiv.style.color = 'red';
        errorDiv.style.fontSize = '14px';
        errorDiv.style.marginTop = '5px';

        document.querySelector('#contact form').appendChild(errorDiv);
    });
}

インタラクティブな機能の実装

この章では、javascriptを用いて実装できるアニメーションの一部をご紹介します。

スムーズスクロール

スムーズスクロールは、ページ内リンクをクリックしたときに、滑らかな動きで対象の場所まで画面が自動スクロールされる動きのことです。スムーズスクロールを設定しないと、「パッ、パッ」とページ内を移動してしまい、オシャレではない印象を与えてしまいます。

// スムーズスクロール
document.addEventListener('DOMContentLoaded', function() {
    // navタグ内の「#」を含んだリンクを持つaタグをすべて取得
    const navLinks = document.querySelectorAll('nav a[href^="#"]');

    // navLinksとして取得できたすべてのaタグにスムーズスクロールを設定
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();

            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});

ハンバーガーメニュー

// ハンバーガーメニュー
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('nav ul');

    hamburger.addEventListener('click', function() {
        navMenu.classList.toggle('active');
        hamburger.classList.toggle('active');
    });
});

参考になる記事

【コピペOK】ハンバーガーメニューのスライドアニメーション｜5種類【Web制作】ハンバーガーメニューがスライドして開くアニメーションを実装したい…… メニューが滑らかに表示される効果を作りたい…… 今回はこのようなお悩みをお持ちの方へ向けて We…

スクロールアニメーション

// スクロールアニメーション
document.addEventListener('DOMContentLoaded', function() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
            }
        });
    }, observerOptions);

    // アニメーション対象の要素を監視
    const animateElements = document.querySelectorAll('.animate-on-scroll');
    animateElements.forEach(element => {
        observer.observe(element);
    });
});

参考になる記事

【コピペOK】フェードイン系アニメーション｜6種類【Web制作】 CSSでフェードイン効果を実装したい…… ページ読み込み時に要素をスムーズに表示させたい…… 今回はこのようなお悩みをお持ちの方へ向けて Web制作において人気の高いアニ…

6. ポートフォリオサイトに動きを追加

それでは、いよいよ第6章までに作成してきたポートフォリオサイトへjavascriptを組み込んでいきましょう。

これにより、ポートフォリオサイトがよりリッチな仕上がりになります。

javascriptファイルの作成

まずはVS Codeでscript.jsというjavascriptファイルを作成します。

javascriptファイルの読み込み

次に、bodyの終了タグの直前に、javascriptを読み込むための記述を追加します。

    <!-- フッター -->
    <footer>
        <p>© 2024 田中太郎. All rights reserved.</p>
        <nav>
            <ul>
                <li><a href="https://github.com">GitHub</a></li>
                <li><a href="https://twitter.com">Twitter</a></li>
            </ul>
        </nav>
    </footer>
    <script src="./script.js"></script>
</body>
</html>

CSSファイルはheadタグ内で読み込んでいました。しかし、javascriptファイルは、基本的にbodyの終了タグの直前で読み込みます。

jsファイルをbody終了タグの直前で読み込む理由

読み込み順序：
HTMLすべてが読み込まれてからjavascriptを実行しないと、「このHTMLはまだ読み込まれていないよ！」といったエラーがjavascript上で発生するため
ページの読み込み速度：
先にjavascriptを読み込むと、その分だけHTMLやCSS（つまり見た目部分）の読み込みが遅延するため。これを避けるために、まずはHTMLやCSSを読み込ませて、最終的にjavascriptを読み込むという流れを取るのがセオリー

javascriptの記述

以下の内容をscript.js内へ記述します。

// ポートフォリオサイトのJavaScript
document.addEventListener('DOMContentLoaded', function() {

    // 1. スムーズスクロール
    const navLinks = document.querySelectorAll('nav a[href^="#"]');
    navLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

            if (targetElement) {
                targetElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // 2. フォームバリデーション
    const contactForm = document.querySelector('#contact form');
    if (contactForm) {
        contactForm.addEventListener('submit', function(event) {
            event.preventDefault();

            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const message = document.getElementById('message').value;

            let isValid = true;
            let errors = [];

            // バリデーション
            if (name.trim().length < 2) {
                errors.push('名前は2文字以上で入力してください');
                isValid = false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errors.push('有効なメールアドレスを入力してください');
                isValid = false;
            }

            if (message.trim().length < 10) {
                errors.push('メッセージは10文字以上で入力してください');
                isValid = false;
            }

            // エラー表示
            displayFormErrors(errors);

            if (isValid) {
                showSuccessMessage('お問い合わせを送信しました。ありがとうございます。');
                contactForm.reset();
            }
        });
    }

    function displayFormErrors(errors) {
        // 既存のエラーメッセージを削除
        const existingErrors = document.querySelectorAll('.form-error');
        existingErrors.forEach(error => error.remove());

        // 新しいエラーメッセージを表示
        errors.forEach(error => {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'form-error';
            errorDiv.textContent = error;
            errorDiv.style.color = 'red';
            errorDiv.style.fontSize = '14px';
            errorDiv.style.marginTop = '5px';

            contactForm.appendChild(errorDiv);
        });
    }

    function showSuccessMessage(message) {
        const successDiv = document.createElement('div');
        successDiv.className = 'success-message';
        successDiv.textContent = message;
        successDiv.style.color = 'green';
        successDiv.style.backgroundColor = '#d4edda';
        successDiv.style.border = '1px solid #c3e6cb';
        successDiv.style.padding = '10px';
        successDiv.style.borderRadius = '5px';
        successDiv.style.marginTop = '10px';

        contactForm.appendChild(successDiv);

        setTimeout(() => {
            successDiv.remove();
        }, 3000);
    }
});

動作確認