Javascript 変数に$('クラス名')を代入

Question

かなり初歩的な質問と思いますがお力添えいただきたく存じます。

画像をランダムに表示するスライドショーを実現させたくて、あるサイトを参考にしました。
そこに記載されていたコードです。Javascriptです。

var $slideshow = $('.slideshow');
var $slide = $('.slide');

これは変数に何を代入していますか。コード内には$という関数は定義されていません。.slideshowと.slideはdiv要素に付いているクラス名です。
どうかよろしくお願いいたします。

【追記】
サイトのURLは以下です。
http://sakamock.hatenablog.com/entry/2017/01/12/132656

コードを読み進めると以下の記述がありました。

function randomize(selector){
  $slideshow.find(selector).sort(function(){
    return Math.round(Math.random()) - 0.5;
  }).detach().appendTo($slideshow);
}

2行目で$slideshowに対してfind()関数を呼び出していますが、記述を簡単にするために$slideshowに$('.slideshow')という文字列を代入したという解釈は間違っていますか。

Comments

[kei344]

タイトルには要件を書きましょう。 https://teratail.com/help/question-tips#questionTips3-1

[avajava]

申し訳ありません。ご指摘ありがとうございます。

Answer 1

ライブラリ

http://sakamock.hatenablog.com/entry/2017/01/12/132656

その記事からリンクされているjsfiddleに行けば、jQuery 3.1.1を使用しいることが分かります。
https://jsfiddle.net/sakmak/zf7mejrx/3/

HTMLソースにある https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js を開けば、公式サイトも分かります。
http://kenwheeler.github.io/slick/

変数を使用する意図

2行目で$slideshowに対してfind()関数を呼び出していますが、記述を簡単にするために$slideshowに$('.slideshow')という文字列を代入したという解釈は間違っていますか。

$('.slideshow') を複数回呼び出す場合、「1回目の返り値」と「2回目以降の返り値」が等しくなります。
(1回目と2回目以降の間に jQuery('.slideshow') の返り値を変化させる処理が入った場合を除きます)

すると、2回目以降に全く同じ処理をさせるので、関数処理コストが無駄になります。
変数に関数の返り値をキャッシュしておけば、この問題は解消されます。

Re: jaaaa さん

Comments

[avajava]

回答ありがとうございます。そこまで頭がまわりませんでした。リンクを貼って下さりありがとうございます。関数処理コストをかけないために変数に代入しているのですね。詳しく教えていただきありがとうございました。

Answer 2

「何が代入されたか」はconsole.log()で確認できます。

var $slideshow = $('.slideshow');
console.log($slideshow);

ブラウザデベロッパーツール「Console」を確認してみてください。

なぜ当該結果が出力されているかを詳しく知るにはセレクタという概念を知る必要があります。
※日本語良ければこの辺り→Selectors：セレクタとかSelectors/API/jQuery
解説記事：【jQuery】要素を指定するセレクタの使い方 まとめ

Comments

[avajava]

回答ありがとうございます。Consoleで確認したら大量の行の何かが代入されていました。これが.slideshowを付与されたdiv要素がjQueryオブジェクトに変換された姿なのでしょうか。参考のリンクをありがとうございます。読んでみます。

[m.ts10806]

「何か」ではなくちゃんと意味のある情報なのでひとつひとつ読みといてください。

[avajava]

そうですよね。頑張ります。回答ありがとうございましたm(_ _)m

Answer 3

サイトのURLがないので断言できませんが、９割がたjQuery(jQuery関数)です。

jQueryのライブラリをロードすると、内部で$ = jQueryというようにグローバル変数が定義されます。

変数には、jQuery関数の実行結果であるjQueryオブジェクトが格納されています。

---

もちろん、ただの変数ですので$ = 1のように上書きできますし、サイトによってはjQueryをそのままの名前で使って、$は他のことに使っているかもしれません。ただ、あまりにも「$はjQuery」という慣習が根付いているので、かなりのレアケースです。

Comments

[avajava]

回答ありがとうございます。jQuery関数の実行結果が格納されるのですね。よく調べてみます。丁寧にありがとうございましたm(_ _)m

Answer 4

2行目で$slideshowに対してfind()関数を呼び出していますが、記述を簡単にするために$slideshowに$('.slideshow')という文字列を代入したという解釈は間違っていますか。

間違ってます。

var $slideshow = $('.slideshow');

ここで代入したのはjqueryオブジェクト。.find('.slideshow')を入れているのと同じ。
変数名をslideshowではなく$slideshowとしているのは一目でjqueryオブジェクトだと分かるようにするため。

以下追記

<div id="oshiri">kajirimusi</div>
(function(){

var a = $("#oshiri").html();
var b = $(document).find("#oshiri").html();
alert(a);
alert(b);
if(a === b){
  alert('same');
}else{
  alert('diff');
}

})();

Comments

[avajava]

回答ありがとうございます。変数名の先頭に$をつけている理由まで教えていただきありがとうございます。
jQueryオブジェクトについて調べて納得しました。.slideshowと.slideに対してjQueryのメソッド等を使うためにjQueryオブジェクトを取得しているのですね。しかし.find('.slideshow')を入れているのと同じ。という点がよく分かりません。よろしければより詳細に教えていただきたいです。

[hentaiman]

コードを追記しました。見て何となくイメージつけばと

[avajava]

コードの追記までしてくださりありがとうございます。追記してくださったコードのように、find()関数の実行結果としてjQueryオブジェクトが返されるのを利用してjQueryオブジェクトの取得・代入が出来るのですね。(解釈が間違っていたら申し訳ありません)
詳細に教えてくださりありがとうございましたm(_ _)m