jQueryとは~入門編~読み込み方法とできること

初心者向け学習方法一覧はこちら

本記事ではJavaScriptのライブラリ「jQuery」について解説します。 jQuaryを利用すると短くてシンプルなコードを記述するだけでWebページに様々な動きをつけたり、複雑なコンテンツ操作を実装できるため、1からJavaScriptで開発するよりも効率的かつメンテナンスがしやすいというメリットがあります。

jQueryについて解説する前にJavaScriptのみでWebページの見た目を変化させる例を試してみましょう。 サンプルコードでは「小さく」「普通」「大きく」という3つのボタンがあり、ボタンをクリックすると文字サイズが変化します。

※読み込めない場合はRun Penをクリックしてください。

サンプルコードは要素を指定するための記述が長い上に、それぞれの関数で同じ記述を繰り返しているので冗長なコードになっています。 このように長く冗長な記述をすっきりとさせることができるのがjQueryです。

jQueryはJavaScriptのライブラリの1つで、世界中で利用されています。 利用ユーザーが多いのでドキュメントも豊富にあり、エラーが発生してもWebで検索すれば解決方法が探しやすいという利点があります。

ライブラリというのは汎用的に使えるコードをまとめて提供してくれるものです。

例えば写真をスライドで表示する、住所などを入力した項目をチェックするなどは様々なWebページで取り入れられていますが、1つのページを作成するたびに長いコードを記述するのは非効率ですし、バグを作り込む原因にもなります。

そこでライブラリとして提供されている機能を利用することで効率的かつメンテナンス性を高くすることができます。

1人で開発をしているとメンテナンス性を気にすることが無いかもしれませんが、後ほど修正をする場合やチームで開発する場合はコードの複雑さが問題になります。 ライブラリを利用すれば複雑な処理も簡潔に記述できるので、修正を加えたり他の人のコードを確認したりする際も理解がしやすいです。

jQueryにはHTMLやCSSの操作を行うための機能がたくさん含まれています。

jQueryを利用する主なメリット

jQueryの記述様式はCSSと親和性が高いので、HTMLやCSSの知識があれば習得しやすいというメリットがあります。 DOM（Document Object Model）というのはWebブラウザがHTMLファイルから読み取った要素を解析してデータ構造に変換したものです。Webページの表示をブラウザ上で更新するには、このDOM要素を取得して書き換える必要があります。 jQueryにはDOM要素の取得や書き換えを簡単に行える仕組みがあります。

スライドショーのように動きのあるアニメーション効果や、ユーザーの操作で表示を切り替えるインタラクティブな処理はJavaScriptだけで実装しようとすると複雑なコードを記述しなければいけません。 jQueryのコードにはよく使われるアニメーションやインタラクティブな処理を実現するコードが多く含まれています。 また、jQueryはクロスブラウザ対応で多くのブラウザをサポートしているので、ブラウザの違いを意識しなくでも大丈夫です。 対応しているブラウザはこちらのページで確認できます。 https://jquery.com/browser-support/

jQueryには追加で利用可能なプラグインとプラグインをまとめた拡張ライブラリが用意されています。 プラグインとはもともとあるjQueryのコードに機能や効果を追加するものです。 プラグインを追加することでよりリッチな表現も可能になります。

それでは実際にjQueryを使う準備をしていきましょう。 jQueryは必要なファイルをダウンロードして利用する方法もありますが、今回はCDNを利用します。

CDN（Content Delivery Network）は特定のファイルをダウンロードせずにネットワーク経由で利用する仕組みです。 利用方法はjQueryのCDNを公開しているサイトから埋め込むリンクを取得して貼り付けるだけなので、手軽に始められます。

jQueryのCDNを利用する手順は以下のとおりです。

ここからはjQueryを利用して動きのあるWebページを作成してみましょう。

まずはJavaScriptで実装した、ボタンをクリックすると文字サイズが変化するコードをjQueryで実装してみましょう。

※読み込めない場合はRun Penをクリックしてください。

実行結果はJavaScriptで実装したものと同じですが、要素の指定が簡潔なコードになっています。

jQueryでは要素を指定するためにセレクタというものを使います。 セレクタには様々な指定方法があり、さらに複数の条件を組み合わせて指定することも可能です。 サンプルコードではtitleという名前のidをセレクタとして指定しています。 jQueryのセレクタの記述は簡潔で、idを指定する場合は「$("#セレクタ名")」で要素を指定することができます。

また、指定したセレクタ名の要素に対して行う操作をそのまま記述できます。 1つの要素に対して複数の処理を行いたい場合はメソッドを.（ドット）で連結したメソッドチェーンという方式で記述可能です。

2つ目はオブジェクトの表示・非表示を切り替えるコードをjQueryで実装してみましょう。 サンプルコードではjQueryのhideメソッドとshowメソッドを使っています。

※読み込めない場合はRun Penをクリックしてください。

hideメソッドは対象のオブジェクトを非表示状態にします。 showメソッドは対象のオブジェクトを非表示状態から表示状態にします。

青い四角のbox2の関数ではhideとshowに引数で速度を指定する要素を渡しています。 ゆっくりになる”slow”とすばやい動きになる”fast”です。 引数なしの場合は瞬時に表示・非表示が切り替わりますが引数で指定することでアニメーションの速度を調整できます。

”slow”、”fast”以外にもミリ秒単位でアクションを実行する時間を指定する方法もあります。

詳細はjQueryの日本語リファレンスからご確認ください。

3つ目はオブジェクトに簡単な動きをつけるコードをjQueryで実装してみましょう。 サンプルコードではCSSのプロパティを変化させて動きをつけています。

※読み込めない場合はRun Penをクリックしてください。

赤い四角のbox1はCSSメソッドを呼び出してtransformプロパティのrotateに変更を加えています。 transformはCSSのプロパティで「translate（移動）」「rotate（回転）」「scale（拡大）」「skew（傾斜）」の4種類の動きをつけることができます。

青い四角のbox2はマウスカーソルをのせると不透明度が0となり、消えたように見えます。 mouseoverとmouseoutでマウスカーソルをオブジェクトの範囲にのせたときと離れたときを検知しています。 イベントを検知したタイミングでanimateメソッドを呼び出してopacity（不透明度）を変化させています。

このようにマウスカーソルのイベントを検知して動く仕組みはWebサイトのメニューなどでも多く使用されています。

サンプルではjQueryで見た目に変化をつけるものを紹介しましたが、それ以外にもjQueryでできることはたくさんあります。

ブラウザ上だけではなくサーバと非同期通信を行うにもjQueryを利用します。 サーバとの通信に関しては次の記事で詳しく解説します。

他にも文字列の検索や、並び順を変更するソートなどデータを扱うメソッドもあります。 クリックやマウスカーソルの動きで変化するインタラクティブなメニューなどは、プラグインの種類も豊富なので好みや要件に合うものを探してみてください。

今回はJavaScriptのライブラリであるjQueryについて解説しました。 jQueryを使うことでJavaScriptで記述すると複雑になる処理も簡単な記述で実装できることがわかりました。 jQueryを活用して効率的に開発を行いましょう。

次回はjQueryのサーバと非同期通信する仕組みやAPIを活用する方法について解説していきます。

外部サービスと連携することで、自身で開発せずとも様々なコンテンツをWebサイトに取り入れることができるようになります。

転職を検討中の方向け

フリーランス・副業で活躍したい方向け

教養・キャリアアップしたい方向け

給付金について詳しく知りたい方向け