Jqueryのセレクタとthisとconsole.logの使い方

Jqueryのセレクタとthisとconsole.logの使い方

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

#93 つまづきやすい5つのポイント

WEB制作

Jqueryのとっつきにくいポイントを5つに絞ってまとめました。 例文はわずか5行のJqueryですが、たったこれだけでJqueryの基本は覚えられます。 構文さえわかってしまえば、Jqueryのメソッドを組み合わせれば大体できるようになります。

公開日:
最終更新日:

サイトマップサイトマップ

jQueryの知っておきたい基本的な使い方

脱jQueryの流れが大きくなってきた昨今ですが、jQueryって便利ですよね。便利なjQueryの基本的な使い方を解説します。

ここがわかれば一気にjQueryが使いやすくなるという基本的な使い方を5つのポイントに絞ってお伝えいたします。

jQueryの勉強にはこちらの書籍がオススメです

オススメというか私が実際に買って読んだ本です。jQueryモバイルという本も一緒に買ったんですが、モバイルの方は全然聞かなくなりました。

読み応えはあるものの、初心者向けとはちょっと言いずらい内容です。ある程度、基礎ができてる人にはオススメ。

改訂新版 jQuery本格入門

改訂新版 jQuery本格入門 #297

3,630円 (税込)(Amazon参考価格)

紹介する5つの機能

1. ターゲットを指定するセレクタ$("クラス or ID")

2. きっかけを作るトリガー .click

3. とりあえず確認しよう console.log()

4. アクションを設定 $(this)

5. 動きをつける fadeIn / fadeOut

私が良く使う機能と書き方に絞ってお伝えしますので、ここが理解できればいろいろと面白いことができるようになります。
私もそんなにjQuery詳しくないんですが、トランプゲームくらいは作れるようになりました。jQueryで。

事例:画像をクリックするとフェードアウトしながら入れ替わる

jQueryで画像切り替え
クリックすると画像が変わります

最低限のコードで作るために、簡素な作りになっていますが基礎編ということで何卒。

jQueryのコード全容

$(".image1").click(function(){
	console.log("OK");
	$(this).hide();
	$(".image2").fadeIn();		
});

5行で完了。簡単でしょ。

HTMLはこんな感じ

<img src="img/thumbs.png" class="image1">
<img src="../img/thumbs.png" class="image2" style="display: none;"> 		

切り替えたい画像を display:none で非表示にしておきます。

jQueryを書く前に何がしたいかを整理しましょう

どんなことでも完成のイメージがないことには作ることができません。
したいことの言語化をしておくと何をすればよいかが明確になります。

今回の例でいうと
「画像」「クリック」したときに「画像を切り替え」たい

これができないとどんなコードを書けばいいのかが出てきません。

jQuery 何がしたいのかを明確に
何をしたいのかを整理してからコードを書く

これがないと始まらない セレクタの指定方法

jQueryの最大のメリット、セレクタの指定が超簡単。だけどセレクタの指定がわからなくて、コピペで済ましてきた人がめちゃくちゃ多い。(昔の自分のことです)

ちゃんと理解すればマジで簡単なんです。

1行目の → $(".image1") がトリガーの対象物「セレクタ」です。

$() の中に、対象物を指定するものを書きます。
ここには「クラス名」「ID名」「タグ」などが入ります。

$( )の中に書くときは「"(ダブルクォート)」か「'(シングルクォート)」で囲う必要があります。
囲わないでよいのは、Javascript内で作った変数名を書くとき。
後ほど「this」が出てきますが、そいつはクォートで囲いません。

今回はクラス名をここに書きます

画像をクリックしたときなので、画像に振ってあるクラス名をここに入れます。
$(".image1")となります。

クラスを示す「.(ピリオド)」も忘れないように!
ちなみにIDの場合は「#(シャープ)」をいれます。CSSのルールと同じです。
タグの場合は何もなし。タグを書く。$("img") のように。

jQuery クラスタの指定方法
jQueryの構文

これで「.image1」というクラスを持った画像が対象物になりました。
次はトリガーの設定!

クリックしたらなにかをしなさい

画像に対してのトリガーを設定します。トリガーというのは、ユーザーアクションですね。
今回は「クリック」したら、なのでクリックを指定。

$(".image1").click(function(){ });

クリックをしたらなので「click」と書きます。
jQueryの文法はドットシンタックスと言われる書き方で、.(ドット)で命令文をつないでいきますので、さっき作ったセレクタの後に.(ドット)がつきます。

書き方がちょっとややこしくなってきましたね。

clickの後のカッコ()と大カッコ{}が出てきます。こいつがjQueryの鬼門です。

順番にコードを書くと少しわかりやすくなります。
カッコは必ず一対になっているので、色ごとにセットになってます。

1 $(".image1").click()

clickのあとに()が入ります。開始(と、終わり)のカッコ

2 $(".image1").click(function())

click() のカッコ内に functionを書きます。
functionの後にも()は入ります。

3 $(".image1").click(function(){ });

function()の後に{}大かっこを書きます。
最後に;(セミコロン)で命令文の終わりを告げます。

間違えやすいポイント

.clickの次のカッコの中にfunctionを書いて、functionのカッコには何も書きません。
そのカッコの後に{}大カッコで囲います。

これで「画像」「クリック」したら、まで完成です。

クリックしたらちゃんと動くか検証

ここまで書けたら、命令文がちゃんと動作しているか確認します。
全部書いてから検証すると、なにがダメだったのかがわかりづらくなるので、ちょこちょこ検証します。

console.logで動作確認

さっき作った命令文にconsole.log("OK");と書いて、画像をクリックしてみてください。

$(".image1").click(function(){
	console.log("OK");
});

コンソール画面はF12キーを押すとでてきます

console.log()の中に”(ダブルクォート)で囲ったテキストを入力すると、ブラウザのコンソール画面にその文字が表示されます。
エラーが出てなければ!

jQuery コンソールOK画面
エラーなし!OK!
jQuery コンソールNG画面
エラーメッセージが表示

エラーメッセージが表示された場合は、内容を確認します。
今回のエラーは シンタックスエラー:文法エラーで、{ カッコ足りなくない?と言われているみたいです。

エラー検証の際も、指定したトリガーの条件を満たさないと何も起きませんのでご注意ください。
今回は画像をクリックすることで、console.log が発動します。

{}の中にやりたいことを書きます 画像切り替え

いよいよ画像の切り替えアクションを指定します。

$(".image1").click(function(){
	console.log("OK");
	$(this).hide();
	$(".image2").fadeIn();		
});

3行目の$(this).hide();と、4行目の$(".image2").fadeIn(); がそのアクション。

jQuery {}の中にやりたいことを書く

this ってなんなのさ → 自分

this がわかればjQueryの簡単なスクリプトは覚えたも同然。ほんと。これ意味わからんかった。

ややこしくすると混乱するので、簡単にいいます。
1行目で指定したセレクタの中身を指します。

今回は .image1 のことですね。これがthisの実態。

1行目で指定したセレクタの中身がthis。
但し、クリックされた画像のみが対象になります。

同じクラス名をもっていても$(this)で指定すると、クリックされた画像のみが対象。

jQuery thisの対象
$(this)とクラス指定との違い

$(this)の場合は、クリックされた .image1 だけが対象ですが、クラス名で指定した場合、クリックしてない画像もhide()が発動します。

$(this).hide(); 自分を隠して

セレクタの書き方で書きましたが「this」はクォートで囲いません。jQueryの変数なので。

$(this).hide()のhide()をメソッドと呼びます。
メソッドの話もややこしくなるので、セレクタにこのhide()をくっつけると非表示になると覚えてください。

メソッドは色んな種類があるので、使い方とセレクタの指定方法を覚えてから、ほかのメソッドを探すのが良いです。
「attr」とか「parent」とかは文法がわからないうちから使おうとすると、ややこしくて嫌になります。

$(".image2").fadeIn(); で徐々に表示

ここでまたセレクタの登場です。
最初に使ったセレクトとまったく同じ使い方なんですが、一番最初のセレクタは、アクションの対象物だったんですよ。

「画像」「クリック」したときに「画像を切り替え」たい
の画像を指定しました。

今から指定するセレクタは、画像を切り替えるための「画像」を指定するセレクタです。

$(".image2").fadeIn で class名が「image2」の画像をフェードインせよ、という命令になっています。
ちなみに、同じクラス名を持った画像がほかにもいたら、それも一緒にフェードインします。

jQuery メソッドの使い方
jQuery メソッドの使い方

fadeIn()メソッドは、fadeIn()がついたセレクタのCSSが変動します。
displayがblockにかわり、opacity(透明度)が徐々に上がって、1になったら止まります。

なので、ボタンが押された後に出てくる画像(.image2)は style="display:none" で非表示化しておけば、fadeInが発動することにより、displayがblockに切り替わる!
※タグに直接書いてますが、クラス指定してCSSで非表示にするのも、もちろんOKです。

ここの動作を整理すると、クリックされたimage1が非表示になり、その次にimage2がフェードインして、画像が切り替わる、という動きです。

ここまでできれば、jQueryを使った画像切り替えの完了です!

jQueryのわかりづらいところにフォーカスしました

自分がjQueryをわかったと思えた瞬間が、セレクタの指定方法とthisの意味が腹落ちした時だったんですね。
その時の気持ちを思い出しながらなるだけ詳しく書いてみました。

そのせいで5行のコードの解説がかなり冗長になってしまいました。

別の機会でメソッドを深堀したいと思います。

jQuery 5つのポイントまとめ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

改訂新版 jQuery本格入門

3,630円(税込)

改訂新版 jQuery本格入門

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

922円(税込)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

JavaScript コードレシピ集

3,114円(税込)

JavaScript コードレシピ集

誰もがあきらめずにすむPHP超入門

1,848円(税込)

誰もがあきらめずにすむPHP超入門

Bootstrap 4 フロントエンド開発の教科書

3,608円(税込)

Bootstrap 4 フロントエンド開発の教科書

Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法

3,229円(税込)

Webデザイン・スタンダード 伝わるビジュアルづくりとクリエイティブの最新技法

つまづきやすい5つのポイントの関連ページ

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

MusicBeeのレイアウト変更方法
1位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

コンプライ
3位

コンプライ

評判と値段の高いコンプライのイヤーピースの購入後1週間レビュー!柔らかいウレタン素材のイヤーピースは装着前に指でつぶして耳穴に装着します。

アンズテック
4位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

α7Ⅲ 夜桜撮影
5位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

アマゾンアンリミテッド
6位

アマゾンアンリミテッド

Amazonの書籍読み放題サービスのアンリミテッドを期間限定の特別セール3ヵ月299円で申し込んだ体験談です。

NORDACE
7位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

つまづきやすい5つのポイント
8位

つまづきやすい5つのポイント

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

WI-1000Xレビュー
9位

WI-1000Xレビュー

ソニーの2017年秋の新作ワイヤレスイヤホンWI-1000Xを購入して初めてノイズキャンセルを体験レビュー

ミトラ
10位

ミトラ

肩こりは普段の姿勢と肩甲骨の稼働範囲の狭さが原因なので、肩甲骨のストレッチと正しい睡眠姿勢は大事だなと感じました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

改訂新版 jQuery本格入門

3,630
(税込)