BOOKS
by Sukeharu Kano / 狩野祐東 著書

var $shade = $(‘.js-slidemenu-effect’)[0];の[0]について

トップページ 書籍 Q&A 「HTML5&CSS3デザインレシピ集」:Q&A var $shade = $(‘.js-slidemenu-effect’)[0];の[0]について

  • This topic has 5件の返信, 2人の参加者, and was last updated 6 ヶ月、 1 週前 by  hiro.
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #3222 Reply

    hiro

    278のjQueryに、var $shade = $(‘.js-slidemenu-effect’)[0];とありますが、
    この最後の[0]の意味がどれだけ調べても分かりません。
    『jQuery デザインの教科書』も購入して読みましたが、
    この[0]の問題を解決する記述はなかったです。

    この[0]を削除するとjQueryが動かなくなりますが、
    この[0]はどういう意味があるんでしょうか?

    #3223 Reply

    hiro

    追加の情報です。
    『JavaScript「超」入門』は読みました。他にも、Javascriptの入門の本を数冊読みましたが、
    var $shade = $(‘.js-slidemenu-effect’)[0];の
    [0]の意味が分かりませんでした。

    #3224 Reply

    狩野 祐東
    キーマスター

    「HTML5&CSS3デザインレシピ集」のサンプル278のことですか?

    本書はHTMLとCSSの本で、JavaScript/jQueryの内容についてはサポート範囲外なので詳しい説明はしませんが、簡単に。
    $(‘.js-slidemenu-effect’)で要素を取得すると、結果が配列(のようなオブジェクト)で返されます。その配列の0番目の要素を読み取るために[0]としています。[0]を削除したら動作しないのはそのためです。

    より詳しくは、英語のページですが、jQueryの公式ドキュメントを参照してみてください。または「jquery get()」などで検索します。

    http://api.jquery.com/get/

    #3227 Reply

    hiro

    返信して頂いてありがとうございます。サンプル278のことです。

    さらに調べてみて、クラスのjs-slidemenu-effectの<div class=”js-slidemenu-effect”></div>の0なので、この1番目に該当しているようですが、
    ブラケットアクセスはマイナスのインデックス番号には対応していないはずが、var $shade = $(‘.js-slidemenu-effect’)[-1];でも動きます。

    さらには、<div class=”js-slidemenu-effect”></div>でクラスに該当するのは1つしかbody内に作られていないので1つしか該当しないはずが、0でなく1などでも不自然ではあってもスマホ用のメニューは動いています。

    その英語の公式サイトのページでも、jquery get()や”jQuery” ブラケットアクセスなどで検索しても、
    簡単な配列のことを書いているページばかりで、何で0以外でも動くのかなどがよく分かりませんでした。
    ここでの回答が無理なら、メールのほうに特別に依頼することなどは可能でしょうか?

    調べてみても、配列はこうやって取るとかそんなページばかりでしたので。

    #3230 Reply

    狩野 祐東
    キーマスター

    なるほど… おもしろい質問なので続けて回答したいと思います。

    まず前提条件として、このスクリプトでは次の処理をしています。

    1. <div id="slidemenu-btn>(ハンバーガーボタン)がクリックされたときに…
    2. 要素<div class="js-slidemenu-effect">があるかどうかを判別して…
    3. 2. がなければ<div class="js-slidemenu-effect">を追加して、同時に<div id="js-slidemenu">を表示する
    4. 2. があればそれを削除して、<div id="js-slidemenu">を非表示にする

    <div class="js-slidemenu-effect">>は、ページ全体を覆う半透明の黒いボックス(シェード、$shade)です。

    この要素は、ハンバーガーメニューが非表示のときはHTMLソースに存在せず、表示されているときは存在します。そこで、このスクリプトでは、シェードの要素があるかどうかでハンバーガーメニューの表示/非表示を判別しています。質問にあった以下の行で変数$shadeには、シェードの要素がHTMLソース内に存在するときは<div class="js-slidemenu-effect">が、ないときにはundefinedが代入されることになります。

    var $shade = $(‘.js-slidemenu-effect’)[0];
    

    ここで、たとえば[0][-1]にしても、$shadeにはundefinedが代入されます([-1] で取得できる要素はないから)。そして、ハンバーガーメニューは非表示だと判断されて、表示する処理がおこなわれます。ただし、[-1]では常にundefinedが代入されるので、何度クリックしてもハンバーガーメニューを表示する処理しかおこなわれません。

    なお、[0] を消してしまった場合、つまり次のようにしたら…

    var $shade = $(‘.js-slidemenu-effect’);

    変数$shadeには$(‘.js-slidemenu-effect’)の返り値である、配列に似たオブジェクト(jQueryオブジェクト)が代入されます。このままだと要素があるかどうかを判別できないので、スクリプトはうまく動作しなくなってしまいます。

    実際に動作を確かめてみたほうがわかりやすいと思います。スクリプトに1行追加して、コンソールを見ながら変数$shadeに代入される値を確認してみてください。

    $('#slidemenu-btn').on('click', function(e){
    	...
    	var $shade = $('.js-slidemenu-effect')[0]; // ここをいじって変化を確かめる
    	console.log($shade); // この行を追加
    	...
    });
    
    #3241 Reply

    hiro

    再度の返信を頂いてありがとうございます。
    今回の返信を頂いて、ハンバーガーメニューとシェード効果の
    通常の動きは大体分かりましたが、調べてみると別のことも分かってきました。

    console.log($shade);で[]がない時には
    Object { length: 0, prevObject: Object[1] }になっていました。
    これで0で取らないといけないことが分かりました。

    あとは、-1を入れるとundefinedにずっとなるのでハンバーガーメニューを
    クリックするとjQueryのCSS生成のシェード効果で画面が黒くなっていきます。
    この時にindex.htmlを見ると<div class=”js-slidemenu-effect”></div>が
    </body>直前にずらっと追加されています。
    この追加されている分だけのシェード効果が画面に追加されています。
    シェード効果の画面をクリックすると、
    <div class=”js-slidemenu-effect”></div>が削除される度に
    画面のCSSの黒の効果がなくなっていっています。

    0を1にすると、1つの<div class=”js-slidemenu-effect”></div>がindex.htmlに残っているので、
    その分画面が暗くなったままですが、シェード効果の黒い部分をクリックすると削除できて
    元の画面に戻っています。

    こういうことをしているうちに理解できるようになりましたが、
    これはconsole.log($shade);を使ったから分かりました。

    $(‘.js-slidemenu-effect’);でjQueryで新しく生成する時には
    length: 0になるので、$(‘.js-slidemenu-effect’)[0];にしないといけないと
    いうのは、jQueryの入門書も数冊読みましたが、この内容は載ってなかったと思います。
    この件は、どのくらいの段階の内容なのかも気になりました。

    あとは、prevObject: Object[1]というのは、配列で最初が0からなら
    0になっているはずが、1になっているのがよく分かりませんでした。

    しかし、随分と理解できるようになったので、感謝しています。
    『いちばんよくわかるHTML5&CSS3デザインきちんと入門』も購入して読みましたが、
    この本は入門とありますが、それ以上の内容で2回読み通して、読み応えのある内容で
    htmlとcssの理解がかなり深まりました。

6件の投稿を表示中 - 1 - 6件目 (全6件中)
返信先: var $shade = $(‘.js-slidemenu-effect’)[0];の[0]について
あなたの情報: