jQueryの「$.fn.Hoge また $.Hoge」の文法の意味がよくわかりません。


前者の$.fn.Hogeについてはプラグイン(がどういうものが学習しきれていませんが)ということでいいと思うのですが、
http://phpjavascriptroom.com/?t=ajax&p=jquery_plugin

後者の$.Hogeについてはどういうことをしているものなのかが調べても分かりませんでした。使い方としては以下のような記述になっていました。
$.Hoge = function(a, b){}

jQueryは
$("セレクタ").メソッド
のように$にセレクタを与えるのが基本と思うのですが、$.**という書式は何を表すのか分かりません・・

ご教授頂けると嬉しいです。
よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/02/06 22:40:03

ベストアンサー

id:TransFreeBSD No.1

回答回数668ベストアンサー獲得回数268

それらはjQueryの用法ですが、文法としてはjavascriptの基本的な文法にすぎません。

javascriptにおいて"$"は変数名や関数名などに使える単なる識別子にすぎません。
「a=1」「b=2」などと同じように「$=3」と出来るだけです。

jQueryにおいて"$"は関数です。
javascriptにおいて関数はオブジェクトでもあります。すなわちプロパティやメソッドなどのメンバを持てます。有名なところでコンストラクタの"prototype"がありますが、それ以外にも自由に持てます。
jQueryの"$"はユーティリティ的ないくつかのプロパティやメソッドを持ちます。
http://semooh.jp/jquery/api/utilities/
言ってみれば静的メソッドや静的変数のように使用されています。プラグインがそれらを拡張することもあるでしょう。

jQueryにおいて"$"を関数として呼び出す(「$("セレクタ")」など)とjQueryのオブジェクトを返します。
この時のjQueryオブジェクトのコンストラクタのprototypeプロパティは"$.fn"です。
つまり、jQueryオブジェクトは"$.fn"を継承しています。したがって"$.fn.Hoge"メソッドを作れば、jQueryオブジェクトに継承され、すべてのjQueryオブジェクトにHogeメソッドができます。
プラグインはこのようにして"$.fn"を拡張することでjQueryオブジェクトを拡張できます。

他2件のコメントを見る
id:koime_ryokutya

回答ありがとうございます。
うーん、ちょっと今の自分の知識では理解しきれないのですが、回答の中のキーワードをいくつか拾いつつ調べてみます。
ありがとうございます。

2013/02/02 01:06:15
id:koime_ryokutya

皆様、丁寧な回答ありがとうございました。
自分で調べただけではなかなか理解が進まなかったとおもいます。
まだきちんと理解はしきれていませんが、理解に必要な事柄は教えていただけたとおもいますので、さらに学習を進めます。

2013/02/06 23:05:26

その他の回答2件)

id:TransFreeBSD No.1

回答回数668ベストアンサー獲得回数268ここでベストアンサー

それらはjQueryの用法ですが、文法としてはjavascriptの基本的な文法にすぎません。

javascriptにおいて"$"は変数名や関数名などに使える単なる識別子にすぎません。
「a=1」「b=2」などと同じように「$=3」と出来るだけです。

jQueryにおいて"$"は関数です。
javascriptにおいて関数はオブジェクトでもあります。すなわちプロパティやメソッドなどのメンバを持てます。有名なところでコンストラクタの"prototype"がありますが、それ以外にも自由に持てます。
jQueryの"$"はユーティリティ的ないくつかのプロパティやメソッドを持ちます。
http://semooh.jp/jquery/api/utilities/
言ってみれば静的メソッドや静的変数のように使用されています。プラグインがそれらを拡張することもあるでしょう。

jQueryにおいて"$"を関数として呼び出す(「$("セレクタ")」など)とjQueryのオブジェクトを返します。
この時のjQueryオブジェクトのコンストラクタのprototypeプロパティは"$.fn"です。
つまり、jQueryオブジェクトは"$.fn"を継承しています。したがって"$.fn.Hoge"メソッドを作れば、jQueryオブジェクトに継承され、すべてのjQueryオブジェクトにHogeメソッドができます。
プラグインはこのようにして"$.fn"を拡張することでjQueryオブジェクトを拡張できます。

他2件のコメントを見る
id:koime_ryokutya

回答ありがとうございます。
うーん、ちょっと今の自分の知識では理解しきれないのですが、回答の中のキーワードをいくつか拾いつつ調べてみます。
ありがとうございます。

2013/02/02 01:06:15
id:koime_ryokutya

皆様、丁寧な回答ありがとうございました。
自分で調べただけではなかなか理解が進まなかったとおもいます。
まだきちんと理解はしきれていませんが、理解に必要な事柄は教えていただけたとおもいますので、さらに学習を進めます。

2013/02/06 23:05:26
id:a-kuma3 No.2

回答回数4969ベストアンサー獲得回数2152

ごめんなさい、ぼくが余計なコメントを入れたものだから、混乱させてしまったのかも。

$.fn.Hoge

質問に書かれているように、jQuery に対して、機能を追加したいときに使います。
jQuery には、大きく分けて、幾つかの機能がありますが、大部分は、Selector を使って、ある要素の挙動を指定するものだと思います(プラグインを含めて)。

$("なんとか").Hoge(...) というような形式で、自分が作った処理を jQuery っぽい形で追加したいなあ、というときの書き方です。

$.Hoge

この形式で書かれているものを見たことが無いので、何とも言えないのですが、Hoge という関数が別に使われているかもしれない、でも、自分でその名前の関数を作りたい、というときに、使うかもしれない、という書き方なのかも。
ただ、そのようなことを考慮するなら、「別にもっと良い方法があるので、そっちの方が良いんじゃない?」というのが、TransFreeBSD さんが回答のコメントで書いている

(function($){
    ...
})(jQuery);

という書き方です。


$.Hoge = ... という書き方をしている例を提示してもらえれば、もうちょっと具体的なことが書けるのかもしれません(TransFreeBSD さんが?)。

他3件のコメントを見る
id:TransFreeBSD

逆ですね。
処理の実体は$.jCalにあって、プラグイン($.fn.jCal)はそれを呼び出しているだけ、という作りです。
何でそうなってるのかな?と思ったのですが、$.jCalの方は$.jCal("#hoge")とか、普通のDOMエレメント(getElementByIdとかで得られるやつ)とかも渡せるようになってるっぽい。
#jQueryの$()の機能なんですけどね
元々なんか作ったときのサブルーチンだったのを、ちょっと修正してプラグイン化したのかも。
サブルーチン的にもプラグイン的にも、どっちでも使えるよ、っていう程度の事の気がします。

2013/02/03 10:28:46
id:a-kuma3

元々なんか作ったときのサブルーチンだったのを、ちょっと修正してプラグイン化したのかも。

同感。
svn での 0.1 を見ても、その辺りの作りは一緒ですね。

(function($) {
	$.fn.jCal = function (opt) {
		$.jCal(this, opt);
		return this;
	};
	$.jCal = function (target, opt) {
		opt = $.extend({
	...

のくだりは、以下のように無名のまま呼び出すのと変わらないです。

(function($) {
	$.fn.jCal = function (opt) {
		(function(target, opt) {
			opt = $.extend({
			...
		})(this, opt);
		return this;
	};


0.1 のソースを見てもらうと分かるのですが、drawCal() の中で、click イベントの処理で、$.jCal() を呼び出しているので、グローバルなスコープを持つ関数としておきたくて、でも、名前空間を汚したくないという意識が働いて、$ のメンバにしたのかも。
# その辺りも、クロージャで解決できますが。

で、最初の名残が、今も残っている、ということじゃないでしょうか。

2013/02/03 11:35:53
id:think49 No.3

回答回数7ベストアンサー獲得回数2

jQuery.hoge は単純な静的関数でそれ以上の意味はありません。
http://api.jquery.com/category/utilities/

jQuery では jQuery と $ は同じ意味を持ちます。
関数名は小文字から始まる規則なので、この例で存在しうるコードは下記になると思います。

jQuery.hoge = function (a, b) { ; };

$にセレクタを与えるのが基本と思うのですが、$.**という書式は何を表すのか分かりません・・


仰るように jQuery はセレクタを扱う関数が多くありますが、セレクタを使わない機能を加えようとしたらどうなるでしょう。
セレクタを扱うとはつまり、DOMに対して関数を機能させる場合です。
では、DOMに関係しない機能を加えるとしたら?

例えば、jQuery.inArray() は引数がArrayオブジェクトか否かを判定しますが、そこにDOMは関与していません。
ですので、jQuery.inArray のように定義されています。
http://api.jquery.com/jQuery.inArray/

jQuery.inArray('hoge'); // false

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません