POINTjQuery / ジェイクエリーとは

jQueryとは、JavaScriptで作成された、オープンソースなJavaScriptライブラリの1つです。ここで、ライブラリとは、ある機能についてのプログラムを再利用可能な形にまとめたファイルのことをいいます。つまり、jQueryを用いれば、本来であれば数十行にもわたる複雑なJavaScriptのプログラムを短いコードで実装できるなど、より簡単な記法でJavaScriptを使うことができるようになります。

jQueryは世界的によく用いられており、特にWebサイトの制作現場において、アニメーションやエフェクトなど、ダイナミックな動きのある表現を用いたWebサイトの作成などに使われています。

jQueryのメリット

JQueryのメリットを3つ挙げます。

①短いコードで簡単にJavaScriptの機能を実装できる
クリックすると画像が入れ替わったり、マウスの動きに応じて映像が変わったりするなど、JavaScriptで実装できる動きのある機能が、jQueryを用いれば短いコードで簡単に実装できます。そのため、開発時間の短縮につながります。

②ブラウザに依存しない
JavaScriptは、GoogleChromeやSafariなど、ブラウザの種類によって記述の仕方や表示されるレイアウトに若干の違いがあります。しかし、jQueryはクロスブラウザ対応であるため、そういったブラウザによる挙動の差を意識せずに記述することができます。

③プラグインを作成して独自の機能を拡張できる
jQueryでは、プラグインを用いることで様々な機能を追加することができます。主なプラグインには、アニメーションなどを取り入れたWebサイトを簡単に作成できる「jQuery UI」や、Webサイトをスマホのタッチ操作や画面サイズに素早く対応させるための「jQuery Mobile」などがあります。

jQueryのデメリット

jQueryのデメリットを2つ挙げます。

①処理が遅くなる場合がある
jQueryを用いたページでは、ページを表示する際にコードを読み込む必要があります。そのため、プラグインを多用しすぎると、コードの読み込みに時間がかかり、Webサイトの表示速度が遅くなってしまいます。表示速度が気になる場合は、jQueryではなく通常のJavaScriptで書いた方が良い場合もあります。

②他のライブラリと共存しない
WebサイトやWeb開発の現場では、jQuery以外にも様々なライブラリがありますが、多くのライブラリはjQueryと一緒に使うことができないので注意が必要です。

jQueryの用途

jQueryはJavaScriptをもとに作られているため、JavaScriptがよく使われているWeb関連の開発でjQueryもよく使われています。中でも、特にjQueryが使われている場面として、「Webサイトの作成」と「Webアプリの開発」の２つが挙げられます。

①Webサイトの作成
jQueryでは、ユーザーの興味を引くために、ダイナミックな表現を用いたWebサイトの制作が可能です。具体的には、外部ファイルを読み込んでページに表示することのできるAjax処理やアニメーションの再生などができます。

②Webアプリの開発
小規模から中規模なWebアプリの開発にも使われます。jQueryを用いれば、様々なブラウザに対応したアプリの制作をすることができます。

jQueryの利用方法

jQueryを利用するためには、開発しているHTMLの中にjQueryを記述し、読み込んでおく必要があります。jQueryの読み込み方としては2種類あります。

①Web上のjQueryのソースを読み込む方法
HTMLのbodyタグ内の最下部に
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
という記述をすることで、jQueryが利用できます。jQueryではサーバー上に公開されたプログラムを自由に使うことができるため、このような記述でjQueryが利用できます。HTMLのコードよりも先にjQueryが読み込まれると、結果的にjQueryが動かないといった不具合が起こる場合もあるので、記述場所には注意が必要です。

②ダウンロードしたjQueryファイルを読み込む方法
公式サイトからjQueryファイルをダウンロードし、サーバーにアップして利用します。
<script src="ファイルのパス/jquery-min.js"></script>
という記述をすれば、jQueryが利用可能です。

jQueryの基本的な記述

jQueryの基本的な記述では、「セレクタ」と「メソッド」を用いて以下のように記述されます。

$(‘セレクタ’).メソッド();

セレクタは操作する対象を表し、class名やid名、タグなどによって指定します。また、メソッドはセレクタで指定した対象に対し、どんな操作をするのか記述します。
例えば、文字をpタグで囲んだ文字を青色にしたい場合は、

$(‘p’).css(‘color’,’blue’);

と記述できます。

jQuery / ジェイクエリーに関係した気になる話題

jQueryの今後の動向

jQueryは現在もWebの開発現場ではよく用いられているライブラリですが、最近は「jQueryは時代錯誤だ」と言われることもあります。

jQueryがリリースされた当初は、バージョンによって動作が異なるInternetExplorerなど、ブラウザごとに大きく挙動が異なったため、ブラウザの違いを吸収してJavaScriptの機能を実装できるライブラリとして人気を集めていました。しかし、近年ブラウザ間の違いがそこまで大きいものではなくなり、また、標準のJavaScriptでできることも増えたため、jQueryの重要性が当時よりも薄れてしまいました。

最近では、新たなフレームワークとして、HTMLに紐付いて表示を変更できる「Vue.js」や、Googleが開発しているWebアプリ開発に人気の「Angular」などが登場しています。