2021/01/24

【簡単】初心者でも分かるjQueryプラグインの使い方

本記事では、JavaScriptやjQueryの知識がない人でも、jQueryのプラグインを追加して機能実装する方法を解説します。jQueryやJavaScriptはページに動きをつけることができ、ホームページ制作ではほぼ必ず利用されています。

本記事を読むことによって、初心者でもjQueryプラグインの使い方がわかるようになり、使いたい機能の記事を読んだ時に、コピペでjQueryプラグインの実装ができるようになります。

本記事の内容

【簡単】初心者でも分かるjQueryプラグインの使い方
jQueryをWordPressに書く時の注意点
jQueryプラグインの探し方

【簡単】初心者でも分かるjQueryプラグインの使い方

この記事では、大まかな概要を理解して、実装したい機能を調べた時に記事に書いてあるコードをコピペすることで、jQueryプラグインを使えるレベルまで知識を習得できることを目的にしています。全くJavaScriptやjQueryが分からない人でも、簡単な機能なら実装可能になるのではないかと思います。最低限、HTMLの基礎知識はあるものとして進めます。

基本的には、WordPressのサイトに、jQueryの機能を使う場合を想定して説明しています。ここで紹介するのは、WordPressのプラグインではなく、jQuery(JavaScript)のプラグインなので、そこをごちゃごちゃにならないようご注意ください。

jQueryのプラグインの使い方は基本的にはすべて仕組みは同じ

jQueryのプラグインは、JavaScriptを使えるエンジニアがベースとなる機能を作ったものを他の人が使えるように公開しているものであり、ほとんどの場合はjQueryプラグインのファイルを読み込ませるだけで機能が使えるようになります。

jQueryプラグインの実装では、パターンがある

jQueryプラグインを使う場合には以下のコードを順番に書くだけです。

jQueryプラグインのCSSの読み込み
jQuery本体の読み込み
jQueryプラグインの読み込み
jQueryプラグインを使うための設定をJavaScriptで書く
指定されたclassやdata属性などをHTMLに追加する

Lightboxという画像をモーダルで表示するプラグインを実装する例を交えて説明します。Lightbox実装の完全なコードを見たい場合は、「【簡単】Lightboxで画像をモーダル表示【jQueryプラグイン実装】」の記事を参考にしてください。

jQueryプラグイン実装の基本手順

①jQueryプラグインのCSSの読み込み (headタグ内)

例)

<head>

【中略】

  <link rel="stylesheet" href="./script/lightbox/css/lightbox.min.css">

</head>

jQueryプラグインで付随するCSSファイルの読み込みが必要な場合は、<head>タグ内でCSSファイルを読み込ませるようにします。

②jQuery本体の読み込み

　- CDNから読み込み
　- ファイルをダウンロードして読み込み

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

jQueryの本体ファイルを読み込ませます。バージョンがありますが、基本的には<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>の記述で問題ないかと思います。ファイルをダウンロードして自分のサイト上に設置して読み込ませる方法もあります。

③jQueryプラグインの読み込み

　- CDNやサイトから読み込み
　- ファイルをダウンロードして読み込み

例) <script src="./script/lightbox/js/lightbox.min.js"></script>

プラグインファイルの読み込みです。CDNサイトから読み込ませることができるプラグインもありますが、基本的にはjQueryプラグインファイルをダウンロードしてから、自分のサイト上にそのファイルを設置して使うことが多いと思います。jQuery本体を読み込んでその後に実行しないといけないため、jQuery本体の読み込み後に記述します。

④jQueryプラグインを使うための設定をJavaScriptで書く

　- JavaScriptのファイルを用意してそこに書く
　- <script>タグで直接書く方法

例)
<script src="script/script.js"></script>
　
▼script/script.jsの中身

    lightbox.option({

      'resizeDuration': 200,

      'wrapAround': true

    })

※ちなみにLightboxの場合はこのオプションコードは記載しなくて動作するのでオプション指定しない時は不要です。

jQueryプラグインを使うための設定をjQueryやJavaScriptで書き込むことが必要なケースがあります。jQueryプラグインを読み込んだ後に書かないといけません。順序としては、「１.jQuery本体読み込み」 → 「2.jQueryプラグイン読み込み」 → 「3.設定を書くファイルを読み込み(もしくは直接scriptタグで書き込み)」の順で書く必要があります。

⑤指定されたclassやdata属性などをHTMLに追加する

例) Lightboxの場合は aタグにdata-lightbox属性(値は任意)をつけて、hrefに画像パスを設定すると機能する
<a href="【画像のURLパス】" data-lightbox="image-1">Image #1</a>

jQueryプラグインを読み込んだ後に、機能を実装・実行する場合は、プラグインで決められたclass名やdata属性を動作をさせたい要素に付与することが多いです。

プラグインや必要な機能によって不要な手順がある

①〜⑤のすべてが必要なわけではありません。例えばCSS読み込みが不要なプラグインなら①の記述は不要などです。

コードを書く位置

前述のコードを書く位置についてですが、
①のCSSは<head>タグ内に書き、
②〜④のスクリプトは通常はbody閉じタグ(</body>)の直前に記載します。

②〜④のスクリプトコードは２パターンの位置に書くことが可能

・headタグ内に書く方法
・bodyタグの閉じタグ直前に書く方法 → こっちの方が一般的

JavaScriptのコードはページの表示(レンダリング)を妨げる可能性があるため、通常はbody閉じタグの直前に書きます。ただしページの表示前にJavaScriptのコードを読み込ませたい場合はheadタグ内に書くこともあります(例えばページのローディングアニメーション等)。ケースバイケースであり判断には技術的な知見が必要ですが、ほとんどの場合はbody閉じタグの直前に書いておけば問題ないかと思います。

jQueryをWordPressに書く時の注意点

$って何？

jQueryでは、jQuery本体を読み込ませると、「$」や「jQuery」という文字列との組み合わせで、jQueryの機能が使えるようになります。

例えば「test」という名前のclassが付いた要素を取得したい場合は以下のように書きます。

$('.test')
jQuery('.test')

「jQuery」と書くのは文字列が長いので、読みやすさから「$」の方を使うことが一般的です。

たとえばこの「.test」要素がクリックされた時に処理を書く場合は以下のようになります。

▼HTML

<button class="test">ボタン</button>

▼jQuery

$('.test').on('click', function() {
  // ここに.test要素がクリックされた時の処理を書く
});

WordPressでは$の使い方に気をつける

WordPressでjQueryを使う場合は、「$」をそのまま使わないように注意が必要です。WordPress側で$の扱いが特殊なためです。
以下のような記述をするようにしましょう。

jQuery(function($) {
  // ここにスクリプトの処理を記述
});

詳細が知りたい場合は、「WordPressでjQueryの正しい使い方・書き方」の記事を参考にしてください。

jQueryプラグインの探し方

jQueryは歴史があるため、いろいろな機能のjQueryプラグインがたくさんあります。

「jQueryプラグイン【使いたい機能名】」で検索するといろいろなjQueryが見つかるのでおすすめです。例えば「jqueryプラグインスライダー」のような感じです。有名なプラグインだと以下のようなものがあります。

Lightbox

https://lokeshdhakar.com/projects/lightbox2/
既に例としても紹介しましたが、別記事でも詳しく解説しています。
基本的には、jQueryプラグインを読み込ませたら、指定のdata属性を付けるだけで動作させることができて手軽です。オプションを追加して動作を細かく指定することも可能です。

slick

https://kenwheeler.github.io/slick/
スライダーを実装できる有名なjQueryプラグインです。

jQueryのバージョンはできるだけ最新版を使う

jQueryには、大きく分けて1.x、2.x、3.xの３タイプのバージョンが存在します。バージョンが高いほど最新で、現在は3.x(v3.51)が最新です。

・基本は3.xの最新版を使う
・古いプラグインだと1.x、2.xのjQueryでしか動作しない場合がある

昔から存在するjQueryプラグインだと1.xのjQueryでしか動作しない場合がありますが、セキュリティ的にもあまり古いプラグインは使わない方がいいですし、3.xのjQueryで動作するプラグインを使うようにしましょう。WordPressでも以前は1.xのプラグインがデフォルトでバンドルされていましたが、最近ではWordPress5.6からはデフォルトで3.xのjQueryがバンドルされるようになったりしています。

jQueryプラグインは数多く存在し、選別に迷うところだと思いますが、人気の古いプラグインと最新の無名の人が作ったプラグインだと、人気の古いプラグインの方がいいかもしれないです。誰が作ったのかは結構重要です。

ちなみにクライアントに納品する時に使うプラグインの場合、僕は基本的にはソースコードをざっくり見るようにしています。ただ誰もが知っているような有名プラグインならこのあたりの確認は不要かもしれません。

まとめ

jQueryプラグインの使い方について解説しました。

jQueryを使うための基本的な手順

jQueryプラグインのCSSの読み込み
jQuery本体の読み込み
jQueryプラグインの読み込み
jQueryプラグインを使うための設定をJavaScriptで書く
指定されたclassやdata属性などをHTMLに追加する

ご参考になれば幸いです。

JavaScript jQuery プラグイン

※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています

【簡単】初心者でも分かるjQueryプラグインの使い方

【簡単】初心者でも分かるjQueryプラグインの使い方

jQueryプラグインの実装では、パターンがある

コードを書く位置

jQueryをWordPressに書く時の注意点

$って何？

WordPressでは$の使い方に気をつける

jQueryプラグインの探し方

jQueryのバージョンはできるだけ最新版を使う

まとめ

RELATED