jQueryのプラグインとは

jQueryプラグインとは？

jQueryプラグインとは、jQueryと一緒に利用するJvaScriptライブラリーのことです。これを利用すれば、複雑な記述をせずとも様々な効果をWebサイトに与えることができます。

プラグイン利用の手順はおおまかに3ステップです。

今回はスクロールに応じて要素がフェードイン/フェードアウトするfadethisというプラグインを使用します。

遷移した先のページで「Clone or download」をクリックしzipファイルをダウンロードします。

ダウンロードしたファイルを開きdistフォルダー内の「jquery.fadethis.min」ファイルをコピーします。

ご自身の実装したいプラグインのダウンロードは、「実装したい機能+jQuery+プラグイン」のようにGoogleで検索してみましょう。

先ほどコピーした「jquery.fadethis.min」ファイルをjQuery本体と同じフォルダに保存します。

htmlファイルに記述したjQuery本体の読み込み、<script src="js/jquery-3.3.1.min.js"><script>の下に<script src="js/jquery.fadethis.min.js"><script>と追記します。

必要なscriptをbodyの閉じタグ直前に記述し、動かしたい要素にfadethisで指定されたクラス名をつけるだけで動きます。

このfadethisでは別ファイルは必要ありませんが、プラグインによっては、プラグイン読み込み後、別ファイルに簡単な処理を記述して動かす場合があります。その際は新たにjsファイルを作成し、<script src=""><script>で読み込みましょう。

ほとんどのプラグインはダウンロード元のどこかに使い方が書いてあります。しかし英語での説明が多く環境によっては思うように動かないことも多々あるので、使いやすくわかりやすいプラグインを見つけ出す検索力が重要です。

また、多様しすぎると読み込み遅延やブラウザによっては動かないなどの問題がありますので、計画的に利用しましょう。