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デザイナー養成講座)

4,692円(税込)

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

JavaScript コードレシピ集

3,114円(税込)

JavaScript コードレシピ集

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

1,848円(税込)

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

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

3,608円(税込)

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

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

5,389円(税込)

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

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

WEB言語紹介

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

ハイスピードプラン

ロリポップ ハイスピードプランを半年使ってみた感想とレビュー

ロリポップのハイスピードプランを使って約半年。 気づいた事やオススメポイントをスタンダードプランと比較して記事にしました

PHPで作るカレンダーの作り方2

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

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

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

PHPで作るカレンダー
1位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

ノートPCスタンド
2位

ノートPCスタンド

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

α7Ⅲで夜景
3位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

jquery-match-height.js
4位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

自転車に取り付けるドリンクホルダー
5位

自転車に取り付けるドリンクホルダー

自転車でコンビニのホットコーヒーをこぼさずに持ち帰るためにドリンクホルダーを購入したので、写真を交えてレビューします!

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

MusicBeeのレイアウト変更方法

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

α7Ⅲ 夜桜撮影
7位

α7Ⅲ 夜桜撮影

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

SEL50F18F
8位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
9位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

bookblock
10位

bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

改訂新版 jQuery本格入門

3,630
(税込)