こんにちは！いちくんです！

みなさん、Web制作でjQuery使ったことありますよね？

jQueryはめちゃくちゃ便利です！（オワコンとか言ってる人は無視でOK）

例えば以下のようなコードを書けばpタグのcolorは赤になりますよね

$('p').css('color','red');

または以下のように書けば、pタグのdisplayをnoneにできます。

$('p').hide();

さて、今見ていただいた.css()とか.hide()はjQueyにデフォルトで備わっているメソッドです。

実はこれ、自作できるんです！！！！

今回は、このようなメソッドを自作してみようという回です。

それでは早速作っていきましょう！

※jQueryを触ったことがある人を対象としています。
ゆえに、jQueryオブジェクトがなんぞやとかは説明していません。。

HTML

まずは適当にHTMLを書きます。（ほんとテキトーです）

<p class="text">
あいうえお
</p>

お次はjQueryを書きます。

jQuery

(function($){

 $.fn.changeColorRed = function(){
 var $this = this;
 $this.css('color','red');
 };

$('.text').changeColorRed();
 
 
})(jQuery);

ひとつずつ解説していきます。

まず、コード全体を以下のようなもので囲んでいます。

(function($){

    //ここにjQueryのコードを書きます

})(jQuery);

このような書き方をするには理由があります。

こう書かないと、WordPressでjQueryを使うときにエラーになってしまうからです。

WordPressを使わない案件でもこのように書いておく癖をつけておきましょう！

詳しくは以下の記事や、WordPressの公式ドキュメントを読んでみると良いでしょう。

続いて以下を書きます。

(function($){
 $.fn.changeColorRed = function(){
 
//ここにプラグインの内容を書きます。

})(jQuery);

以下で、$.fn.changeColorRedがなにをしているかの説明を
参考URLをもとに書きましたが、難易度高めなので読み飛ばしてOKです笑

jQueryにおいて"$"を関数として呼び出す（「$("セレクタ")」など）とjQueryのオブジェクトを返します。
この時のjQueryオブジェクトのコンストラクタのprototypeプロパティは"$.fn"です。
つまり、jQueryオブジェクトは"$.fn"を継承しています。したがって"$.fn.changeColorRed"メソッドを作れば、jQueryオブジェクトに継承され、すべてのjQueryオブジェクトにchangeColorRedメソッドができます。
参考:https://q.hatena.ne.jp/1359552909

続いて、コメントの「ここにプラグインの内容を書きます。」に処理内容を書いていきます。

処理内容ですが、今回は要素のcolorをredにするようなchangeColorRedメソッドを作成しましょう。

具体的には以下のように書きます。

(function($){

 $.fn.changeColorRed = function(){
 //ここにプラグインの内容を書きます。
 // "this"はすでにjQueryオブジェクト
 var $this = this;
 $this.css('color','red');
 };
 
 
})(jQuery);

作成したchangeColorRedメソッドを実行してみます。

(function($){

 $.fn.changeColorRed = function(){
 //ここにプラグインの内容を書きます。
 // "this"はすでにjQueryオブジェクト
 var $this = this;
 $this.css('color','red');
 };

//実行！
$('.text').changeColorRed();
 
 
})(jQuery);

これで以下のようにcolorがredになりましたね！

すこし説明すると以下のようなイメージです。

多分この図だけでthisのイメージが伝わるかな〜と思います笑

まとめ

自作メソッド、以外に簡単に作れましたね！

別に.cssメソッドがすでにあるからこんなことする意味あんの？
って思うかもしれませんが、一応メリットはあります。

メリット　
１.メソッドを見ただけで何をしてるかすぐわかる
２.修正したい場合にすぐ修正できる　　
３.いろんなとこで使いまわせる

こんな感じですね。

今回は初級編なのであまりメリットを感じないかもしれません笑
次はもう少し難しい実用性のある独自メソッドをつくっていく内容にしたいと思いますので乞うご期待！

ここまで読んでいただきありがとうございました。