jqueryにメソッド（関数）を追加する方法

luck

4年前

jqueryで独自の関数を書くときに外部ファイルにまとめたい場合に、jqueryに独自関数を追加した方が便利です。

独自関数の追加方法、独自関数を追加した方が便利な点について見ていきます。

jqueryに独自関数を追加する方法

追加方法はとても簡単で「$.extend」を使えばOKです。

<script>
jQuery(document).ready(function($){
  $.extend({
    /*----------------------------------------------------
    関数を追加
    ----------------------------------------------------*/
    myfunction: function () {
      // ここに処理を書きます
    },
  });
});
</script>

書き方は上記のとおりですが、「$.extend({～～～});」この～～～の部分に追加する関数を書きます。

関数の書き方は「関数名: function () {～～～}」通常の関数とは違い、関数名が前にきて、「:」で「function()」という形です。

引数がある場合

<script>
jQuery(document).ready(function($){
  $.extend({
    /*----------------------------------------------------
    関数（引数あり）を追加
    ----------------------------------------------------*/
    myfunction2: function (arg1, arg2) {
      // ここに処理を書きます
       console.log(arg1);
       console.log(arg2);
    },
  });
});
</script>

書き方は引数無しとほとんど同じで、「function(arg1, arg2) {」functionのカッコ内に引数を書き足すだけでOKです。こちらは通常の関数と同じですね。

複数関数を追加する方法

こちらも簡単で、「,」で繋いで書くだけです。

<script>
jQuery(document).ready(function($){
  $.extend({
    /*----------------------------------------------------
    関数を追加
    ----------------------------------------------------*/
    myfunction: function () {
      // ここに処理を書きます
    }, // 「,」カンマで繋ぐだけ
    /*----------------------------------------------------
    関数（引数あり）を追加
    ----------------------------------------------------*/
    myfunction2: function (arg1, arg2) {
      // ここに処理を書きます
      console.log(arg1);
      console.log(arg2);
    },
  });
});
</script>

追加した関数の使い方

<script>
jQuery(document).ready(function($){
  $.extend({
    /*----------------------------------------------------
    関数を追加
    ----------------------------------------------------*/
    myfunction: function () {
      // ここに処理を書きます
    },
  });
  $.myfunction();
});
</script>

使い方も簡単で「$.関数名」という形で使えます。通常の関数の頭に「$.」を付けるだけでOKです。

便利な点

便利な点について、具体例を挙げて確認します。

「common.js」という外部JSファイルに下記のように関数が２つ記述されています。

「myfunction_normal」は通常の関数、「myfunction_jquery」はjqueryに追加した関数です。

// common.js
jQuery(document).ready(function($){
  function myfunction_normal () {
    console.log('通常の関数です');
  }
  $.extend({
    /*----------------------------------------------------
    関数（引数あり）を追加
    ----------------------------------------------------*/
    myfunction_jquery: function () {
       console.log('jqueryに追加した関数です');
    },
  });
});

次に、「index.html」で「common.js」を読み込んで、それぞれ関数を使ってみると

// index.html
<script src="common.js"></script>
<script>
jQuery(document).ready(function($){
  myfunction_normal(); // 「関数がない」というエラーになる
  $.myfunction_jquery(); // 関数を正常に使える
});
</script>

通常の関数が定義されていないというエラーになりますが、jqueryに追加した方の関数は正常に使うことができます。

つまり、jqueryに関数を追加しておくと、外部JSで必要な関数をまとめて定義することができますし、上手に使えばメンテナンスもしやすくなります。

まとめ

「$.extend」を使えば簡単にjqeuryに関数を追加できる
外部JSにまとめて定義しやすい
メンテナンスしやすくなる

jqueryに関数を追加する方法は簡単な上、便利です。存在だけでも覚えてみてはいかがでしょう。