jQueryプラグインを作ってよく使うコードをコピペ可能にする

景山剛志

10年 ago

こんにちは。景山がお送りします。

サイトの作成をしていると、どのサイトでも必ず使う機能が出てきます。
しかし、サイトの構造が違うために改変が必要であったりと工数を消費してしまうこともしばしば…

そこで、本日は「ページトップに戻る」機能を例に、jQueryプラグインを用いて最小限の変更で使い回すコードを作る方法を紹介します。

まずは、一般的なページトップへ戻る（以後、ページトップ）コードの最もシンプルな例。
※ページトップは、スクロール量を常に取得するので取得するタイミングを制御しないとページに負荷をかけてしまうのですが、今回は使いまわせる部分の話に重点を置きたいので最もシンプルなコードで解説します。
【html】

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページトップ</title>
</head>
<body>
    <div id="pageTop"><a href="#"><i class="fa fa-3x fa-arrow-circle-up"></i></a></div>
</body>
</html>

【css】

body {
  height: 2000px;
  position: relative; }

p {
  width: 800px;
  margin: 0 auto; }

div {
  position: fixed;
  display: none;
  right: 50px;
  bottom: 50px; }
  div a {
    color: #008b8b;
    display: block; }

【JS】

$(document).ready(function(){
    var pageTop = $('#pageTop');
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            pageTop.fadeIn();
        }else{
            pageTop.fadeOut();
        }
    });
    pageTop.click(function(){
        $('html,body').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

【サンプル】
htmlのコードにダミーテキストを追加しています。

See the Pen YqqOER by straysheep (@straysheep-kage3) on CodePen.0

と、このようにページトップの機能は比較的容易に追加することができるのですが…
htmlで使用している「＃pagetop」やスクロールのスピードを変更したくなった場合、
htmlファイルと、JSファイルの両方を変更しなければなりません。
デザインの変更が必要な場合は、CSSファイルの変更は必須ですが変更箇所は少なくしたいもの。
そこで、JSの記述は変更せずに引数として変更箇所の値を与えてやる手法をとります。
その為には、ページトップの機能を細かく見る必要があります。

【ページトップの機能】
①スクロール値が一定の値になる、ならないで要素を表示・非表示させる
②ページトップボタンをクリックでトップへスクロールさせる

この二つの機能をもっています。

まずは、ページトップの機能を分割します。
【先ほどのJSファイル】

$(document).ready(function(){
//①表示・非表示の設定
    var pageTop = $('.pageTop');
    $(window).scroll(function(){
        if($(this).scrollTop() > 100){
            pageTop.fadeIn();
        }else{
            pageTop.fadeOut();
        }
    });

//②クリックしたら、ページトップに戻る設定
    pageTop.click(function(){
        $('html,body').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

こちらのコードを、以下の用に変更します。

// 下記のセミコロンは、他のライブラリのセミコロン忘れを防ぐ為に記述（不要であればとっても構わない。
//この記述は即時関数と呼ばれるもので、他のライブラリに影響を与えないために用いる記述
/*(function($){
    この中に、プラグインのメソッドを記述
})(jQuery);*/

// ①表示・非表示の設定
;(function($){
    // $.fn.プラグイン名 =
    // function(引数1,引数2 ){}
    // $targetは#pageTop。要は表示させたい要素によって変化させれる
    $.fn.showAndhide = function($target,param){
        $(window).scroll(function(){
            var scrollTop = $(this).scrollTop();
            // 引数2で与えた値よりスクロール値が大きくなったら
            if( scrollTop > param){
                $target.fadeIn();
            }
            else{
                $target.fadeOut();
            }
        });
    }
})(jQuery);


// ②ページトップの設定
;(function($){
    // 引数1(この場合はspeedという名前を与えている)
    $.fn.scrollTopEvent = function(speed){
        $(this).click(function(){
            // 引数speedの値が代入される
            $('html,body').animate({ scrollTop: 0}, speed);
            return false;
        });
    }
})(jQuery);

ページトップのJSファイルは、このコードをコピペで使用可能です。
また、変更も不要です。
あとは、htmlファイルにてjsファイルの呼び出しと、引数を与えてやればどのようなサイトでも使いまわせるコードとなります。
【htmlに用いる記述】

    <!-- jQueryの読み込み-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!--先ほど作成したjsファイルの読み込み-->
    <script src="script.js" charset="utf-8"></script>
    <!--ここに、先ほどのjsで使う引数を与えてやる-->
    <script type="text/javascript">
        $(function(){
            $(window).showAndhide($("#pageTop"),1000);
        });

        $(function(){
            $('#pageTop a').scrollTopEvent(1000);
        });
    </script>
</body>
</html>

【まとめ】
htmlファイルに記述している8行目と12行目
ここにプラグイン名を記述する（自由なネーミング）
引数に要素や、数値を記入
jsファイルにもプラグイン用の記述を用いて、自作プラグイン名で記述してやる

完成サンプルが以下です。

See the Pen pyyxRp by straysheep (@straysheep-kage3) on CodePen.0

よければ、EDIT ON CODEPENからhtmlファイルの値をいじってみてください。簡単に変更が可能です。

jQueryプラグインの使い方がわかれば、サイトでよく使うコードをストックしておきプログラムがわからない方でも非常に簡単に設定ファイルを書き換える事ができるはずです。

是非、ステップアップに活用してみてください。
以上です。