02. Web制作におけるJavaScriptの役割

この章では、Web制作の現場でJavaScriptがどのように使われるのかを学びます。

JavaScriptは、Webサイトに「動き」を付けるためだけのものではありません。ユーザーの操作を受け取り、画面の状態を変え、必要な情報を表示し、入力ミスに気づかせるためにも使われます。

ただし、Web制作で必要になるJavaScriptは、Webアプリ開発で使うJavaScriptと少し方向性が違います。

この教材では、ReactやVueで大規模なアプリケーションを作るためのJavaScriptではなく、LP、コーポレートサイト、採用サイトなどで実際によく使うJavaScriptを中心に学びます。

Web制作におけるJavaScriptとは

HTML、CSS、JavaScriptの役割をざっくり分けると、次のようになります。

技術	主な役割	例
HTML	文書の構造を作る	見出し、本文、画像、ボタン、フォーム
CSS	見た目を整える	色、余白、レイアウト、アニメーション
JavaScript	操作に応じて状態を変える	メニュー開閉、タブ切り替え、フォームチェック

Web制作におけるJavaScriptの中心は、ブラウザ上のHTMLを操作することです。

たとえば、次のような動きはJavaScriptでよく実装します。

ハンバーガーメニューをクリックしたらナビゲーションを開く
FAQの質問をクリックしたら回答を表示する
タブをクリックしたら表示する内容を切り替える
モーダルを開いた時に背景スクロールを止める
入力必須のフォームが空ならエラーメッセージを出す
スクロール位置に応じてヘッダーの見た目を変える
スライダーやアニメーションライブラリを初期化する

どれも共通しているのは、ユーザーの操作や画面の状態に応じて、HTMLやCSSの状態を変えていることです。

Web制作とWebアプリ開発の違い

JavaScriptを学び始めると、Todoアプリ、チャットアプリ、ECサイト、管理画面などの教材をよく見かけます。これらはJavaScriptの勉強としては役に立ちますが、Web制作の現場で必要になる内容とは少しズレることがあります。

Web制作とWebアプリ開発の違いを整理してみましょう。

項目	Web制作	Webアプリ開発
主な対象	LP、コーポレートサイト、採用サイト、ブランドサイト	管理画面、SNS、予約システム、EC機能
JavaScriptの役割	HTML/CSSに動きや操作性を足す	画面やデータの状態を本格的に管理する
よく使う技術	素のJavaScript、GSAP、Splide	React、Vue、Next.js、API、状態管理
重視すること	表示品質、操作性、アクセシビリティ、納品後の保守	データ設計、画面遷移、認証、複雑な状態管理
実装例	メニュー、モーダル、フォーム、スクロール演出	ログイン、投稿、検索、決済、リアルタイム更新

Web制作では、HTMLとCSSで作ったページに対して、必要なところだけJavaScriptを足すことが多いです。

Web制作でJavaScriptが必要になる場面

Web制作でJavaScriptが必要になる場面は、大きく分けると4つあります。

1. ユーザー操作に応じて表示を変える

もっとも基本的な使い方です。

ボタンを押したらメニューを開く
FAQをクリックしたら回答を開く
タブをクリックしたらパネルを切り替える
モーダルを開く、閉じる

このような実装では、JavaScriptでCSSクラスやHTML属性を切り替えることが多いです。

たとえば、ボタンをクリックしたら対象要素にis-activeというクラスを付ける、もう一度クリックしたら外す、という処理です。

2. 入力内容を確認する

フォームでは、ユーザーが入力した内容をJavaScriptで確認することがあります。

必須項目が入力されているか
メールアドレスの形式になっているか
チェックボックスにチェックが入っているか
エラーメッセージをどこに表示するか
送信ボタンを二重クリックできないようにするか

ただし、フロント側のバリデーションだけで安全になるわけではありません。JavaScriptによる入力チェックは、ユーザーに入力ミスを気づかせるための補助です。最終的なチェックはサーバー側でも必要です。

3. スクロールや画面サイズに応じて処理する

Webサイトでは、スクロール位置や画面幅によって動きを変えることがあります。

一定位置までスクロールしたらヘッダーの背景を変える
ページトップボタンを表示する
要素が画面に入ったらフェードインさせる
スマホ幅の時だけメニュー処理を変える
PCではグリッド、スマホではスライダーにする

このような処理では、scrollイベント、resizeイベント、matchMedia、Intersection Observerなどを使います。

ただし、スクロール処理は重くなりやすいので注意が必要です。何でもscrollイベントで監視するのではなく、後の章で学ぶIntersection Observerやライブラリを適切に使います。

4. ライブラリを初期化する

実務では、すべてを自分で書くわけではありません。

たとえば、次のような機能はライブラリを使うことが多いです。

スライダー: Splide、Swiperなど
高度なアニメーション: GSAP
スクロール連動アニメーション: GSAP ScrollTrigger
日付選択UI: flatpickrなど

ライブラリを使う時も、JavaScriptの基礎は必要です。

公式ドキュメントに書かれているコードを読んだり、オプションを設定したり、複数箇所に適用したり、スマホとPCで挙動を変えたりするからです。

CSSでやるべきこと、JavaScriptでやるべきこと

初心者のうちは、動きがあるものを全部JavaScriptで作ろうとしてしまうことがあります。

しかし、Web制作ではCSSでできることはCSSに任せ、JavaScriptは状態の切り替えに集中させる方が、実装がシンプルで保守しやすくなります。

判断の目安は次の通りです。

やりたいこと	主に使う技術	理由
hoverした時に色を変える	CSS	`:hover`で十分
ふわっと表示するアニメーション	CSS	`transition`や`animation`で表現しやすい
ボタンを押したらメニューを開く	JavaScript + CSS	クリック状態をJSで管理し、見た目はCSSで制御する
フォームの入力内容を確認する	JavaScript	入力値を読み取る必要がある
スクロール位置でヘッダーを変える	JavaScript + CSS	スクロール位置の判定が必要
複雑なタイムラインアニメーション	GSAPなど	手書きより安全で管理しやすい

実務ポイント

大事なのは、JavaScriptで見た目を直接作り込みすぎないことです。

たとえば、メニューを開く時にJavaScriptでstyle.display = "block"やstyle.opacity = "1"をたくさん書くより、JavaScriptではis-activeクラスを付け外しし、見た目はCSSに任せる方が実務では扱いやすくなります。

悪い例

// よくあるが、見た目の変更がJSに散らばりやすい
menu.style.display = "block";
menu.style.opacity = "1";
menu.style.transform = "translateX(0)";

良い例

// 実務では、状態を表すクラスを切り替える方が管理しやすい
menu.classList.add("is-active");

JavaScriptは「状態を変える」、CSSは「その状態をどう見せるかを決める」と分けて考えると、コードが読みやすくなります。

jQueryではなく素のJavaScriptを学ぶ理由

少し前まで、Web制作のJavaScriptといえばjQueryがよく使われていました。

jQueryを使うと、短いコードでDOM操作やアニメーションを書けます。

jQueryで書いた例

$(".js-button").on("click", function () {
    $(".js-menu").toggleClass("is-active");
});

しかし、現在のブラウザでは、素のJavaScriptだけでも多くのことが書きやすくなっています。

素のJavaScriptで書いた例

const button = document.querySelector(".js-button");
const menu = document.querySelector(".js-menu");

button.addEventListener("click", () => {
    menu.classList.toggle("is-active");
});

素のJavaScriptを学ぶ理由は、jQueryを否定するためではありません。現場によっては、今でもjQueryが使われているサイトはあります。

それでも、先に素のJavaScriptを学ぶメリットがあります。

ブラウザ標準の仕組みを理解できる
jQueryがない案件でも対応できる
GSAPやSplideなどのドキュメントを読みやすくなる
ReactやVueに進む場合も基礎が無駄にならない
余計なライブラリを増やさずに済む
古いコードを読む時にも、何が起きているか理解しやすい

この教材では、基本的に素のJavaScriptで実装します。その上で、スライダーや高度なアニメーションのように、ライブラリを使った方が実務的な場面ではライブラリを使います。

ライブラリを使うべき場面

ライブラリは便利ですが、何でもライブラリに頼ればよいわけではありません。

判断の目安は次の通りです。

場面	おすすめ
ボタンを押してクラスを付け替えるだけ	自分で書く
シンプルなアコーディオン	自分で書く
アクセシブルなモーダルを短時間で確実に作りたい	既存実装やライブラリも検討する
複数枚のスライドをドラッグ対応で動かしたい	Splideなどを使う
複雑なアニメーションを順番に動かしたい	GSAPを使う
スクロールに連動した高度な演出を作りたい	GSAP ScrollTriggerなどを使う

ライブラリを使うかどうかは、次の観点で判断します。

自分で作るより安全か
アクセシビリティに配慮されているか
スマホ操作に対応しているか
公式ドキュメントが読みやすいか
更新が止まっていないか
サイト全体の表示速度に影響しすぎないか
案件の要件に対して大げさすぎないか

コピペ実装が危険な理由

JavaScriptは、検索すればサンプルコードがたくさん出てきます。AIに聞いてコードを出してもらうこともできます。

コピペ自体が悪いわけではありません。実務でも、公式ドキュメントのコードや過去案件のコードを参考にすることはあります。

Web制作では、同じUIを複数ページで使うことがよくあります。CMSで後から要素が増えることもあります。納品後に別の人が修正することもあります。

そのため、「今この画面で動く」だけでは不十分です。

実務で使えるJavaScriptには、次のような視点が必要です。

複数設置しても動くか
対象要素がない時にエラーにならないか
HTMLとCSSの責務が分かれているか
キーボードでも操作できるか
状態を表す属性が更新されているか
後から見ても何をしているかわかるか

この教材では、ただ動くコードではなく、案件で使い回しやすいコードを目指します。

小さな実装例: お知らせを開閉する

ここで、Web制作でよくある「ボタンを押したら表示を切り替える」処理を見てみましょう。

この例では、ボタンをクリックするとお知らせエリアを開閉します。

HTML、CSS、JavaScriptをそれぞれ用意します。

HTML

<div class="notice">
    <button class="notice-button js-notice-button" type="button" aria-expanded="false" aria-controls="notice-content">お知らせを表示する</button>

    <div class="notice-content js-notice-content" id="notice-content" hidden>
        <p>キャンペーンは今月末までです。詳細はお問い合わせください。</p>
    </div>
</div>

CSS

.notice {
    border: 1px solid #d8dde8;
    padding: 16px;
}

.notice-button {
    cursor: pointer;
}

.notice-content {
    margin-top: 12px;
}

.notice-content.is-active {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

JavaScript

const noticeButton = document.querySelector(".js-notice-button");
const noticeContent = document.querySelector(".js-notice-content");

if (noticeButton && noticeContent) {
    noticeButton.addEventListener("click", () => {
        const isOpen = noticeButton.getAttribute("aria-expanded") === "true";

        noticeButton.setAttribute("aria-expanded", String(!isOpen));
        noticeButton.textContent = isOpen ? "お知らせを表示する" : "お知らせを閉じる";

        noticeContent.hidden = isOpen;
        noticeContent.classList.toggle("is-active", !isOpen);
    });
}

このコードでは、JavaScriptが次の仕事をしています。

ボタン要素を取得する
お知らせの中身を取得する
ボタンがクリックされた時に処理を実行する
今開いているかどうかをaria-expandedから判断する
ボタンの文言を切り替える
hidden属性で表示、非表示を切り替える
is-activeクラスでアニメーション用の状態を付ける

この時、見た目の細かい指定はCSSに任せています。JavaScriptは「開いているか、閉じているか」という状態を変えているだけです。

また、最初に次の条件分岐を入れています。

ガード処理

if (noticeButton && noticeContent) {
    // 要素がある時だけ処理する
}

CSSクラスの命名で意識すること

先ほどの例では、HTMLに次のようなクラスを付けていました。

HTML

<button class="notice-button js-notice-button" type="button"></button>

notice-buttonはCSSで見た目を指定するためのクラスです。

js-notice-buttonはJavaScriptで要素を取得するためのクラスです。

実務ポイント

このように、CSS用のクラスとJavaScript用のクラスを分けておくと、後からデザイン修正が入った時に壊れにくくなります。

たとえば、デザイン都合でnotice-buttonというクラス名を変えたくなっても、JavaScript側がjs-notice-buttonを見ていれば、処理には影響しません。

実務では、JavaScriptで取得するためのクラスにjs-を付けることがよくあります。

js-クラスの例

<button class="button button-primary js-modal-open" type="button">モーダルを開く</button>

js-クラスには、基本的にCSSを当てないようにします。

これはルールとして決めておくと、チーム開発や納品後の保守でかなり助かります。

JavaScriptの学習順序

Web制作向けにJavaScriptを学ぶなら、次の順番がおすすめです。

1. 必要な文法だけ先に押さえる

まずは、DOM操作やUI実装でよく使う文法を学びます。

const、let
文字列、数値、真偽値
配列、オブジェクト
if文
関数
forEach

すべての文法を最初から完璧に覚える必要はありません。Web制作でよく使うものから学び、実装しながら増やしていきます。

2. DOM操作を学ぶ

Web制作のJavaScriptでは、DOM操作が中心になります。

要素を取得する
クラスを付け外しする
属性を変更する
テキストを変える
要素を追加、削除する

ここがわかると、ハンバーガーメニュー、アコーディオン、タブ、モーダルなどの仕組みが見えてきます。

3. イベント処理を学ぶ

JavaScriptは、ユーザーの操作をきっかけに動くことが多いです。

クリックされた時
入力された時
フォームが送信された時
キーボードが押された時
スクロールした時
画面幅が変わった時

イベント処理がわかると、「ユーザーが何かしたら、画面を変える」という基本の形が作れるようになります。

4. 定番UIを実装する

基礎文法、DOM操作、イベント処理を学んだら、定番UIを作ります。

ハンバーガーメニュー
アコーディオン
タブ切り替え
モーダル
ドロップダウン
スムーススクロール
ページトップボタン

この段階では、ただ動かすだけでなく、複数設置、アクセシビリティ、スマホ対応まで考えます。

5. フォーム、アニメーション、ライブラリへ進む

定番UIの考え方がわかったら、実務でよく使う次の領域へ進みます。

フォームバリデーション
Intersection Observer
GSAP
Splide
パフォーマンス
アクセシビリティ
デバッグ

ここまで進むと、LPやコーポレートサイトで求められるJavaScriptにはかなり対応しやすくなります。

実務での判断チェックリスト

JavaScriptを書く前に、次の項目を確認しましょう。

これは本当にJavaScriptが必要な処理か
CSSだけで実現できないか
HTMLの構造は適切か
ボタンやリンクの要素は正しく使えているか
JavaScriptで状態を変え、見た目はCSSに任せられているか
対象要素がないページでもエラーにならないか
同じUIが複数あっても動く設計にできるか
キーボード操作やアクセシビリティに問題がないか
ライブラリを使う場合、要件に対して大げさすぎないか
納品後に別の人が見ても理解しやすいか

最初はすべてを完璧に判断できなくて大丈夫です。

この教材を通して、実装しながら少しずつ判断基準を増やしていきます。

この章のまとめ

Web制作におけるJavaScriptは、HTMLとCSSで作ったページに対して、操作性や状態変化を加えるために使います。

特に大切なのは、次の考え方です。

JavaScriptは、ユーザー操作や画面状態に応じてHTMLやCSSの状態を変える
CSSでできる見た目の表現はCSSに任せる
JavaScriptでは、クラスや属性を切り替えて状態を管理する
素のJavaScriptを理解すると、ライブラリも安全に使いやすくなる
コピペではなく、仕組みを理解して実装することが大切
実務では、複数設置、要素がないページ、アクセシビリティ、保守性まで考える

次の章では、Web制作のUI実装で必要になるJavaScriptの基礎文法を学びます。