jQueryの勉強方法がわからない人のために基本的なコツを徹底解説!


jQueryって何から勉強したら良いのか分からない
効率よく学習するためのポイントってなんだろう
jQueryでどんなことが実現できるようになるのかな

jQueryをこれから学習する人にとって、何を勉強すればどんなことが実現できるようになるのかイマイチよく分からない人も少なくありません。

JavaScriptよりも簡単にWebコンテンツを構築できるのは分かっていても、どこから学習を始めれば良いのでしょうか。最低限抑えておくべき基本的なコツを効率よく学習したいと考えている人も多いでしょう。

そこで、この記事では初心者でも今日からjQueryを学習するためのコツについて分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

一人でも多くの方がjQueryの不安を解消できれば幸いです。

セレクタとは何か

この章では、jQueryのもっとも基本となるセレクタについて見ていきましょう。まず最初に覚えておくべき基本パターンとセレクタ指定について学んでいきます。

jQueryを使うための基本パターン

まず最初にjQueryの基本パターンを覚えておきましょう。

初めてjQueryを学習する人は、ひとまず最低限の知識として以下のパターンだけでも把握してみてください。

この例のように、基本的には【セレクタ+関数】の組み合わせでjQueryは記述できるように設計されており、ほとんどの処理は実行することができます。

セレクタは、どのHTML要素を対象にするのか?ということを指定するためのものです。CSSのセレクタ指定とほとんど同じような感覚で利用することができます。

関数は、セレクタで指定したHTML要素をどのように処理したいか?ということを記述します。例えば、h1要素のテキストを指定した文字列にしたい場合は次のようになります。

この例では、セレクタにh1が指定されておりtext()メソッドを実行しています。これにより、h1要素のテキストが【おはよう】という文字列に変更されるというわけです。

セレクタ指定を理解する

セレクタの指定方法にはいくつかあって、ほとんどの場合はCSSと同じように指定することができます。

もっとも簡単なのは、前章で見たようにHTMLタグをそのまま指定することです。

もっとも単純で簡単な指定方法ですが、複雑なHTMLで特定の要素だけを対象にしたい場合だとこの方法は使えませんよね?例えば、複数あるリスト要素の1つだけを対象にしたい場合などは難しいでしょう。

このような時は、CSSの指定と同じようにID属性やクラス属性などを活用することができます。

div > pのように特定の子要素を指定することもできます。

また、他の属性を使いたい時やフォーム要素などで効果的なセレクタ指定として次のような書き方もあります。

[ ]の中に属性名と値を指定することで、任意の属性をセレクタとして利用することができるわけです。これにより、あらゆるHTML要素を特定することができるので便利です。

さらにセレクタの知識を深めたい方は、基本から応用までを体系的にまとめた次の記事を参考にしてみると良いでしょう。

これで完璧!jQueryのセレクタ操作を完全理解するコツまとめ!
更新日 : 2019年5月9日

イベント処理について

この章では、任意のタイミングで処理を実行できるイベント処理の作り方について見ていきましょう。主に、ユーザーアクションの検出法とイベント処理の書き方について学んでいきます。

ユーザーアクションを検出する方法

みなさんは、イベント処理がどういうものなのかご存知でしょうか?

一般的には、ユーザー側が何らかのアクションを起こすことで発生するのが基本です。例えば、マウスでボタンをクリックした時や画面がスクロールされた時など、さまざまなケースがあります。

jQueryで検出できるイベントはたくさんあり、よく使われるものは以下の通りです。

イベント名内容
click要素がクリックされた時
changeフォーム部品の状態変化があった時
focus / blur要素にフォーカスが当たった時 / 外れた時
loadドキュメントが読み込まれた時
scroll画面がスクロールした時
keypress / keyupキーボードのキーが押された時 / 離した時
mousedown / mouseupマウスのボタンが押された時 / 離した時
submitフォームが送信された時
resizeウィンドウサイズが変化した時

これらのイベントを対象にして、あらかじめプログラミングしておけばユーザーアクションに応じた処理を実行することができるわけです。

任意のタイミングで処理を実行する

それでは、実際にjQueryを使ってイベント処理を書いてみましょう。

イベント処理を定義するもっとも簡単な方法は、on()メソッドを利用することです。例えば、ボタンがクリックされた時に文字列をコンソールログに出力するには次のように書きます。

この例では、セレクタとしてボタン要素を指定してからon()メソッドを実行しています。

on()の第1引数には前章でご紹介したイベント名を記述し、第2引数には実行したい処理を関数で記述していますね。これにより、ボタンをクリックした時に設定した関数が実行されるというわけです。

ちなみに、イベント名は複数定義することが可能なので次のように記述することもできます。

この例では、イベント名として【click】【mouseenter】の2種類を定義しています。これにより、ユーザー側がマウスでクリックするかホバーするだけで任意の処理を実行することができるのです。

このon()メソッドのさらなる活用ワザについては、次の記事でさまざまな事例と共に解説しているのでぜひ参考にしてみてください!

【jQuery入門】on()によるイベント処理の使い方まとめ!
更新日 : 2019年7月11日

アニメーション

この章では、よく使われるアニメーションの作り方について見ていきましょう。主に、animate()メソッドを活用したプログラミング手法について学んでいきます。

簡単なアニメーションを作る

jQueryは簡単にアニメーションを作れるようにanimate()メソッドが提供されています。使い方も簡単で、対象要素にanimate()を実行するだけなので直感的に理解できます。

例えば、h1要素のテキスト文字のサイズを少しずつ大きくするアニメーションを作りたい場合は次のようになります。

この例では、セレクタとしてh1要素を指定してanimate()を実行しています。

animate()の中で指定するプロパティはCSSとほとんど同じように設定できます。ただし、font-sizeのようにハイフンが付与されているものに関しては、fontSizeというキャメルケースで記述しましょう。

実行結果は以下のデモを参考にしてみてください!

See the Pen jQuery-sample (animation) by sato ken (@s_masato) on CodePen.0

また、animate()は複数繋げることも可能です。

それぞれのanimate()メソッドが順番に実行されていくので、活用すれば複雑なアニメーションでも簡単に実現できるようになります。

このanimate()メソッドの基本から応用までを次の記事で体系的にまとめているので、合わせて参考にしておくと良いでしょう。

【jQuery入門】animate()の使い方とアニメーション事例まとめ!
更新日 : 2019年4月30日

フェードイン・アウトを実現するメソッド

jQueryでは、animate()以外にもアニメーションを簡単に記述できるメソッドが提供されているのでいくつかご紹介しておきます。

例えば、フェードイン・アウトを簡単に実装できるメソッドは次のとおりです。

fadeIn()は非表示になっている対象要素を少しずつ表示していきます。反対にfadeOut()は対象要素を少しずつ透明にしながら非表示にしていきます。

どちらのメソッドも引数に時間(ミリ秒)を指定することが可能で、例えば3秒間かけて要素を非表示にするには次のように書きます。

引数に設定する時間はミリ秒なので、3秒であれば3000になることに注意しましょう。

ちなみに、両方のメソッドを1つにしたfadeToggle()というメソッドも用意されています。

これは実行されるたびに表示・非表示を繰り返してくれるというものです。例えば、クリックするたびに表示・非表示が切り替わるという機能を簡単に実装できるわけです。

まとめ

今回は、jQueryのポイントがわからない人に向けて重要な部分を絞って学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • jQueryを使う基本はセレクタ+関数の組み合わせ
  • ユーザー側のアクションによって処理を実行できるのがイベント処理
  • アニメーションを簡単に実現するにはanimate()メソッドを活用する

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説