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 クラスタの指定方法

これで「.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つのポイントの関連ページ

bookblock

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

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

jquery-match-height.js

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

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

PHPを使って作るCMS

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

カレンダーの作り方2

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

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

PHPの覚え方

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

配列の解説

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

カレンダー

PHP+HTMLで作る 祝日対応のカレンダーの作り方

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

POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHP覚え方

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

WEB言語紹介

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

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

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CSSで作る横スライド

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

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

marginとpadding

CSSのmarginとpaddingの違いについて

CSSのmarginとpaddingの違いについて解説しました。 余白をつくるプロパティの使いわけおを考える。

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

スクロール監視

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

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

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

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

ランダム表示バナー
1位

ランダム表示バナー

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

MusiceBee
2位

MusiceBee

PCで音楽の再生と管理をするならiTunseよりもMusicBeeがオススメです。軽くて早くて便利で使いやすい。

WEBフォント設定
3位

WEBフォント設定

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

カー用品
4位

カー用品

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

カレンダーの作り方2
5位

カレンダーの作り方2

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

ここひえ
6位

ここひえ

ショップジャパンのパーソナルクーラー「ここひえ」を購入して使った感想と気づいたこと。 風を正面に受けると涼しいです

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

MusicBeeのレイアウト変更方法

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

イヤーピース EP-TC50M
8位

イヤーピース EP-TC50M

耳にフィットするイヤーピースを探して、いろいろ検討した結果、SONYのEP-TC50Mを購入しました。

東京駅夜景
9位

東京駅夜景

ソニーのミラーレス一眼α7Ⅲで東京駅周辺のイルミネーションを撮影してきました。久しぶりの夜景撮影でカメラの設定を大失敗。

電子ノート
10位

電子ノート

電池もちが抜群で持ち運びに便利な電子ノートのレビューです。文庫本サイズの電子ノートはアイデアを思いつたらすぐにメモれる優れモノ

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

改訂新版 jQuery本格入門

3,630
(税込)