自分が作りたいものをjQueryで実現できるのかなあ
jQueryを学習するポイントをまとめて確認したい
jQueryの主要な技術や作れることを知りたい
jQueryはJavaScriptによるプログラミングを簡易化するだけでなく、Webコンテンツを作るうえで非常に便利なメソッドもたくさん提供されています。
これらのエコシステムを活用することで、さまざまなWebアプリなどにも応用できるので自分が作りたいものを簡単に実現することができます。しかしながら、jQueryをどのように学習していけば良いのか悩む人も少なくないでしょう。
そこで、この記事では初心者でも今日からjQueryで何ができるのかを理解するための方法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
一人でも多くの方がjQueryの不安を解消できれば幸いです。
DOM操作について
この章では、jQueryの大きな特徴の1つでもあるDOM操作について見ていきましょう。主に、セレクタの概要とイベント処理について学んでいきます。
セレクタによるHTML要素の制御
jQueryの基本的な使い方としては、以下のパターンを覚えるだけです。
$( 対象要素 ).何をするか？
例えばh1要素のテキストを変更したいとします。
すると、対象要素は【h1】要素になります。そのあとに、何をするかと言えば【テキストの変更】なのでtext()メソッドを実行するというわけです。
ソースコードにすると以下の通りです。
$('h1').text('こんにちは');
この例は、h1要素のテキストを【こんにちは】という文字列に変更するという意味になります。
このようにjQueryは対象となる要素と何をしたいかを記述するだけで、自由自在にHTML要素（DOM）を制御することができるわけです。
この対象要素はセレクタと呼ばれており、CSSのセレクタとほとんど同じ感覚で利用できるので以下のような指定も可能です。
//ID属性を利用
$('#text').text('こんにちは');
//class属性を利用
$('.text').text('こんにちは');
//他の属性を利用
$('input[name="sample"]').text('こんにちは');
//複数の属性を利用
$('.text.test.sample').text('こんにちは');
セレクタについての基本的な知識から応用ワザについては、次の記事で体系的にまとめているのでぜひ参考にしてみてください！
イベント処理の実装
DOM要素の操作だけでなく、ユーザーの何らかのアクションに応じた処理を実行できるイベント処理も簡単に実現することができます。
イベント処理は以下のパターンを覚えておくと良いでしょう。
$( 対象要素 ).on( イベント名, () => { 実行したい処理 } )
イベント処理を行いたい対象要素に対してon()を実行するだけです。on()の中身は実行したいイベントの種類と任意の関数を設定します。
例えば、次のサンプル例を見てください！
$('#button').on('click', () => {
console.log('クリックされました！');
});
この例では、ボタン要素に対して【click】イベントを実行しています。実行する処理としては、コンソールログに文字列を出力するという簡単なものです。これにより、ボタンをクリックすることで文字列が出力されるようになるわけです。
利用できるイベント名や活用方法については、次の記事で実践的なサンプルと共に解説しているので合わせて参考にしてみてください！
アニメーションを作る
この章では、jQueryで簡単に実装できるアニメーションについて見ていきましょう。主に、animate()を利用した基本と応用について学んでいきます。
animate()を利用したアニメーション
jQueryでアニメーションを実現するもっとも簡単な方法はanimate()メソッドを利用することです。非常に簡単な記述で、複雑なアニメーションを構築することができます。
animate()は以下のようなパターンを覚えておくと分かりやすいでしょう。
$( 対象要素 ).animate( 実行したいアニメーション )
使い方としては、アニメーションさせたい要素に対してanimate()を実行するだけです。アニメーションの記述はCSSを書くのとよく似ているので簡単です。
例えば、少しずつテキストの文字サイズを大きくしていくアニメーションを作りたい場合は次のようになります。
$('#text').animate({'fontSize': '96px'})
この例では、テキスト要素に対してanimate()を実行していますが、その引数に設定されている値に注目してください。CSSでもよく使う【fontSize】の値を【96px】にしていますよね？
これにより、現在設定されているテキストのサイズから96pxまで少しずつ大きくなるアニメーションになるわけです。
ちなみに、CSSだと【font-size】と記述しますがanimate()の場合は【fontSize】のようにキャメルケース形式で記述するので覚えておきましょう。
複雑なアニメーションを作る
animate()の面白い点として、複数のanimate()メソッドをチェーンで連結できるところにあります。
つまり、次々とアニメーションを実行させることで、1つの流れを作ることができるのでダイナミックなWebコンテンツを作成することができます。
チェーンで繋げるというのは、例えば次のような感じです。
$( 対象要素 ).animate().aniimate().animate()・・・
このように、複数のanimate()を連結させていくことで、1つずつのアニメーションが順番に実行されていくわけです。
次のサンプル例を見てください！
$('#text').animate({'left': '100%'})
.animate({'left': '40%'})
.animate({'fontSize': '96px'})
.animate({'left': '100%'})
.animate({'left': '0'})
この例では、position:absoluteの要素に対してleftプロパティを利用してダイナミックに移動アニメーションを構築しています。
サンプルデモを以下の掲載しておきますので、ぜひ確認してみてください！
See the Pen jQuery-sample (add animation) by sato ken (@s_masato) on CodePen.
非同期通信（Ajax）
この章では、サーバーと通信するための非同期通信について見ていきましょう。主に、Ajaxの概要と実際のプログラミングについて学んでいきます。
Ajaxとは何か？
jQueryを利用するとサーバーとの通信も簡単に実装できるのですが、重要な技術としてAjaxがあります。これは、簡単に言うと非同期通信の技術なのですが、ポイントは通信中でも他の処理が引き続き実行できるところにあります。
例えば、普通に同期通信を行うと以下のようになります。
サーバーと通信 ↓ 通信が終了するまでプログラムはストップ ↓ 次の処理（通信終了待ち） ↓ 次の処理（前の処理待ち） ・ ・ ・
このように、同期通信だと処理が終了するまですべてのプログラムがストップしてしまうので、他の作業は一切できません。
これに対して非同期通信だと次のようになります。
サーバーと通信 ↓ 次の処理 ↓ 次の処理 ・ ・ ・
サーバーと通信したあとにすぐ別の処理を実行できるのが特徴です。また、サーバーからデータを取得後にそれを利用した処理もしっかりと実行できるわけです。
このような背景から、jQueryを利用したサーバーとの通信にはAjax（非同期通信）が一般的に利用されているわけです。
非同期通信をしてみよう
それでは、実際のAjaxを利用した非同期通信のプログラムを見てみましょう。
もっとも基本的な実装としては、$.ajax()メソッドを利用することです。これはその名の通り、非同期通信（Ajax）を行うためのメソッドであり、簡単なオプションを付与するだけで通信処理を実現してくれます。
覚えておくべき基本パターンとしては次のとおりです！
$.ajax({
url:"送信先のURL",
type:"通信の種類",
dataType:"データの種類"
})
.done((data) => {
//通信が成功した時の処理
})
.fail((error) => {
//通信が失敗した時の処理
})
基本的には、通信するサーバーのURLさえ分かれば簡単に実装することができます。通信の種類というのは主に【GET / POST】のどちらかを文字列で指定します。
データの種類については、どのような形式でサーバーからデータを取得するかを設定しておきます。一般的には【json】でやり取りすることが多いでしょう。
次のサンプル例を見てください！
$.ajax({
url:"https://httpbin.org/get",
type:"GET",
dataType:"json"
})
.done((data) => {
console.log(data);
})
.fail((error) => {
console.log(error);
})
この例では、通信のテストを手軽に行えるhttpbinというサービスのURLを使い、GET通信のデモを行っています。
通信が成功すると、サーバーから返されるJSONデータをそのままコンソールログへ出力し、失敗するとエラーログを出力するという簡単なものです。
まとめ
今回は、jQueryで何ができるのかを簡単にポイントを絞って学習をしました！
最後に、もう一度ポイントをおさらいしておきましょう！
- 基本となるDOM操作やイベント処理が簡単に実現できる
- 複雑なアニメーションを簡易化してくれる
- 非同期通信（Ajax）も簡単にプログラミングできる
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
