Web制作でJavaScriptを利用するメリット ~Web制作からWeb開発へのステップアップ~

Posted at 2026-03-28

　Webサイトを制作するとき、HTMLとCSSだけ主に書いていればJavaScriptをガッツリ書かなくてもきれいな見た目のWebサイトはある程度作れる。私も以前は “JavaScriptの使い道がわからない” と考えていた。”アニメーションを実装するときに利用することはあるそうだが、アニメーションを作らないならばJavaScriptはいらないのでは” と考えていた。

　ところが、JavaScriptを使えばWebサイトの操作をより効率的に行うことができる。そこで、以下にサンプル問題を用意した。

サンプル問題

　以下のソースコードに追記して、下の完成図のようなリンクカード一覧ページを完成させよ。但し、JavaScriptなどの別ファイル読み込んでもよいものとする。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            font-family: sans-serif;
            background: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }

        .card {
            display: block;
            text-decoration: none;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

        .card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }

        .card-content {
            padding: 15px;
        }

        .card-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .card-description {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>

<body>

    <div class="container">
        <h1>リンクカード一覧</h1>
        <!-- ここから下にコードを追記 -->

        <!-- ここより上にコードを追記 -->
    </div>

</body>

</html>

完成図：リンクカード一覧ページ
画像素材出典：https://dummyimage.com/

解説

　このソースコードをHTMLのみで追記した場合、以下のようになる。

 <!-- ここから下にコードを追記 -->
        <div class="grid">
            <a href="#" class="card">
                <img src="https://dummyimage.com/400x200/000000/fff&text=ArticleImgae1" alt="">
                <div class="card-content">
                    <div class="card-title">記事タイトル1</div>
                    <div class="card-description">これはダミーの説明文です。</div>
                </div>
            </a>

            <a href="#" class="card">
                <img src="https://dummyimage.com/400x200/000000/fff&text=ArticleImgae2" alt="">
                <div class="card-content">
                    <div class="card-title">記事タイトル2</div>
                    <div class="card-description">これはダミーの説明文です。</div>
                </div>
            </a>

            <a href="#" class="card">
                <img src="https://dummyimage.com/400x200/000000/fff&text=ArticleImgae3" alt="">
                <div class="card-content">
                    <div class="card-title">記事タイトル3</div>
                    <div class="card-description">これはダミーの説明文です。</div>
                </div>
            </a>

            <a href="#" class="card">
                <img src="https://dummyimage.com/400x200/000000/fff&text=ArticleImgae4" alt="">
                <div class="card-content">
                    <div class="card-title">記事タイトル4</div>
                    <div class="card-description">これはダミーの説明文です。</div>
                </div>
            </a>

            <a href="#" class="card">
                <img src="https://dummyimage.com/400x200/000000/fff&text=ArticleImgae5" alt="">
                <div class="card-content">
                    <div class="card-title">記事タイトル5</div>
                    <div class="card-description">これはダミーの説明文です。</div>
                </div>
            </a>

            <a href="#" class="card">
                <img src="https://dummyimage.com/400x200/000000/fff&text=ArticleImgae6" alt="">
                <div class="card-content">
                    <div class="card-title">記事タイトル6</div>
                    <div class="card-description">これはダミーの説明文です。</div>
                </div>
            </a>
        </div>
<!-- ここより上にコードを追記 -->

　上記のコードにはリンクカードという共通のフレームが使われている。そこで、共通の部分を記述する回数はなるべく少なくしたい。そこで、JavaScriptを利用すると以下のようになる。

<!-- ここから下にコードを追記 -->
        <div class="grid" id="cards">
            
        </div>
        <script src="after.js"></script>
<!-- ここより上にコードを追記 -->

// after.js

// 読み込み完了
console.log("準備完了");

// カードの元データ一覧
const data_of_cards = [
    {
        hyper_link: "#",
        image_url: "https://dummyimage.com/400x200/000000/fff&text=ArticleImgae1",
        card_title: "記事タイトル1",
        card_description: "これはダミーの説明文です。",
    },
    {
        hyper_link: "#",
        image_url: "https://dummyimage.com/400x200/000000/fff&text=ArticleImgae2",
        card_title: "記事タイトル2",
        card_description: "これはダミーの説明文です。",
    },
    {
        hyper_link: "#",
        image_url: "https://dummyimage.com/400x200/000000/fff&text=ArticleImgae3",
        card_title: "記事タイトル3",
        card_description: "これはダミーの説明文です。",
    },
    {
        hyper_link: "#",
        image_url: "https://dummyimage.com/400x200/000000/fff&text=ArticleImgae4",
        card_title: "記事タイトル4",
        card_description: "これはダミーの説明文です。",
    },
    {
        hyper_link: "#",
        image_url: "https://dummyimage.com/400x200/000000/fff&text=ArticleImgae5",
        card_title: "記事タイトル5",
        card_description: "これはダミーの説明文です。",
    },
    {
        hyper_link: "#",
        image_url: "https://dummyimage.com/400x200/000000/fff&text=ArticleImgae6",
        card_title: "記事タイトル6",
        card_description: "これはダミーの説明文です。",
    },

]

// 上記のデータ情報をもとにカードを生成する。
const cards = document.querySelector("#cards");
for (data_of_card of data_of_cards) {
    cards.insertAdjacentHTML("beforeend", `
        <a href="${data_of_card.hyper_link}" class="card">
            <img src="${data_of_card.image_url}" alt="">
            <div class="card-content">
                <div class="card-title">${data_of_card.card_title}</div>
                <div class="card-description">${data_of_card.card_description}</div>
            </div>
        </a>
    `)
}

　上記のコードは、変数を構造体として配列に格納して、for文で配列の要素を一つづつ共通のフレームに当てはめて、HTMLに追記している。つまりDOM操作している。さらに元データ情報をCSVに格納すれば、サイトの更新がさらに簡単に行えるような仕様になると考えられる。

　このように、共通の要素をJavaScriptで書くということをもとにWebサイトを構築すれば、より運用が簡単なWebサイトにすることができると考えられる。

※発展編

　共通の要素をJavaScriptで書くということを突き詰めれば、理論上JavaScriptをメインに記述するWebサイトが完成するのではないかと考えられる。そのレベルはWeb開発の領域であり、Webアプリケーションを開発する段階である。例えば、Webアプリケーション開発の現場で利用されているReactコンポーネントの考え方は、まさに共通の要素をJavaScriptで書くという思想を突き詰めたものである。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up