読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第3回 jQueryの基本(回答編)

この記事を読むのに必要な時間:およそ 2.5 分

thisの使い方

今回JavaScriptを始めて書く人にとって難しかったのが,先ほど説明したthisだったかもしれません。実際に以下のような間違えをしている作品がいくつかありました。

このコードではメニューにマウスオーバーしたときにすべてのサブメニューが表示になってしまい,期待していた動作にはなりません。なぜこうなるかというと,マウスオーバーの時の処理が以下の用に書かれているからです。

$('.submenu').show();

これだと,メニューにマウスオーバーしたときにすべてのサブメニューに対してshowの処理が適用されてしまうためこのような動作になります。期待した動作にしたい場合は,マウスオーバーした要素の子要素の.submenuのみに処理をする必要があります。そこでthisを使う必要が出てきます。thisを使えばマウスーオーバーされた要素を取得できるのでそこから表示したい要素を辿ればいいのです。

$(this).find('.submenu').show();

また,以下のように書いてある作品も多くありましたが,上記と意味は同じなので,これでも問題ありません。

$('.submenu', this).show();

慣れるまではthisの扱いが難しいとは思いますが,jQueryのclickやhoverなどではthisは自分自身を指すということを覚えておきましょう。

工夫されていた作品

今回のお題は単に表示,非表示というお題でしたが,それに加えてスライドダウンやフェードなどのエフェクトも付けていた作品もありましたので紹介したいと思います。

スライドダウンの効果を使った作品

こちらの作品はslideDownを使ってスライドダウンのエフェクトを加えています。slideDownなどはjQueryにあらかじめ用意されているアニメーションなので,単にshowをslideDownにするだけでこのようなエフェクトを簡単に実装することができます。

フェードの効果を使った作品

こちらは同じようにfadeInとfadeOutを使っています。さらにこの作品ではアニメーションの時間をデフォルトから変更しています。fadeInやslideDownなどは以下のようにアニメーションの早さを設定することが可能です。

fadeIn('slow'); // 遅く表示
fadeIn('fast'); // 早く表示
fadeIn(1000);   // 1000ms(1秒)かけて表示

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha