初心者向けweb講座

JavaScriptとjQueryの基礎｜DOM操作・イベント・アニメーションを理解する

更新日：2026-05-04 著者：unigram 読了目安：9分

この記事の要点

JavaScriptとjQueryの基礎を解説。DOMの仕組み・イベントハンドラ・スクロールアニメーション・ハンバーガーメニューの実装まで、コード例とともに丁寧に説明します。

HTML・CSSでページの見た目を作れるようになったら、次のステップは JavaScript です。JavaScriptを使うことで、ページにクリック・アニメーション・動的な表示切り替えといった「動き」を加えられます。さらに jQuery というライブラリを使えば、複雑な処理を短いコードでシンプルに書けます。

このページでは、JavaScript・jQueryの基本的な考え方から、実際のよく使うパターンまでを順番に解説します。

JavaScriptとは

JavaScriptはWebページに動きや対話性（インタラクティブ性）を追加するためのプログラミング言語です。Web開発においてHTMLが「構造」、CSSが「見た目」を担うのに対し、JavaScriptは「動き」を担当します。

JavaScriptでできることの代表的な例を挙げます。

インタラクティブ機能：ボタンを押したときの効果、ドロップダウンメニュー、マップの表示
フォームのバリデーション：入力内容のリアルタイムチェック
コンテンツのリアルタイム更新：ページを再読み込みせずに情報を更新する（API連携）
アニメーション：画像スライドショー、ポップアップウィンドウ

DOMとJavaScriptの関係

HTMLとCSSはブラウザ上に画面を表示させるための「設計図」です。ブラウザはこの設計図をもとに DOM（ドキュメントオブジェクトモデル） と呼ばれる「模型」を組み立て、それを実際に見える形でレンダリングしています。

JavaScriptはこの「模型（DOM）」に対して動きを指示します。そのため、元のHTMLファイル自体を書き換えるわけではなく、ブラウザ上の表示だけが変化します。

JavaScriptの記述方法

HTMLファイルに直接書く方法

<script>〜</script> タグの中にJavaScriptを記述します。原則としてHTML の <head> 要素内に記載しますが、状況に応じて <body> の末尾に書くこともあります。

<script>
  // 「.btn」を押したら、「.menu」を表示する

  // 1. 対象パーツをDOMから取得
  const btn = document.querySelector('.btn');
  const menu = document.querySelector('.menu');

  // 2. クリックイベントを監視する
  btn.addEventListener('click', function() {
    // 3. 「.menu」を表示する
    menu.style.display = 'block';
  });
</script>

外部ファイルとして読み込む方法

CSSファイルと同様に、JavaScriptも外部ファイルに分けてHTMLに読み込ませるのが一般的です。ファイル名は慣例的に script.js や scripts.js とします。

<!-- HTMLの <head> 内に記述 -->
<script type="text/javascript" src="assets/js/scripts.js"></script>

jQueryとは

jQueryはJavaScriptをより短く・簡単に書けるよう設計されたライブラリです。実際の制作現場でも多くのサイトがjQueryを使って構築されています。JavaScriptとjQueryのスクリプトをまとめて「JS」と呼ぶこともあります。

先ほどのJavaScriptのサンプルをjQueryで書き直すと、次のようになります。

<script>
$(function() {
  // 「.btn」を押したら、「.menu」を表示する
  $('.btn').on('click', function() {
    $('.menu').show();
  });
});
</script>

「これ（.btn）を、どうする（show()）」という形でシンプルに記述できるのがjQueryの大きな特徴です。

jQueryの読み込み方

jQueryを使うには、まず <head> 内でライブラリ本体を読み込む必要があります。これを忘れると一切動作しないため、必ず確認しましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

jQueryの基本構文とイベントハンドラ

jQueryの基本的な書き方は次のとおりです。

$( セレクタ ).on('イベント名', function() {
  // イベントが発生したときに実行したい処理
});

イベントハンドラとは、「ボタンがクリックされた」「マウスが乗った」「キーボードが押された」といったユーザーの操作を検知して特定の処理を実行させる仕組みです。よく使うイベントを以下にまとめます。

イベント名	発生タイミング
`click`	要素をクリックしたとき（最も多用される）
`mouseenter` / `mouseleave`	マウスが要素に入ったとき・出たとき
`scroll`	画面がスクロールされたとき
`resize`	ブラウザのウィンドウサイズが変更されたとき

実装例①：ハンバーガーメニュー

スマートフォンでよく見かける、三本線のメニューボタン（ハンバーガーメニュー）を実装してみます。PCではナビゲーションを横並びに常時表示し、スマートフォンではハンバーガーメニューで表示・非表示を切り替えるパターンです。

HTML

<div class="hamburger" id="js-hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav class="full-nav" id="js-nav">
  <ul class="nav-list">
    <li><a href="#">TOP</a></li>
    <li><a href="#">CONCEPT</a></li>
    <li><a href="#">SERVICE</a></li>
    <li><a href="#">CONTACT</a></li>
  </ul>
</nav>

JavaScript（jQuery）

$(function() {
  // ボタンをクリックしたときの処理
  $('#js-hamburger').on('click', function() {
    // ボタン自身の形を「×」に変えるクラスを付け外し
    $(this).toggleClass('is-active');
    // メニューを表示させるクラスを付け外し
    $('#js-nav').toggleClass('is-open');
  });

  // メニュー内のリンクをクリックしたら、自動で閉じる
  $('.nav-list a').on('click', function() {
    $('#js-hamburger').removeClass('is-active');
    $('#js-nav').removeClass('is-open');
  });
});

CSS（スマートフォン対応部分・抜粋）

/* PC版：三本線ボタンは非表示 */
.hamburger { display: none; }

/* スマートフォン・タブレット（768px以下） */
@media screen and (max-width: 768px) {
  /* ボタンを右上に固定 */
  .hamburger {
    display: block;
    position: fixed;
    top: 25px;
    right: 25px;
    width: 44px;
    height: 44px;
    z-index: 100;
    cursor: pointer;
  }

  /* メニュー本体：初期状態は透明・クリック不能 */
  .full-nav {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background-color: rgba(255,255,255,0.98);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }

  /* jQueryでクラスが付与されたら表示 */
  .is-open {
    opacity: 1;
    visibility: visible;
  }

  /* ボタンを「×」に変形 */
  .is-active span:nth-child(1) { transform: translateY(12px) rotate(-45deg); }
  .is-active span:nth-child(2) { opacity: 0; }
  .is-active span:nth-child(3) { transform: translateY(-12px) rotate(45deg); }
}

CSSの記述内容を変えるだけで、メニューを「右から出現」「上から出現」など様々な見せ方にアレンジできます。

実装例②：スクロールでふわっと現れるアニメーション

ページをスクロールして要素が画面内に入ったタイミングで、要素をふわっとフェードインさせる実装です。

HTML

<div class="box js-scroll-animation is-blue">1</div>
<div class="box js-scroll-animation is-pink">2</div>
<div class="box js-scroll-animation is-orange">3</div>

JavaScript（jQuery）

$(function() {
  $(window).on('scroll', function() {
    $('.js-scroll-animation').each(function() {
      var targetPosition = $(this).offset().top;   // 要素の画面上端からの距離
      var scrollAmount   = $(window).scrollTop();  // 現在のスクロール量
      var windowHeight   = $(window).height();     // ウィンドウの高さ

      // 画面の下端から100px入ったらクラスを付与
      if (targetPosition < scrollAmount + windowHeight - 100) {
        $(this).addClass('is-show');
      }
    });
  });
});

CSS

/* 初期状態：透明で下に50pxずらす */
.js-scroll-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* is-showクラスが付与されたら元の位置に戻しながら表示 */
.js-scroll-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

このJSとCSSを用意しておけば、HTMLの任意の要素に js-scroll-animation クラスを追加するだけで、スクロールアニメーションを適用できます。

jQueryが動かないときのチェックリスト

「コードは合っているはずなのに動かない」という場合、原因の大半はコードの記述以外にあります。次の順番で確認しましょう。

#	確認項目	よくある原因
1	jQueryを読み込んでいるか	`<script src="...">` の記述がない、またはURLが間違っている
2	読み込む順番は正しいか	自作JSをjQuery本体より先に読み込んでいる（NG）
3	セレクタの書き間違いがないか	クラスは `.`、IDは `#` を忘れている／スペルミス
4	`$(function(){...});` で囲んでいるか	DOM生成前に実行しようとしている
5	コンソールにエラーが出ていないか	F12キー → Consoleタブで赤いエラーを確認する

代表的なエラーメッセージと原因を覚えておくと、デバッグが格段に速くなります。

Uncaught ReferenceError: $ is not defined：jQueryが読み込めていない
SyntaxError：カッコの閉じ忘れ、カンマの打ち忘れなど文法ミス

デバイス判定と関数

画面幅でPC/スマホを判定する

$(function() {
  var width = $(window).width();
  if (width <= 768) {
    // スマートフォンの場合の処理
  } else {
    // PCの場合の処理
  }
});

関数を使ってコードを整理する

関数（Function）とは「複数の命令をひとまとめにしたセット」のことです。一度作れば何度でも再利用でき、修正も1か所で済むためコードの保守性が高まります。

// 関数の定義
function toggleHeavyContent() {
  var width = $(window).width();
  if (width <= 768) {
    $('#js-pc-content').hide();
  } else {
    $('#js-pc-content').show();
  }
}

// ページ読み込み時とリサイズ時に実行
toggleHeavyContent();
$(window).on('resize', function() {
  toggleHeavyContent();
});

このように処理を関数にまとめることで、「読み込み時」「リサイズ時」の両方で同じ処理を呼び出すことができ、コードの重複を避けられます。

まとめ

JavaScriptとjQueryの基礎について整理します。

JavaScriptは DOM（模型） に対して動きを指示するプログラミング言語
jQueryはJavaScriptをより短く書けるライブラリ。使う前にライブラリの読み込みが必要
基本構文は $( セレクタ ).on('イベント名', function() {...})
$(function(){...}) で囲むことで、DOM生成完了後に安全に実行できる
ハンバーガーメニューやスクロールアニメーションは toggleClass / addClass とCSSを組み合わせて実装する
動かないときはコンソール（F12）でエラーを確認するのが最短の解決策

jQueryの基本パターンを身につけることで、Webサイトに豊かなインタラクションを加えられるようになります。次のステップとして、スライダーやタブ切り替えなど、より複雑なUIコンポーネントの実装にも挑戦してみましょう。

この記事を書いた人

unigram
web、印刷、映像などの制作をしています。@京都、フリーランス18年目。大学で講師もしています。自身の備忘録も兼ねて、Web制作・WordPress・SEO・GA4・生成AI活用をテーマに情報発信しています。わかりやすく優しい内容で記事作成を心がけています。

JavaScriptとjQueryの基礎｜DOM操作・イベント・アニメーションを理解する

この記事の要点

JavaScriptとは

DOMとJavaScriptの関係

JavaScriptの記述方法

HTMLファイルに直接書く方法

外部ファイルとして読み込む方法

jQueryとは

jQueryの読み込み方

jQueryの基本構文とイベントハンドラ

実装例①：ハンバーガーメニュー

HTML

JavaScript（jQuery）

CSS（スマートフォン対応部分・抜粋）

実装例②：スクロールでふわっと現れるアニメーション

HTML

JavaScript（jQuery）

CSS

jQueryが動かないときのチェックリスト

デバイス判定と関数

画面幅でPC/スマホを判定する

関数を使ってコードを整理する

まとめ

この記事を書いた人

あわせて読みたい記事