jQueryプラグインを使ってみたいけれど、「どのファイルを読み込むのか」「なぜ動かないのか」が分からず困ることがありますよね。
jQueryプラグインは、jQuery本体へスライダーやモーダルなどの機能を追加するJavaScriptです。基本の順番は「jQuery本体→プラグイン本体→初期化コード」です。
この記事では、プラグインの意味、選び方、ファイルの読み込み順、初期化方法、オプション設定、動かないときの確認方法まで、実際に動く小さなプラグインを使って解説します。
jQueryプラグインとは
プラグインとは、jQueryへ新しい機能を追加するプログラムです。例えば、画像スライダー、入力チェック、モーダル、並べ替えなどを、短い初期化コードで利用できるようにします。
jQuery公式の解説では、プラグインは$.fnへメソッドを追加し、jQueryで選択した要素から呼び出せる仕組みとして説明されています。詳しい仕組みはjQuery Learning CenterのPluginsで確認できます。
プラグインを使うと実装時間を短縮できますが、jQuery本体とは別のプログラムです。対応するjQueryのバージョン、ライセンス、更新状況を確認してから導入してください。
プラグインを選ぶ前に確認すること
- 公式サイトやGitHubに導入手順と動作デモがあるか
- 利用中のjQueryやブラウザに対応しているか
- 最終リリースやIssueへの対応が止まっていないか
- 商用サイトで利用できるライセンスか
- スマートフォン、キーボード、スクリーンリーダーでも操作できるか
- 必要以上に大きなCSSやJavaScriptを読み込まないか
旧jQuery Plugin Registryは現在、過去情報を残す静的アーカイブです。同サイトも掲載版の利用を推奨せず、npmで探すよう案内しています。古い一覧だけで決めず、配布元のGitHubやnpmで現在の状態を確認しましょう。
jQueryプラグインを使う基本手順
- 公式の配布元から必要なCSSとJavaScriptを入手する
- HTMLにプラグインを適用する要素を書く
- jQuery本体、プラグイン、初期化コードの順で読み込む
- 対象要素を選び、プラグインのメソッドを呼び出す
- ブラウザのコンソールとスマートフォン表示を確認する
今回は仕組みを理解しやすくするため、お知らせへ装飾と閉じる機能を追加するnoticeBox()という小さなサンプルプラグインを使います。
プラグイン適用前のHTMLを用意する
最初に、プラグインを適用するお知らせをindex.htmlへ記述します。
<div class="notice">
<h2>メンテナンスのお知らせ</h2>
<p>本日22時から短時間のメンテナンスを実施します。</p>
</div>プラグインをまだ実行していないため、通常のHTMLとして表示されます。
プラグイン本体を作成する
jquery.notice-box.jsを作り、次のコードを記述します。実際に配布されているプラグインを使う場合は、自作せず配布元のファイルを配置してください。
(function ($) {
$.fn.noticeBox = function (options) {
const settings = $.extend({
color: '#2474b5',
closeLabel: '閉じる'
}, options);
return this.each(function () {
const $notice = $(this);
$notice
.addClass('notice-box')
.css('--notice-color', settings.color)
.append(
$('<button>', {
class: 'notice-box__close',
type: 'button',
'aria-label': settings.closeLabel,
text: '×'
})
);
$notice.find('.notice-box__close').on('click', function () {
$notice.fadeOut(200);
});
});
};
}(jQuery));$.fn.noticeBoxへ関数を設定することで、$('.notice').noticeBox()と呼び出せるようになります。return this.each(...)は、選択された複数要素へ処理し、jQueryのメソッドチェーンも保つ書き方です。
$.extend()では初期値と利用者が渡したオプションをまとめています。この基本形はjQuery公式のBasic Plugin Creationでも案内されています。
CSSで適用後の見た目を用意する
プラグインが追加するclassに合わせ、style.cssへ装飾を書きます。
.notice-box {
position: relative;
padding: 22px 58px 22px 22px;
border: 2px solid var(--notice-color);
border-radius: 14px;
background: #eaf5ff;
}
.notice-box__close {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: var(--notice-color);
color: #fff;
font-size: 20px;
cursor: pointer;
}jQuery・プラグイン・初期化コードを順番に読む
index.htmlのbody終了タグ直前で、3つのJavaScriptを次の順に読み込みます。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.notice-box.js"></script>
<script src="js/app.js"></script>プラグインはjQueryを利用するため、jQuery本体より後に読み込む必要があります。初期化コードは、プラグインのメソッドが使える状態になった後へ置きます。
初期化コードを書いて機能を有効にする
app.jsへ、対象要素とオプションを指定します。
jQuery(function ($) {
$('.notice').noticeBox({
color: '#2474b5',
closeLabel: 'お知らせを閉じる'
});
});実行すると、お知らせへ枠線と背景色、閉じるボタンが追加されます。閉じるボタンを押すとfadeOut()で非表示になります。
配布プラグインを導入するときのファイル構成
ダウンロードしたファイルを整理すると、読み込みパスの間違いを減らせます。例えば、次のようにCSSとJavaScriptを分けます。
project/
├── index.html
├── css/
│ ├── plugin.css
│ └── style.css
└── js/
├── jquery.min.js
├── jquery.plugin.min.js
└── app.js配布物にCSS、画像、フォントが含まれる場合は、公式ドキュメントの構成を保って配置してください。JavaScriptだけを移動すると、CSS内の画像パスが切れることがあります。
プラグインが動かないときの確認ポイント
読み込み順が違う
$ is not definedや$(...).プラグイン名 is not a functionと表示される場合は、jQuery本体、プラグイン、初期化コードの順番を確認します。
ファイルのパスが間違っている
開発者ツールのNetworkで404がないか確認してください。HTMLから見た相対位置に合わせて、srcとhrefを指定します。
対応バージョンが合っていない
古いプラグインは、現在利用しているjQueryで削除された機能へ依存している場合があります。配布元の対応表とIssueを確認し、必要なら別のプラグインを選びます。
同じjQueryを2回読み込んでいる
jQueryを重複して読み込むと、先に登録したプラグインが後のjQueryで上書きされることがあります。ページ内のjQueryは原則1つにしてください。
CSSを読み込んでいない
動作していても見た目が崩れる場合は、プラグイン付属のCSSやテーマCSSが必要か確認します。
jQuery本体を読み込む方法は、次の記事でCDNとローカル配置の両方を解説しています。
まとめ
- jQueryプラグインはjQueryへ機能を追加するプログラム
- 配布元の更新状況、対応バージョン、ライセンスを確認する
- jQuery本体→プラグイン→初期化コードの順に読み込む
- 付属CSSや画像も公式の手順どおりに配置する
- 動かないときはConsoleとNetworkを確認する
最初は公式デモと同じ最小構成で動作させ、その後にオプションやデザインを少しずつ変更すると原因を切り分けやすくなります。