Web制作をはじめるために、HTML/CSSを勉強し、ある程度のサイトを作れるようになると、より表現の幅を広げたくなりますよね？
例えば、画像のスライドショーを入れてみたり、クリックされたときにエフェクトを入れてみたり。
そこでおさえておきたいのが、jQuery！
jQueryを使用できるようになれば、あなたが作成するサイトのデザイン性も格段に飛躍します！
デザインのスキルを向上させたい！という方には必須とも言える知識であるため、Webサイト制作をしている人は、jQueryの基礎も身につけていきましょう。
そもそもjQueryとは？
jQueryとは、プログラミング言語であるJavaScriptを簡単・簡潔に使えるようにしたライブラリのこと。
(※ライブラリとは、使用頻度の高いプログラムや機能を事前に作成し、再利用できるようにしたもの)
つまりjQuery を使用することで、これまで数十行にもわたってJavaScriptのコードを書く必要がなくなり、シンプルに記述できるようになりました。
jQueryでできること
- スライドショー(フェードインやフェードアウトなどなど)
- マウスオーバーによるエフェクト
- スクロールの量に応じて見た目の変更
- メニュー機能の追加
- ソートや検索機能の制作
- リアルタイムで動く画像の作成
などなど、jQueryを使用することで、サイト内の要素に動きや変化をつけることができます。
jQueryを使用するメリット
手軽に実装できる
jQueryのなかにはCSSでも実現できるモノもありますが、一度jQueryを覚えてしまえば、短い記述でデザイン性の高いサイトを作ることができます。
対応しているブラウザが多い
2022年現在、ChromeやSafari、Firefoxなど様々なブラウザがあります。
それぞれのブラウザによって使用が異なるため、対応していない言語は、ブラウザごとに対応する必要があります。
実際、JavaScriptで実装すると、ブラウザによって挙動がおかしくなる問題がありました。しかし、jQueryは多くのブラウザで同じ挙動をするよう設計されているため、ブラウザ間での問題を心配する必要がなくなりました。
大幅な時間削減につながるため、jQueryで実装できる箇所はJavaScriptではなく、jQueryを使用することをおすすめします。
ほぼ毎年バージョンアップを実施！
2006年に「jQuery 1.0」がリリースされて以降、ほぼ毎年バージョンアップが実施されています。(2022年1月現在は、jQuery 3.6.0)
毎年のようにパフォーマンスを向上しているのが大きな特徴です。
年数が経過するたびに使いやすくなっているので、jQueryの知識を習得しておくメリットは、大いにあるのではないでしょうか。
jQueryの基本形
【基本形】
$(“セレクタ”).メソッド(“パラメータ[引数]”);
jQueryの基本：セレクタ
jQueryのセレクタは、CSSの「#id」や「.class」と同じように、対象となる要素を指定する箇所になります。
【例】
#id→$(“#id”)
.class→$(“.class “)
子セレクタ→$(“p a “)
jQueryの基本：メソッド
メソッドとは、オブジェクトを操作する命令文のこと。
jQueryに限らず、ほどんどのスクリプト言語で「メソッド」という仕組みが必要となります。
メソッドの使い方は、先ほど紹介した$(“セレクタ”)の後に「.」でつなげる形で記述していきます。
$(“セレクタ”).メソッド
このような構文を「ドットシンタックス」と呼び、「どのオブジェクトが何をするのか」という処理が完成します。
jQueryのオブジェクトに利用できるメソッドは非常にたくさんありますが、処理を実行するためにはメソッドの後に()が必要という共通点があります。
全てのオブジェクトに共通しているので、この機会に覚えておきましょう！
jQueryの基本:メソッド (引数)
jQueryを勉強し始めた初心者の方がまず躓くのが、メソッドのパラメータ(引数)に関数を渡す形式です。
パラメーター(因数)とは、メソッドに渡す情報のことで、()内に記述します。
【例】
$(function(){
$(“body”).text(“jQuery!”);
});
上記のような記述を行うと、bodyになにも記述がなくても、.textメソッドを使用しているため、jQueryと表記されます。
ここまで、オブジェクトとメソッドについて紹介してきました。
$(“セレクタ”).メソッド(“パラメータ[引数]”);
上記がjQueryの最低限の処理を行うために必要な記述になりますので、しっかり覚えておきましょう！
jQueryの基本:メソッド (メソッドチェーン)
同じ要素に複数の命令文を書くときに使うのが、メソッドチェーンという記述方法。
チェーンという名の通り、「.」ドットをチェーンのように繋ぐため、メソッドチェーンと言います。
例えば、下記のように2つにわかれていた記述を、
$(“#id”).css(“color”, “blue”);
$(“#id”).addClass(“additional”);
一つに繋げると以下の通りになります。
$(“#id”).css(“color”, “blue”).addClass(“additional”);
メソッドチェーンの記述方法を覚えるだけで、要素の指定が一度で済み、処理速度も早くなります。
同じ要素に異なるメソッドを使用する際は、メソッドチェーン方式で記述する方がよいでしょう！
以上がjQueryの基本的な記述方法です。
jQueryの使用例
クリックされたらテキストを変更！
※テキストをクリックすると変化します。
【解説】
セレクター・・・#message(idセレクタ)
メソッド・・・.click .text
.clickメソッドは、クリックした時のアクションを命令します。
.textメソッドは、パラメーター(引数)に記述したテキストを記述します。
クリックするとバックグラウンドが黄色に変更！
※テキストをクリックすると変化します。
【解説】
セレクター・・・.message(classセレクタ)
メソッド・・・.click .css
.clickメソッドは、クリックした時のアクションを命令します。
.CSS・・・jQueryから直接スタイルを変更することができます。
まずはjQueryの基本を身につけよう！
いかがでしたでしょうか。今回は、jQueryの基本的な使い方と使用例について紹介してきました。
jQueryを使用できるようになると、サイト制作の幅が広がると感じることができたのではないでしょうか。
jQueryには、ここでは紹介できていないセレクターのルールやメソッドの種類がたくさんあります。
まだまだ身につけなければならないことはたくさんありますが、その全てにjQueryの基本的な考えは共通しています。
そのため、まずは基本的な構文をしっかり身につけていきましょう！
基本が身につけば、応用にも対応できるようになります。焦らず少しずつ勉強していきましょう！
