このエントリーをはてなブックマークに追加

読了: 約 4 分

JavaScriptを勉強し始めて、簡単な音楽アプリをつくってみたのですが、
ほかにも何かしたいなぁと漠然と思っていてプラグインを作りたくなったので
作成法など備忘録的にメモしておきます。

目的

大体備忘録的な感じで書いている事が多いのですが、備忘録としても
何かの目的 ⇒ メモという行動 だと思いますのでアウトプットを具体的にしておこうと思います。

  • jQueryプラグインの作成方法
  • コーディング作業効率化
  • 保守性の高いコードの保有

目次

jQuery: jQueryプラグインの仕組み

特に難しいルールや構造はなく、
プラグインのコードのファイルの命名と、
特徴であるメソッドチェーンのため自身を返すこと。

jQuery.fn.プラグイン名 = function() {
    ...
}

jQuery.fnにメソッドを定義。

jqueryプラグインのサンプル

jQuery: jQueryプラグインのポイント

(function($){})(jQuery);で囲う

他のプラグインやJavaScriptと干渉し合わないように、全体を無名関数にしておきます。
色々なjQueryのプラグインを見ていると分かるかと思います。
逆に囲ってないものは囲ってあげて、記述を変えてあげる方が良いかと。

(function($){
  jQuery.fn.プラグイン名 = function() {
    ...
  }
})(jQuery);

ラッパー関数に jQuery キーワードを適用。
こうすることで、fn プロパティーを使用する場合のように、プラグインの中でドル記号を使用することができます。
ラッパー関数を用意できると、プラグインのどこででも、サードパーティーの他のプラグインを妨害することなく、jQuery キーワードの代わりにドル記号を使用できるようになります。

参考カスタムの jQuery プラグインを作成する

Authorコメントの書き方

なんとなくコメントがあった方がポいですよね。笑
こういう地味な所でも自分で作ったんだというやりがいをつくりつつ覚えていけたら良いですね!

/**
 * Created with Dreamweaver. (Dreamweaverは見た事がないのですが、作ったのはDWだったので)
 * User: ユーザー名
 * Date: 2012/11/25
 * License: The MIT License (MIT)
 * jquery animation
 */

jQuery: jQueryプラグインの簡単解説

デモとして簡単ですが、クリックしたらfadeOutするものです。

HTML
HTML側に下記を記述します。

$(function() {
	$('#button').fade({
		fadeSpeed: 1000,
		hideEl: '#textArea'
	});
});

jQuery

optionsを設定してdefault値を設定できます。
今回はfadeOutのspeedを1000として、
HTML側のid textAreaというものをフェードアウトしています。
targetのオブジェクトを上書きしないためにと次のように第1引数に{}空のオブジェクトを指定。
option オブジェクトは、$.fn.fade.defaultsoptions で拡張した結果のオブジェクト

その下で、この場合thisはHTML側の$("#button")を指しています。

(function($){
    $.fn.fade = function(options) {
	var option = $.extend({}, $.fn.fade.defaults, options);
	$(this).click(function(){
	  $(option.hideEl).fadeOut(option.fadeSpeed);
	});

      $.fn.fade.defaults = {
        fadeOut:1000,
	hideEl:'#textArea'
    };
  }
})(jQuery);

jQuery.extend
⇒jQueryオブジェクトそのものを拡張する。
jQuery.extend([deep], target, object1, [objectN])

参考;$.extend

参考

オブジェクト指向を勉強しておくとプラグインの作る際に理解しやすいと思います

JavaScriptのオブジェクト指向の書き方|jQuery入門5

作り方で参考になる

jQueryプラグイン作成法のまとめ

jQueryプラグインの作り方

とてもとても簡単な、jQueryプラグインのつくりかた。

http://d.hatena.ne.jp/sutara_lumpur/20090124/1232781879

IBM DeveloperWorks
カスタムの jQuery プラグインを作成する

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'