jQueryって何から勉強したら良いのか分からない
効率よく学習するためのポイントってなんだろう
jQueryでどんなことが実現できるようになるのかな
jQueryをこれから学習する人にとって、何を勉強すればどんなことが実現できるようになるのかイマイチよく分からない人も少なくありません。
JavaScriptよりも簡単にWebコンテンツを構築できるのは分かっていても、どこから学習を始めれば良いのでしょうか。最低限抑えておくべき基本的なコツを効率よく学習したいと考えている人も多いでしょう。
そこで、この記事では初心者でも今日からjQueryを学習するためのコツについて分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
一人でも多くの方がjQueryの不安を解消できれば幸いです。
セレクタとは何か
この章では、jQueryのもっとも基本となるセレクタについて見ていきましょう。まず最初に覚えておくべき基本パターンとセレクタ指定について学んでいきます。
jQueryを使うための基本パターン
まず最初にjQueryの基本パターンを覚えておきましょう。
初めてjQueryを学習する人は、ひとまず最低限の知識として以下のパターンだけでも把握してみてください。
$( セレクタ ).関数
この例のように、基本的には【セレクタ＋関数】の組み合わせでjQueryは記述できるように設計されており、ほとんどの処理は実行することができます。
セレクタは、どのHTML要素を対象にするのか？ということを指定するためのものです。CSSのセレクタ指定とほとんど同じような感覚で利用することができます。
関数は、セレクタで指定したHTML要素をどのように処理したいか？ということを記述します。例えば、h1要素のテキストを指定した文字列にしたい場合は次のようになります。
$('h1').text('おはよう');
この例では、セレクタにh1が指定されておりtext()メソッドを実行しています。これにより、h1要素のテキストが【おはよう】という文字列に変更されるというわけです。
セレクタ指定を理解する
セレクタの指定方法にはいくつかあって、ほとんどの場合はCSSと同じように指定することができます。
もっとも簡単なのは、前章で見たようにHTMLタグをそのまま指定することです。
$('p')
$('a')
$('form')
$('input')
もっとも単純で簡単な指定方法ですが、複雑なHTMLで特定の要素だけを対象にしたい場合だとこの方法は使えませんよね？例えば、複数あるリスト要素の1つだけを対象にしたい場合などは難しいでしょう。
このような時は、CSSの指定と同じようにID属性やクラス属性などを活用することができます。
//ID属性
$('#text')
//クラス属性
$('.sample')
//特定の子要素
$('div > p')
div > pのように特定の子要素を指定することもできます。
また、他の属性を使いたい時やフォーム要素などで効果的なセレクタ指定として次のような書き方もあります。
$('input[name="user"]')
[ ]の中に属性名と値を指定することで、任意の属性をセレクタとして利用することができるわけです。これにより、あらゆるHTML要素を特定することができるので便利です。
さらにセレクタの知識を深めたい方は、基本から応用までを体系的にまとめた次の記事を参考にしてみると良いでしょう。
イベント処理について
この章では、任意のタイミングで処理を実行できるイベント処理の作り方について見ていきましょう。主に、ユーザーアクションの検出法とイベント処理の書き方について学んでいきます。
ユーザーアクションを検出する方法
みなさんは、イベント処理がどういうものなのかご存知でしょうか？
一般的には、ユーザー側が何らかのアクションを起こすことで発生するのが基本です。例えば、マウスでボタンをクリックした時や画面がスクロールされた時など、さまざまなケースがあります。
jQueryで検出できるイベントはたくさんあり、よく使われるものは以下の通りです。
| イベント名 | 内容 |
|---|---|
| click | 要素がクリックされた時 |
| change | フォーム部品の状態変化があった時 |
| focus / blur | 要素にフォーカスが当たった時 / 外れた時 |
| load | ドキュメントが読み込まれた時 |
| scroll | 画面がスクロールした時 |
| keypress / keyup | キーボードのキーが押された時 / 離した時 |
| mousedown / mouseup | マウスのボタンが押された時 / 離した時 |
| submit | フォームが送信された時 |
| resize | ウィンドウサイズが変化した時 |
これらのイベントを対象にして、あらかじめプログラミングしておけばユーザーアクションに応じた処理を実行することができるわけです。
任意のタイミングで処理を実行する
それでは、実際にjQueryを使ってイベント処理を書いてみましょう。
イベント処理を定義するもっとも簡単な方法は、on()メソッドを利用することです。例えば、ボタンがクリックされた時に文字列をコンソールログに出力するには次のように書きます。
$('button').on('click', function() {
console.log('クリックされました！');
})
この例では、セレクタとしてボタン要素を指定してからon()メソッドを実行しています。
on()の第1引数には前章でご紹介したイベント名を記述し、第2引数には実行したい処理を関数で記述していますね。これにより、ボタンをクリックした時に設定した関数が実行されるというわけです。
ちなみに、イベント名は複数定義することが可能なので次のように記述することもできます。
$('button').on('click mouseenter', function() { })
この例では、イベント名として【click】【mouseenter】の2種類を定義しています。これにより、ユーザー側がマウスでクリックするかホバーするだけで任意の処理を実行することができるのです。
このon()メソッドのさらなる活用ワザについては、次の記事でさまざまな事例と共に解説しているのでぜひ参考にしてみてください！
アニメーション
この章では、よく使われるアニメーションの作り方について見ていきましょう。主に、animate()メソッドを活用したプログラミング手法について学んでいきます。
簡単なアニメーションを作る
jQueryは簡単にアニメーションを作れるようにanimate()メソッドが提供されています。使い方も簡単で、対象要素にanimate()を実行するだけなので直感的に理解できます。
$( セレクタ ).animate()
例えば、h1要素のテキスト文字のサイズを少しずつ大きくするアニメーションを作りたい場合は次のようになります。
$('h1').animate({
'fontSize': '128px'
})
この例では、セレクタとしてh1要素を指定してanimate()を実行しています。
animate()の中で指定するプロパティはCSSとほとんど同じように設定できます。ただし、font-sizeのようにハイフンが付与されているものに関しては、fontSizeというキャメルケースで記述しましょう。
実行結果は以下のデモを参考にしてみてください！
See the Pen jQuery-sample (animation) by sato ken (@s_masato) on CodePen.
また、animate()は複数繋げることも可能です。
$('h1').animate().animate().animate()・・・
それぞれのanimate()メソッドが順番に実行されていくので、活用すれば複雑なアニメーションでも簡単に実現できるようになります。
このanimate()メソッドの基本から応用までを次の記事で体系的にまとめているので、合わせて参考にしておくと良いでしょう。
フェードイン・アウトを実現するメソッド
jQueryでは、animate()以外にもアニメーションを簡単に記述できるメソッドが提供されているのでいくつかご紹介しておきます。
例えば、フェードイン・アウトを簡単に実装できるメソッドは次のとおりです。
$( セレクタ ).fadeIn() $( セレクタ ).fadeOut()
fadeIn()は非表示になっている対象要素を少しずつ表示していきます。反対にfadeOut()は対象要素を少しずつ透明にしながら非表示にしていきます。
どちらのメソッドも引数に時間(ミリ秒)を指定することが可能で、例えば3秒間かけて要素を非表示にするには次のように書きます。
$( セレクタ ).fadeOut(3000)
引数に設定する時間はミリ秒なので、3秒であれば3000になることに注意しましょう。
ちなみに、両方のメソッドを1つにしたfadeToggle()というメソッドも用意されています。
$( セレクタ ).fadeToggle();
これは実行されるたびに表示・非表示を繰り返してくれるというものです。例えば、クリックするたびに表示・非表示が切り替わるという機能を簡単に実装できるわけです。
jQueryを効率的に学ぶなら
難しそうだし、挫折したらやだな…。
ここまでjQueryを学習するためのコツについて解説してきましたが、上記のような悩みを持っている方も多いですよね。
そんな方には、弊社が運営するサブスク型のプログラミングスクール「SAMURAI TERAKOYA」がおすすめです。
月額3,278円(税込み)で、主に4つのサービスを提供させていただきます。
- 現役エンジニアによる月1度の「マンツーマン指導」
- 平均回答時間30分の「Q&Aサービス」
- 作りながら学べる28種類の「教材」
- 学習を記録&仲間と共有できる「学習ログ」
目的にあった教材を選べば、どなたでも効率よく学習できるほか、Q&Aサービスやマンツーマン指導を活用することで、挫折せずにjQueryの習得が可能です。
jQueryを効率的に学びたい人はもちろん、何から始めたらよいのかわからない方は、ぜひ「SAMURAI TERAKOYA」をご利用ください。
まとめ
今回は、jQueryのポイントがわからない人に向けて重要な部分を絞って学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
- jQueryを使う基本はセレクタ＋関数の組み合わせ
- ユーザー側のアクションによって処理を実行できるのがイベント処理
- アニメーションを簡単に実現するにはanimate()メソッドを活用する
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
jQueryとは、JavaScriptを簡単に書くことができるJavaScriptで作成されたライブラリのことです。
jQueryを理解して使いこなすには基本パターンであるセレクタ指定を覚えましょう。セレクタは、どのHTML要素を対象にするのか？ということを指定するためのものです。CSSのセレクタ指定と同じような感覚で利用できます。
jQueryは独学で習得することも可能です。しかし、挫折したくない、何から始めればいいのかわからない方には、スクールに通うのがおすすめです。例えば、サブスク型のプログラミングスクール「SAMURAI TERAKOYA」であればコストを抑えて、好きな時間にjQueryを勉強できます。
