jQueryって何ができるの?基本パターンで覚えるコツを徹底伝授!


自分が作りたいものをjQueryで実現できるのかなあ
jQueryを学習するポイントをまとめて確認したい
jQueryの主要な技術や作れることを知りたい

jQueryはJavaScriptによるプログラミングを簡易化するだけでなく、Webコンテンツを作るうえで非常に便利なメソッドもたくさん提供されています。

これらのエコシステムを活用することで、さまざまなWebアプリなどにも応用できるので自分が作りたいものを簡単に実現することができます。しかしながら、jQueryをどのように学習していけば良いのか悩む人も少なくないでしょう。

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

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

DOM操作について

この章では、jQueryの大きな特徴の1つでもあるDOM操作について見ていきましょう。主に、セレクタの概要とイベント処理について学んでいきます。

セレクタによるHTML要素の制御

jQueryの基本的な使い方としては、以下のパターンを覚えるだけです。

例えばh1要素のテキストを変更したいとします。

すると、対象要素は【h1】要素になります。そのあとに、何をするかと言えば【テキストの変更】なのでtext()メソッドを実行するというわけです。

ソースコードにすると以下の通りです。

この例は、h1要素のテキストを【こんにちは】という文字列に変更するという意味になります。

このようにjQueryは対象となる要素と何をしたいかを記述するだけで、自由自在にHTML要素(DOM)を制御することができるわけです。

この対象要素はセレクタと呼ばれており、CSSのセレクタとほとんど同じ感覚で利用できるので以下のような指定も可能です。

セレクタについての基本的な知識から応用ワザについては、次の記事で体系的にまとめているのでぜひ参考にしてみてください!

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

イベント処理の実装

DOM要素の操作だけでなく、ユーザーの何らかのアクションに応じた処理を実行できるイベント処理も簡単に実現することができます。

イベント処理は以下のパターンを覚えておくと良いでしょう。

イベント処理を行いたい対象要素に対してon()を実行するだけです。on()の中身は実行したいイベントの種類と任意の関数を設定します。

例えば、次のサンプル例を見てください!

この例では、ボタン要素に対して【click】イベントを実行しています。実行する処理としては、コンソールログに文字列を出力するという簡単なものです。これにより、ボタンをクリックすることで文字列が出力されるようになるわけです。

利用できるイベント名や活用方法については、次の記事で実践的なサンプルと共に解説しているので合わせて参考にしてみてください!

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

アニメーションを作る

この章では、jQueryで簡単に実装できるアニメーションについて見ていきましょう。主に、animate()を利用した基本と応用について学んでいきます。

animate()を利用したアニメーション

jQueryでアニメーションを実現するもっとも簡単な方法はanimate()メソッドを利用することです。非常に簡単な記述で、複雑なアニメーションを構築することができます。

animate()は以下のようなパターンを覚えておくと分かりやすいでしょう。

使い方としては、アニメーションさせたい要素に対してanimate()を実行するだけです。アニメーションの記述はCSSを書くのとよく似ているので簡単です。

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

この例では、テキスト要素に対してanimate()を実行していますが、その引数に設定されている値に注目してください。CSSでもよく使う【fontSize】の値を【96px】にしていますよね?

これにより、現在設定されているテキストのサイズから96pxまで少しずつ大きくなるアニメーションになるわけです。

ちなみに、CSSだと【font-size】と記述しますがanimate()の場合は【fontSize】のようにキャメルケース形式で記述するので覚えておきましょう。

複雑なアニメーションを作る

animate()の面白い点として、複数のanimate()メソッドをチェーンで連結できるところにあります。

つまり、次々とアニメーションを実行させることで、1つの流れを作ることができるのでダイナミックなWebコンテンツを作成することができます。

チェーンで繋げるというのは、例えば次のような感じです。

このように、複数のanimate()を連結させていくことで、1つずつのアニメーションが順番に実行されていくわけです。

次のサンプル例を見てください!

この例では、position:absoluteの要素に対してleftプロパティを利用してダイナミックに移動アニメーションを構築しています。

サンプルデモを以下の掲載しておきますので、ぜひ確認してみてください!

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

非同期通信(Ajax)

この章では、サーバーと通信するための非同期通信について見ていきましょう。主に、Ajaxの概要と実際のプログラミングについて学んでいきます。

Ajaxとは何か?

jQueryを利用するとサーバーとの通信も簡単に実装できるのですが、重要な技術としてAjaxがあります。これは、簡単に言うと非同期通信の技術なのですが、ポイントは通信中でも他の処理が引き続き実行できるところにあります。

例えば、普通に同期通信を行うと以下のようになります。

このように、同期通信だと処理が終了するまですべてのプログラムがストップしてしまうので、他の作業は一切できません。

これに対して非同期通信だと次のようになります。

サーバーと通信したあとにすぐ別の処理を実行できるのが特徴です。また、サーバーからデータを取得後にそれを利用した処理もしっかりと実行できるわけです。

このような背景から、jQueryを利用したサーバーとの通信にはAjax(非同期通信)が一般的に利用されているわけです。

非同期通信をしてみよう

それでは、実際のAjaxを利用した非同期通信のプログラムを見てみましょう。

もっとも基本的な実装としては、$.ajax()メソッドを利用することです。これはその名の通り、非同期通信(Ajax)を行うためのメソッドであり、簡単なオプションを付与するだけで通信処理を実現してくれます。

覚えておくべき基本パターンとしては次のとおりです!

基本的には、通信するサーバーのURLさえ分かれば簡単に実装することができます。通信の種類というのは主に【GET / POST】のどちらかを文字列で指定します。

データの種類については、どのような形式でサーバーからデータを取得するかを設定しておきます。一般的には【json】でやり取りすることが多いでしょう。

次のサンプル例を見てください!

この例では、通信のテストを手軽に行えるhttpbinというサービスのURLを使い、GET通信のデモを行っています。

通信が成功すると、サーバーから返されるJSONデータをそのままコンソールログへ出力し、失敗するとエラーログを出力するという簡単なものです。

まとめ

今回は、jQueryで何ができるのかを簡単にポイントを絞って学習をしました!

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

  • 基本となるDOM操作やイベント処理が簡単に実現できる
  • 複雑なアニメーションを簡易化してくれる
  • 非同期通信(Ajax)も簡単にプログラミングできる

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

経験豊富なエンジニアに相談したいあなたへ

「IT業界の実情についてエンジニアの生の声を聞きたい、既にIT業務の仕事をしていて解決したい課題があるから相談にのってもらいたい」そんな要望はございませんか?

周りにエンジニアをやっている人がいないと、実際の現場のことがイメージできず不安ですよね。

侍エンジニア塾の無料体験レッスンでは、ご質問内容によって「現役エンジニア」があなたの開発したいサービスへ技術的なアドバイスや、未経験から内定を獲得する転職活動の極意をお伝えいたします。

下記の無料体験レッスン予約カレンダーよりお申し込みいただけます。あなたのご相談を心よりお待ちしております。

LINEで送る
Pocket

書いた人

マサト

マサト

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

おすすめコンテンツ

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

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