Web制作やWebアプリ開発を習得するうえで欠かせないのがjQueryの知識です。
基本的なWebページを作れるようになると、より高度な動きを実装したくなりますよね。
とはいえ、HTML・CSSしか触ったことがない。jQueryとJavaScriptの違いが分からないためどちらから学べばいいかわからない。と思っている方も多いのではないでしょうか。
jQueryを理解すると、格段にリッチなサイトが作れるようになります。
またjQueryの知識はコーダーやエンジニアのみならず、デザイナーの方も抑えておくべき知識です。
本記事ではjQuery初心者の方に向けてjQueryでできることから、メリットや基本的な使い方まで解説します。
これまでjQueryが分からなかった方もこの機会に基本を覚えてみましょう！
jQueryとは
jQueryとはJavaScriptで書いていた内容を、より簡単に分かりやすく記述するためのJavaScriptライブラリ（プログラムを簡単に書くための機能をまとめたもの）です。
通常のJavaScriptを記述する場合、コード複雑さやブラウザによる挙動の違いなどが開発者を悩ませる1つの要因となっていました。
しかしjQueryが登場したことにより、JavaScript同様の動きをより分かりやすく少ないコードで実装することができるようになりました。
より詳しくは以下の記事をご覧ください。
jQueryの基礎知識
ではjQueryを使用するとどのようなことができるのでしょうか。
jQueryの代表的な使用例を3つ見てみましょう。
DOM操作
DOM操作とはWebサイトの色や配置といったレイアウトを、動的に操作する動きのことです。
HTML・CSSのみで構成されたページを静的なページと言い、静的なページ単体では複雑な動きを再現することができません。
jQueryを使用することによって、JavaScriptよりも手軽に、動的でリッチなサイトを作ることができるのです。
jQueryプラグイン
jQueryプラグインとは、基本のjQueryライブラリと合わせて使う拡張機能のことです。
いくら手軽に実装ができると言えど、1つの動きを1から作るためにはそれなりに時間を要します。
そこでjQueryにはポップアップや画像スライダーといった汎用的な動きをより簡単に実装するためのプラグインが用意されています。
プラグインを読み込むことで実際に記述するソースを最小限に抑えることができます。
プラグインについてより詳しく知りたい方は以下の記事をご覧ください。
Ajax
Ajaxとはサーバー側と非同期通信を行う仕組みのことです。
本来ブラウザは画面を更新する時にさまざまな通信を行いますが、Ajaxを用いると画面を更新することなく外部サービスなどと通信をすることができます。
通常のJavaScriptでAjax実装すると膨大なコード量になりますが、JQueryを使用することでシンプルかつ分かりやすい記述で読みやすくなります。
jQueryを使用するメリット
手軽に実装ができる
jQueryのメリット1つ目は、とにかく手軽に実装ができることです。
jQueryライブラリの読み込み自体はソースを1行追加するだけで良いので、複雑な工程を必要としません。
またセレクタの指定など一部の記述がCSSと似通っているため、既にCSSの知識がある方であれば基本的な部分は理解しやすいです。
コード量を短縮できる
jQueryのメリット2つ目は、JavaScriptで記述する場合と比較してコード量を短縮できるという点です。
またJavaScriptとjQueryを併用することも可能なので、jQueryで実装が難しい部分をJavaScriptで補うといった柔軟な対応ができます。
多くのブラウザに対応している
ブラウザにはCorome・Safari・Firefoxとさまざまな種類があります。
それぞれのブラウザは仕様が異なるため、通常のJavaScriptで実装するとブラウザごとに挙動が異ってしまう問題がありました。
しかしjQueryは記述したコードが多くのブラウザで同様の動作をするように設計されているため、ブラウザ間で発生する問題を意識することが少なくなりました。
これにより大幅に実装時間を短縮することができるようになりました。
jQueryの基礎文法と使い方を知ろう
jQueryを読み込む
jQueryにはCDNを使う方法と直接ファイルをダウンロードする方法がありますが、今回はCDNを使った読み込み方法をご紹介します。CDNで読み込む場合は以下の1行をHTMLに記述するだけです。
■HTMLファイル
追記する場所は、HTMLやCSSファイルの描画の関係上bodyタグの下部で読み込むのが良いとされていますが、基本的にheadタグもしくはbodyタグ内に追記すれば動作します。
基本文法
jQueryはJSファイル、もしくはHTMLにscriptタグを用意してその中に記述します。
jQueryを書き始める場合は下記の様な構文を記述する必要があります。
■JSファイル
$(function() {
//後ほど処理を書いていく部分
});
//でコメントアウトしている部分が実際の処理を書く場所で、処理自体を囲っている記述は「ページが読み込まれたとき」を表す構文です。
jQueryを書く場合には処理自体を囲っている部分も忘れずに書きましょう。
セレクタ
では先ほど書いた基本構文の中に実際に処理を書いてみましょう。
まずはHTML側でidを指定している要素に対して処理を適用する場合です。
■HTMLファイル
idを付与したテキストです。
■JSファイル
$(function() {
$("#text");
});
$()の中に#でid名を指定することで、HTML側でidがtextとなっている要素を指定することができました。CSSでidを指定する場合と同じ書き方ですね。
classを指定したい場合もCSS同様に「.」を使用して記述します。
この状態では何も起こりませんが、$(“#text”)の後ろにさらに処理を書くことでテキストに変化を加えることができます。
メソッド
セレクタで指定した要素に対してあらゆる処理を命令するのがメソッドです。
試しに先ほど指定したセレクタに対して、CSSを指定するメソッドを適用してみましょう。
■JSファイル
$("#text").css("color", "RED");
.css(“color”, “RED”)という文を追記しました。これは指定したテキストにCSSのcolor: RED;を適用するという意味合いです。
実際に画面を更新するとテキストが赤色になります。
今回はcssメソッドでCSSを適用しましたが、他にも要素を削除したり属性を付与したりと目的に応じてさまざまなメソッドが存在します。
代表的なメソッドを一部ご紹介します。
- hide()：要素を非表示にする
- show()：非表示の要素を表示する
- addClass()：クラスを追加する
- removeClass：クラスを削除する
- remove()：要素を削除する。
- text()：要素内のテキストを取得・書き換えする
- attr():要素に任意の属性を付与する
イベントハンドラ
イベントハンドラを使用すると、何かイベントが発生した時に処理を実行するという動きができます。
ここでいうイベントとは、クリックやスクロール、マウスオーバーなどの動作のことです
試しにクリックしたときにテキストを赤色にする動きを実装してみましょう。
■HTMLファイル
idを付与したテキストです。
■JSファイル
$("#button").on("click", function() {
$("#text").css("color", "RED");
});
上記のソースのようにイベントハンドラを使用する場合にはonメソッドを使用して、.on(“動作”,function(){処理の内容})という形で記述します。
イベントハンドラを使いこなせるようになると、メニューの開閉やポップアップなどの実用的な機能を実装できます。
onメソッドを使ったイベント処理に関しては過去の記事でも解説していますので、参考にしてみてください！
jQueryの基礎を身に着けるためにおすすめの教材
学習書
学習書で学ぶメリットは個人のレベルに合わせてさまざまな書籍が販売されているという点です。
jQueryの基礎を中心に徹底解説しているものから、現場で活用できるリファレンスとして活用できるレベルのものまで幅広い書籍が存在します
初心者に特におすすめの書籍は以下の2つです。
- jQuery最高の教科書
- jQuery入門道場
当サイトでも過去におすすめのjQuery学習書を紹介しています。その中でさらに詳細に解説していますので合わせてチェックしてみてください！
無料学習サイト
jQueryを無料で学習できるおすすめサイトは以下の2つです。
- ドットインストール
- Progate
どちらも無料でjQueryの基礎を学ぶことができるサイトです。
動画で丁寧に解説したり、ゲーム感覚でコードを書くことができるので初心者でも理解しやすい内容になっています。
まずお金を掛けずに基礎を学んでみたいという方には学習サイトがおすすめです。
プログラミングスクール
上記で挙げた学習書・学習サイトを利用すると独学で学習ができ、費用もそれほどかかりません。
しかし完全に独学だと挫折しそうで不安だという方も少なくないかと思います。
特にプログラミング未経験の方はそもそも何から手を付ければよいかで立ち止まってしまう方が多いです。
そんな方は現役エンジニアに教えてもらえるプログラミングスクールを利用するのがおすすめです。弊社「侍エンジニア」では現役エンジニア講師によるマンツーマンレッスンで、個人のレベルに合わせて常に講師が徹底指導します。
右も左も分からないといった方も、まずは無料カウンセリングにてお気軽にご相談ください！（オンラインで全国対応OKです)
まとめ
jQueryの基礎について理解は深まりましたでしょうか？
HTML・CSSと比べて難易度は上がりますが、jQueryを習得するとよりクオリティの高いWebサイトを作ることができるようになります。
jQueryをマスターしてWeb制作者として一歩ステップアップしましょう！
