CONTENTS
  1. HOME
  2. JavaScript
  3. JavaScript応用
  4. JavaScriptのライブラリ（jQueryの基本操作）

JavaScriptのライブラリ（jQueryの基本操作）

jQueryとは？

jQuery（ジェイクエリ）は、JavaScriptをより簡単に書けるようにした「軽量なライブラリ（部品セット）」です。

  • document.querySelector() → $('#id')
  • addEventListener() → .on('click', ...)
  • .classList.add() → .addClass()

のように、より短く・わかりやすい記法でDOMを操作できます。

なぜ今も学ぶ価値があるのか？

近年はモダンJavaScriptの進化により、新規開発ではjQueryを使わないことが増えています。
ですが、以下の理由からjQueryの基本だけでも知っておくことは重要です。

  • 既存サイトの多くで使用されている
  • WordPressの多くのプラグインがjQueryに依存
  • 古いコードの修正・読み解きに必要
  • 短く書けて初心者にもわかりやすい

つまり、「今から新しく使うため」ではなく、「読める・直せるため」に知っておくという位置づけです。

CDNでjQueryを読み込む

jQueryは外部から読み込んで使うのが一般的です。その代表が「CDN（コンテンツ配信ネットワーク）」です。

以下のコードをHTMLファイル内の <head> や <body> の最後に書くことで、jQueryを使えるようになります。

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

jQuery 公式サイト：https://jquery.com/

よく使う操作

操作の目的jQueryの書き方例備考
DOMの準備ができたら$(function() { ... });DOMContentLoaded 相当
要素を選択する$('#box')CSSと同じセレクタ記法
テキスト変更$('#box').text('こんにちは');.html() もあり
CSSを変更$('#box').css('color', 'red');オブジェクトでも指定可
クラスを追加・削除.addClass('dark') / .removeClass('dark').toggleClass() も便利
イベントを設定する$('#btn').on('click', function() { ... });アロー関数もOK
要素をフェード表示.fadeIn() / .fadeOut().fadeToggle() もあり
スライド表示.slideUp() / .slideDown().slideToggle() もあり
  • jQueryでは、$ は「jQueryの関数」であることを表します
  • JavaScriptとjQueryの書き方を比べて覚えるのがオススメです
  • 実務では「jQueryで書かれたコードを読み書きできる力」がまだ求められます

背景を変更するボタンを作成

JavaScriptで作成した場合

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

<head>
    <meta charset="UTF-8">
    <title>JavaScriptで背景色を変える</title>
    <style>
        body {
            font-family: sans-serif;
            transition: background 0.3s;
            margin: 0;
            padding: 2rem;
        }

        button {
            padding: 10px 20px;
            margin-right: 10px;
            font-size: 1rem;
            cursor: pointer;
        }

        .black {
            background-color: #000;
            color: #fff;
        }

        .white {
            background-color: #fff;
            color: #000;
        }
    </style>
</head>

<body class="white">
    <h1>背景色を切り替えてみよう</h1>
    <button id="js-black">黒背景</button>
    <button id="js-white">白背景</button>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const jsBlack = document.querySelector('#js-black');
            const jsWhite = document.querySelector('#js-white');

            jsBlack.addEventListener('click', () => {
                document.body.classList.remove('white');
                document.body.classList.add('black');
            });

            jsWhite.addEventListener('click', () => {
                document.body.classList.remove('black');
                document.body.classList.add('white');
            });
        });

    </script>
</body>

</html>

document.addEventListener(‘DOMContentLoaded’, () => {…});

  • このコードは「HTML（DOM）の読み込みが完了したら、指定した処理を実行する」という意味です。
  • JavaScriptをHTMLの <body> の下に書けば省略できる場合もありますが、特にファイルを分ける場合や、HTMLの上にスクリプトを書くときはこの書き方をしておくと安全です。
  • jQueryでは $(function() {...}) が同じ役割をしています。
  • 画像のサイズを取得したり、背景画像が関わるようなものであれば load が必要になりますが、
    CSSクラスの切り替えだけなら、HTMLと同時に読み込まれているCSSで十分なので、DOMContentLoadedとなります。

DOMContentLoaded と load の違い

イベント名発火のタイミング説明
DOMContentLoadedHTMLの解析が完了した直後外部CSSや画像の読み込みを待たずに実行される
loadページ内のすべてのリソースが読み込み完了後画像・CSS・iframe なども含めすべて完了後で、画像のサイズ取得や、画像の存在が必須な場合
// DOMContentLoaded：HTMLの構造が読み込まれた時点で実行される
document.addEventListener('DOMContentLoaded', () => {
  console.log('HTMLの読み込み完了！');
});

// load：画像などすべてのリソースが読み込まれた後に実行される
window.addEventListener('load', () => {
  console.log('ページ全体の読み込み完了！');
});

jQueryで作成した場合

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

<head>
    <meta charset="UTF-8">
    <title>jQueryで背景色を変える</title>
    <style>
        body {
            font-family: sans-serif;
            transition: background 0.3s;
            margin: 0;
            padding: 2rem;
        }

        button {
            padding: 10px 20px;
            margin-right: 10px;
            font-size: 1rem;
            cursor: pointer;
        }

        .black {
            background-color: #000;
            color: #fff;
        }

        .white {
            background-color: #fff;
            color: #000;
        }
    </style>
</head>

<body class="white">
    <h1>背景色を切り替えてみよう（jQuery）</h1>
    <button id="jq-black">黒背景</button>
    <button id="jq-white">白背景</button>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(function () {
            $('#jq-black').on('click', () => {
                $('body').removeClass('white').addClass('black');
            });

            $('#jq-white').on('click', () => {
                $('body').removeClass('black').addClass('white');
            });
        });
    </script>
</body>

</html>

jQueryのライブラリ「Slick.js」

公式サイト：https://kenwheeler.github.io/slick/

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

<head>
    <meta charset="UTF-8">
    <title>Slickでカルーセルスライダー</title>
    <!-- Slickの基本CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />

    <!-- SlickのテーマCSS（←これが矢印・ドットの装飾用） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

    <style>
        body {
            font-family: sans-serif;
            padding: 2rem;
            background: #181818;
        }

        h1 {
            text-align: center;
            color: #fff;
        }

        .slider {
            width: 80%;
            margin: 0 auto;
        }

        .slider img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>

<body>

    <h1>jQuery + Slick でカルーセル</h1>

    <div class="slider">
        <div><img src="https://picsum.photos/id/100/800/400" alt="1枚目"></div>
        <div><img src="https://picsum.photos/id/200/800/400" alt="2枚目"></div>
        <div><img src="https://picsum.photos/id/300/800/400" alt="3枚目"></div>
    </div>

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- Slick CDN -->
    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

    <script>
        $(function () {
            $('.slider').slick({
                autoplay: true,
                autoplaySpeed: 3000,
                dots: true,
                arrows: true
            });
        });
    </script>

</body>

</html>

jQueryモーダルウィンドウ

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

<head>
    <meta charset="UTF-8">
    <title>Modaalでモーダルを表示しよう</title>

    <!-- ModaalのCSS（unpkgから取得） -->
    <link rel="stylesheet" href="https://unpkg.com/modaal@0.4.4/dist/css/modaal.min.css">

    <style>
        body {
            font-family: sans-serif;
            padding: 2rem;
            background: #f9f9f9;
        }

        .open-modal {
            display: inline-block;
            padding: 10px 20px;
            background: #007bff;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .modal-inner {
            text-align: center;
        }

        .modal-inner img {
            max-width: 100%;
            height: auto;
            margin-top: 1rem;
            border-radius: 8px;
        }
    </style>
</head>

<body>

    <h1>jQuery + Modaalでモーダルウィンドウ</h1>

    <!-- モーダルを開くリンク -->
    <a href="#modal-content" class="open-modal js-modaal">モーダルを開く</a>

    <!-- モーダルの中身 -->
    <div id="modal-content" style="display:none;">
        <div class="modal-inner">
            <p>これはModaalを使ったモーダルウィンドウです！</p>
            <img src="https://picsum.photos/id/1015/500/300" alt="画像">
        </div>
    </div>

    <!-- jQuery + Modaal -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://unpkg.com/modaal@0.4.4/dist/js/modaal.min.js"></script>

    <script>
        $(function () {
            $('.js-modaal').modaal({
                type: 'inline',
                overlay_close: true,
                accessible_title: 'モーダルウィンドウ',
                hide_close: false,
                width: 500,
            });
        });
    </script>

</body>

</html>