jQueryの用語がわからない

jQuery初心者です。

仕事で簡単なゲームを制作することになり、
まずは、わからない用語を知ろうと思いネットを調べ回ったのですが、
いまいち理解できない用語がありました。

大変恐縮ですが、初心者の私でもわかるような説明はないでしょうか…。
可能であれば、記述のどの部分がその用語にあたるのかも知りたいです。
参考サイトなどでも構いませんので、ご教示頂けますと幸いです。

いまいち理解できていない用語と私の解釈

■オブジェクト
$('.A li').B() … 太文字部分がオブジェクト？

■プロパティ
$('.A li').css('color':'red'); … 太文字部分がプロパティ？

■引数と戻り値
function hoge(ここが引数？) {
//実行する処理
return ここが戻り値？;
}

行動規範の内容に同意します

回答3件

jQueryを深く知ろうと思うなら、まずはプログラミング言語であるJavaScriptについて学んでください。jQueryはJavaScriptのライブラリです。JavaScriptを知らなければ、jQueryを使いこなす事はできません。JavaScriptを知らなくても、やり方が載っているサイトや書籍のコードをコピペである程度の事はできますが、応用してオリジナルを作り込もうとする時点で壁にぶつかります。

オブジェクトもプロパティも引数も戻り値もJavaScriptの用語です。jQurey特有の用語ではありません。また多くのプログラミング言語でも同じ用語をほぼ同じ意味で用いています。

###オブジェクト
広義ではプログラミング言語において、一つのもの、または、まとまりとして扱うことができるあらゆる値(データ)のことを指します。しかし、JavaScriptでは__Objectタイプ(Object type)__である値(データ)のことを指します。以下、JavaScriptにおけるオブジェクトについて説明します。

JavaScriptには様々な値(データ)があります。undefined、null、真偽値(true, false)、数値(1、3.14等)、シンボル(Symbol('abc')等)、文字列('abc'等)はプリミティブタイプの値で、プリミティブ値と言われ、オブジェクトではありません。それ以外の、例えば、Object({a: 0}等)、関数(function(x){return x;}等)、配列([0, 1]等)はそれぞれ、Objectクラス、Functionクラス、Arrayクラスのインスタンスであるオブジェクトです。

※ JavaScriptはクラスベースではなく、プロトタイプベースです。そのため、__クラス__なるものがあるわけではありません。class構文は存在しますが、プロトタイプベースの糖衣構文に過ぎません。あるクラスのインスタンスというのは、厳密にはそれらのクラスである関数オブジェクトをコンストラクタとし、それらが持つprototypeを__proto__に設定されていることを示します(ES5以前の実装では__proto__があるとは限りません)。Object等はオブジェクトであり、コンストラクタとして使える関数であり、プロトタイプになるものなのですが、厳密な呼び方をすると複雑になるため、クラスベースのオブジェクト指向の流儀に則り、ここでは「クラス」と表現し、その「クラス」を雛形とするオブジェクトをその「クラス」の「インスタンス」と表現します。また、「直属のインスタンス」とはそのクラスを直属のプロトタイプとして持つことを示します。

Objectタイプである値をオブジェクトと言うのでは無かったのか？Objectクラスのインスタンス以外はObjectタイプじゃないのではないか？と思ったのかも知れません。いえいえ、オブジェクトと呼んでも問題ありません。なぜならプリミティブタイプを除く通常のクラスは全てはObjectクラスを継承しているからです(ECMAScript規定外のネイティブオブジェクトについてはその限りではありません)。FuncitonクラスもArrayクラスもObjectクラスを拡張したクラスに過ぎません。なのでFunctionクラスやArrayクラスのインスタンスは、同時に、Objectクラスのインスタンスでもあると見なすことができるのです。なので、これらをまとめて、Objectタイプとし、オブジェクトと読んでいるのです。

※ Object.create()等で作成したconstructorを持たないオブジェクトなど、例外的なオブジェクトも存在します。これらはObjectクラスのインスタンスではありませんが、Objectタイプであるためオブジェクトです。

jQueryも同じです。jQureyライブラリを使うとjQueryクラスというクラスが追加されます(jQueryは関数でもあります)。これもObjectクラスを継承しています。jQureyクラスのオブジェクトは$('.abc')等の書き方で作成できますが、これもObjectクラスのインスタンスとして性質を持っています。このようなjQueryクラスのオブジェクトを「jQueryオブジェクト」と呼ぶ場合があります。「オブジェクト＝jQueryオブジェクト」では決してありませんが、文脈によっては単に「オブジェクト」と言っている場合があるので注意が必要です(そのような書き方をしている書籍やサイトは、著者の知識が足りずにそのように言っている場合がありますので、参考にしないことをお勧めします)。

なお、Objectクラスの直属のインスタンス({}や{a: 1}等)を単に「オブジェクト」と呼んでいるJavaScriptの書籍やサイトもあります。英語ではこのような「Objectクラスのオブジェクト」のことを"Objects"(大文字、固有名詞扱い)と表現し、オブジェクトを"objects"(小文字、一般名詞扱い)と表現して分けているのですが、そのまま直訳してしまった場合が多いです。原書がある場合は、原書を参考にした方がいいでしょう。(この文章ではこの種類のオブジェクトを単にObjectと表現し、ObjectクラスそのものをさすオブジェクトはObjectと分けて表現しています。)

####補足
非常にややこしいことに、JavaScriptでは「オブジェクト(object/Object)」と呼ばれるものが複数存在します。

objects: 値(データ)の一種であるオブジェクト。
Object type: Objectタイプ(Object型)というtype(型)の一つ。他のtypeは全てプリミティブタイプです。ここでのtypeはJavaScript特有の定義があるため、注意が必要です。一般的な型とは異なりますし、TypeScriptの型とも一致しません。
Object constructor / Object objects: "Object"という名前(内部的には%Object%という名前)の組み込みオブジェクト(コンストラクタ)。Object({}等)のコンストラクタになる関数であり、プロトタイプです。また、Object自身がいくつかのプロパティを持ちます。上で「Objectクラス」と言っているそのクラスそのもの事です。
Object: 3.を指すグローバルオブジェクト(global object)のプロパティ。つまり、3.のJavaScriptのコード上での表現です。
Objects: 3.を直属の雛形とするオブジェクト。上で「Objectクラスの直属のインスタンス」のことです。
object initializer / object literal: 5.を作る初期化子/リテラル。

1.と6.以外は必ず大文字(固有名詞)で表現されます。

###プロパティ
JavaScriptのプロパティは先ほどのオブジェクトに深く関わります。全てのオブジェクトは名前が付いたプロパティなるものを持ち、それぞれ参照(get)と代入(set)ができます。

※ 配列(Array)は少し特殊なので注意が必要です。以下、配列の場合を除く説明です。

JavaScript
1var obj = {a: 0, b: 1};
2console.log(obj.a); // 参照、0 が表示
3obj.a = 2; // 代入、obj の a に 2 が代入される。
4console.log(obj.a); // 参照 2 が表示

なお、この動作はObject.defineProperty()等を使って細かく制限できるため、参照や代入が必ずしも参照という動作、代入という動作ではありません。プロパティは関数の場合もあります。()をつければ関数がそのまま評価(実行)されます。

JavaScript
1var obj = {a: function(x){console.log(x);}};
2obj.a(2); // obj の a が参照され、その関数が引数 2 で評価される。その結果、2 が表示される。

このようにオブジェクトの後に.をつけてプロパティの名前を書くことで参照できます。そのプロパティが関数であれば、()つけることで評価されるという仕組みです。jQueryオブジェクトも同様です。$('.A li').css({'color':'red'});は$('.A li')というjQueryオブジェクトのcssプロパティを参照し、それは関数なので、{'color':'red'}という引数で評価していると言うことです。

なお、プロパティは.演算子以外に[]演算子も使用できます。プロパティ名は任意の文字列をつけることができますが、.演算子で呼び出せる文字列には一部の記号が使えない等の制限があります。[]演算子では、その制限はありません。

JavaScript
1var obj = {'a.b': 1}; // '' で囲めば . などの記号も使える。
2console.log(obj.['a.b']); // 'a.b' というプロパティが参照され、結果、1 が表示される。
3console.log(obj.a.b); // 駄目な例。二つ目の . が演算子扱いになるため、上と同じようには動作しない。

おっと、もう一つ、Objectリテラルの話を忘れるところでした。上はプロパティに対するアクセス方法ですが、プロパティの定義方法はいくつか存在します。全てを書くととても長くなりますので、一般的なObjectリテラルの話だけします。

Objectリテラルは{}で作ることができます。このとき、任意のプロパティを使いできます。書き方はプロパティ名: プロパティ値です。プロパティ名には任意の文字列を指定できますが、記号等が含まれている場合は''や""で囲む必要があります。含まれていなければ''や""は省略可能です。プロパティ値も任意の値(データ)を指定できます。関数ももちろん可能です。プロパティ同士は,で区切ります。

JavaScript
1var obj = {
2  num: 0, // 数値
3  str: 'abc', // 文字列
4  ary: [0, 'abc'], // 配列
5  fun: function(x) { return x * 2; }, // 関数も入る
6  'x:y': 1 // 記号も '' 等で囲めば可能。
7};

{'color':'red'}という表現は、名前が'color'、値が'red'というプロパティを持つObjectのリテラル表現であり、そのObjectを生成しているだけに過ぎません。

###引数と戻り値
関数の書き方とその呼び出し型に関するものです。関数は何らかのデータを入力(input)して、何らかのデータを出力(output)するという動作をします。この入力と出力になるのが、引数と戻り値です。引数と戻り値を示す前に、もう一つ仮引数という概念が必要です。入力するデータが引数だとは言いましたが、入力するデータを決めるのは関数を呼び出す側です。関数の定義をするときに引数が何かという指定はできません。そこで、引数を一時的に入れる入れ物(変数)を用意します。これを仮引数といい、関数内で使えるローカル変数の一種になります。

var f = function(x) { // x が仮引数です。引数の値が x に代入されて、関数内で使えます。
  var y = x * 2;
  return y; // y の値が戻り値です。return文で指定した式の評価結果が戻り値になります。
};
console.log(f(2)); // 関数 f を引数 2 で呼び出し、評価します。
                   // 定義の中で x には 2 が入り、結果、y が 4 になり、4 が戻り値として戻されます。
                   // 結果、4 が表示されます。

引数も戻り値も値です。引数や戻り値に変数や式が指定されている場合は、その評価値(変数の値そのもや式なら計算結果)が引数や戻り値になります。仮引数は引数を入れておく変数です。varを使って変数宣言して、そこに引数の値が入っている場合と同じです。

引数や仮引数は0個にすることも2個以上にすることもできます。戻り値はたった一つしか返せませんが、配列として返す事で実質複数の値を返すこともできます。なお、JavaScriptではreturn文で式を指定しなかった場合、return文そのものを書かなかった場合は、自動的にundefinedという値が戻り値として返されます。**JavaScriptでは戻り値を返さない関数を作ることはできません。**しかし、undefinedは意味のない値のため、return文に式が指定されていない、または、return文そのものが無い関数を(本当は不正確ですが)戻り値が無い関数と表現している場合がありますので、ご注意ください。

上を読んでもよくわからなかった…。となっても安心してください。上の文章は、言語の厳密なところまで説明してるため、ちょっと難しくなっています。JavaScriptをそれなりに理解していない人で無いと難しいと思います。難しいと思ったなら、足りないのはJavaScriptそのものに対する知識です。jQueryだけの書籍やサイトをいくら眺めてもJavaScriptの知識は付きません。自分のサイトでちょこっと使う程度であればそれでも十分なのですが、本格的に使いたいと思うのであれば、まずは、JavaScriptそのものについて学んでください。遠回りのように見えてもこちらの方が近道です。

投稿2016/10/29 03:41

編集2016/10/29 22:42

raccy

総合スコア21735

kei344

2016/10/29 05:25

さすがという感じでとても読みやすいです。1点だけ細かい指摘です。 ary: [0, 'abc], // 配列 ↓ ary: [0, 'abc'], // 配列

raccy

2016/10/29 05:33

> 1点だけ細かい指摘です。ぐほっ。なおしました・・・。

scoa

2016/10/29 08:35

ご丁寧な説明をありがとうございます。記述のご説明がわかりやすく、参考になりました。まずはJavaScriptから、ですね。

think49

2016/10/29 11:22

仕様に詳しい raccy さんの事ですから raccy さんご自身は理解した上での説明と思いますが…。 > しかし、Objectオブジェクト({a: 0}等)、関数(function(x){return x;}等)、配列([0, 1]等)はそれぞれ、Object型、Function型、Array型のオブジェクトです。この説明はES6における「Undefined 型、Null 型、Boolean 型、String 型、Symbol 型、Number 型、Object 型」と同種の型であると誤解される可能性があります。 http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-language-types > Object型の値をオブジェクトと言うのでは無かったのか？と思ったのかも知れません。でも、オブジェクトと呼んでも問題ありません。なぜならプリミティブ型を除く全ての型はObject型を継承しているからです。これも「Object型」がES6におけるObject型と認識するとおかしくなってしまいます。文脈によってどちらの意味の「Object 型」かを正しく判断する必要がありますが、初心者にそれを求めるのはかなり難しいです。加えて、ES6における Object 型の文脈で説明している文章を正しく解釈できなくなります。「配列はObject型です」(ES6 の Object 型の概念で説明している) ⇒「配列はArray型ですよね？Object型は {} じゃないんですか？」「new Object は Object 型の中の Object 型です」(ES6 の Object 型の中に @@toStringTag の意味での Object 型と説明している) ⇒「Object 型って一つしかないですよね？Object 型の中に Object 型があるとはどういう意味ですか？」オライリー本では「ES5 における [[Class]]」や「ES6 における @@toStringTag」を型と称して Element 型とか RegExp 型と説明されている事が多いですが、誤解される可能性があるので私個人は ES6 の「6.1 ECMAScript Language Types」の意味でのみ「Object 型」と説明するようにしています。

raccy

2016/10/29 12:43 編集

> think49さんこれを書くのにES7の仕様書しか読んでません…。 > この説明はES6における「Undefined 型、Null 型、Boolean 型、String 型、Symbol 型、Number 型、Object 型」と同種の型であると誤解される可能性があります。 http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-language-types 他言語ですと「○○クラス」という表現を使うのですが、正確に仕様書に即するなら「○○コンストラクタのインスタンス」になるかと思っています。コンストラクタって何だ…となってしまいそうなので、型って表現を使っていましたが、たしかに混乱しますね。 > これも「Object型」がES6におけるObject型と認識するとおかしくなってしまいます。文脈によってどちらの意味の「Object 型」かを正しく判断する必要がありますが、初心者にそれを求めるのはかなり難しいです。加えて、ES6における Object 型の文脈で説明している文章を正しく解釈できなくなります。 Objectコンストラクタの(直接の)インスタンスでは無いのに、なぜ、"Object type"と見なすのか？を説明しようと思ったのですが、逆にわかりにくかったようです。 > 「配列はObject型です」(ES6 の Object 型の概念で説明している) > ⇒「配列はArray型ですよね？Object型は {} じゃないんですか？」 [] instanceof Object > 「new Object は Object 型の中の Object 型です」(ES6 の Object 型の中に @@toStringTag の意味での Object 型と説明している) > ⇒「Object 型って一つしかないですよね？Object 型の中に Object 型があるとはどういう意味ですか？」「{}はObjectコンストラクタの直接のインスタンスであるオブジェクトです」みたいな説明だと良かったのでしょうか。

think49

2016/10/29 15:04 編集

To: raccy さん > 正確に仕様書に即するなら「○○コンストラクタのインスタンス」になるかと思っています。あくまで個人の主観ですが、ES5 までは「JavaScriptにクラスはない」な感覚でしたが、ES6 から class の糖衣構文が出来たので「Arrayクラス」も許されるイメージで、ファジーに説明するなら「Arrayクラス」も有だと思っています。勿論、クラスの殻を被ったプロトタイプベース言語の域を出ませんので異論はあるでしょうが、「型」の名前で混乱するよりは良いという考えを持っています。 > 「{}はObjectコンストラクタの直接のインスタンスであるオブジェクトです」みたいな説明だと良かったのでしょうか。 new Arrayを例にとると new ArrayはArrayをプロトタイプに持つObject型である ⇒(Objectもプロトタイプ上にあるので)new ArrayはArray,Objectをプロトタイプに持つObject型である ⇒new ArrayはArrayを直属のプロトタイプに持つObject型であるよって、new Objectの例なら「ObjectはObjectを直属のプロトタイプに持つObject型である」はどうでしょうか。ただ、「直属のプロトタイプに持つ」が分かりやすいとはいえないので、class 構文を書いて Object.getPrototypeOf, __proto__, instanceof を交えつつコードで説明するのが最良だと考えています。この手の説明で「プロトタイプ」という言葉を使っている例をあまり見ないのですが、プロトタイプベース言語であるなら積極的に使って良いと考えています。 > なぜならプリミティブ型を除く全ての型はObject型を継承しているからです。今更ですが、ES6 仕様上は保証されていなかったと記憶しています。 ES6 のビルトインオブジェクトは大丈夫ですが、ネイティブオブジェクト(ES 規定外)に関しては各仕様に準ずるので [[Prototype]] が明記されていなければ保証できません。例えば、document instanceof Object === true は保証されていないと思います。デファクトスタンダードとしてそれはほぼ通用しますが、仕様に厳格であるなら Object.prototype.hasOwnProperty.call(document, 'location') と書くべきであると思います。他に ES6 の範疇であっても Object.create(null) がありますね。

raccy

2016/10/29 22:37

> think49さん色々ありがとうございます。全面的に改定してみました。色々とつらくなってきたので「クラス」を使うのは解禁しました。プロトタイプベースの補足はつけたので、JavaScriptにクラスなんて無い！といか言う人も納得してくれるかなと思っています。typeは「型」にせずに「タイプ」としました。一般的な「型」だとクラスも含めて考えてしまいそうなので。他にもコード表記を使って表現を分けてみました。もう、オブジェクト多すぎて何が何だか…。

think49

2016/10/30 12:25

To: raccy さんお疲れ様です。この辺りの説明は私もいつも悩みます…。

行動規範の内容に同意します