【今更すぎて誰にも聞けない！】jQueryの基本を押さえておこう！

そもそもjQueryとは

「jQuery」とは、JavaScriptのライブラリのことです。ここでいう「ライブラリ」とは、JavaScriptに関連するプログラムの機能をひとまとめにしたファイルのことで、これにより、JavaScript関連の機能を利用する際の利便性が非常に高くなります。利用方法は後述しますが、ダウンロードして誰でも利用することができます。

JavaScriptを使うと何行にもなってしまう処理でも、jQueryを使えばほんの数行で済んでしまうこともあります。記述方法も簡単で、従来ならエンジニアに頼まなければならなかったような処理でも、デザイナーなど、エンジニア以外でもプログラムを扱うこともできるようになりました。jQueryはWeb開発の工数・コスト削減にも大きく貢献してきたと言えます。

ちなみに余談ですが、jQueryには、jQuery本体（jQuery Core）だけでなく、jQuery公式プラグインのjQuery UI、および、スマートフォン用のjQuery Mobileなどもあります。

jQueryを使うメリット・デメリット

まずはjQueryを使うメリットから紹介していきます。

jQueryを使うメリット

主要なブラウザに対する対応力が高いこと

メリットの1つ目としては、主要なブラウザに対する対応力が高いことが挙げられます。
ブラウザには、「Google chrome」や、「Safari」、「Internet Explorer」や「Microsoft Edge」などがありますが、それぞれ仕様が異なっており、従来のJavaScriptでは、同じようにプログラミングしてもブラウザごとによって動作が異なってしまう問題がありました。

しかし、jQueryを使うことにより、異なるブラウザであってもほとんど同じように動作させることが可能になりました。これは大幅な作業工数の削減にも繋がります。

全体のコード量を短縮化できること

メリットの2つ目としては、全体のコード量を短縮化できることが挙げられます。

JavaScriptで1つの機能を作成するのに多くのコード量を打ち込みことが必要であった場合でも、jQueryを使うことにより、従来の必要だったコード量よりも少ない量で、同じ機能を作成することが可能になります。

プログラム開発までの工期が短縮できるだけでなく、コード量が減ることにより全体の見やすさも向上します。また、コードが読みやすくなれば、ミスの削減にも繋がりやすくなります。このように、jQueryは非常に利便性が高いと言えます。

豊富なプラグインを利用することができること

メリットの3つ目としては、豊富なプラグインを利用することができることが挙げられます。

「プラグイン」とは、アプリケーションソフトウェアの機能を拡張するために追加するプログラムのことです。これにより、例えばアニメーションなどでホームページに一定レベル以上の動きを付けるなど、高度な機能を簡単に導入することができるようになります。

「プラグイン」には、アニメーションだけでなく、SNSと連携させること、レイアウト変更、などが簡単にできるようになる機能もあるので、必要に応じてチェックしてみると良いでしょう。

jQueryを使うデメリット

それでは次に、jQueryを使うデメリットを紹介します。導入の前に、長所だけでなく短所もしっかりチェックしておきましょう。

JavaScriptの理解が疎かになりやすいこと

デメリットの1つ目としては、JavaScriptの理解が疎かになりやすいことが挙げられます。

jQueryを使うことによって、高度な機能を簡単に導入することができるようになりますが、そればかりを利用していると、JavaScriptの理解が疎かになり、本質的な部分に対する理解がないことにつながるので、ミスが発生した際に適切な対応ができません。

一見すると非常に利便性が高いものなのですが、このような思わぬ落とし穴があるので、利用の際には、注意が必要です。

ファイルの読み込みにかかる時間が長くなること

デメリットの2つ目としては、ファイルの読み込みにかかる時間が長くなることが挙げられます。
前述で説明したように、jQueryには多くの機能が1つのファイルの中にまとめられているので、それらを読み込むための時間が長くなりやすいです。

しかし、近年のインターネット接続の環境は進歩しており、よほどのことがない限り読み込みにかかる時間が長くなる点について神経質になる必要性は低いと思われます。

jQueryとJavaScriptの違い

それではここで、jQueryとJavaScriptの違いを説明します。JavaScriptかjQueryか、どちらを導入するべきか迷った際などに参考にしてみてください。

まず、JavaScriptは、プロトタイプベースのオブジェクト指向スクリプト言語の1つで、アプリケーションの開発や、Webブラウザ回りの機能の構築などに利用されます。

次に、jQueryは、JavaScriptに関連するプログラムの機能をひとまとめにしたライブラリと呼ばれるファイルのことで、このファイルを利用することによって、高度な機能を簡単に導入することができます。

両者の違いは、JavaScriptがプロトタイプベースのオブジェクト指向スクリプト言語の1つであるのに対して、jQueryは、そのJavaScript専門のライブラリの1つであり、JavaScriptあってのもので、それ単体の言語として存在しているものではありません。

あくまでも、JavaScriptを利用して何か構築したい機能がある場合に、より簡単に構築できるようにしてくれる補助的ツールなのです。
また、jQueryには、ここにしかない特有の記法があります。そうしたものは、JavaScriptでは利用することができませんので、利用の際には注意する必要があります。

jQueryを使うための準備

それではいよいよ、jQueryを使う方法について解説します。

jQueryのサイトからライブラリをダウンロードする

jQueryを使うためには、初めにサイトからライブラリを自身のパソコンにダウンロードを行い、自身のサーバー上にアップする方法があります。

ライブラリを利用するための手順を簡単に説明します。

1. ダウンロードページを開いて、ファイルをダウンロードする（ライブラリを圧縮したものと、圧縮されていないものがあり、どちらかを選択します）
2. ライブラリを、制作している作業環境内のフォルダーに配置する
3. HTMLファイルの中に読み込みコードを記述し、それによりライブラリを呼び出す

この方法では、ライブラリを自身のサーバー上にアップするので、外部的なトラブルにより、インターネット接続環境に不具合が発生しても、影響を受けにくいというメリットがあります。

jQueryCDNの利用

「jQueryCDN」（https://code.jquery.com/）とは、jQueryが提供しているCDN（コンテンツデリバリーネットワーク）のことで、複数のエッジサーバーによって構成されたネットワークを使うことによって、ユーザーは自身に最も近いエッジサーバーにアクセスすることができます。

海外などの自身のデバイスから遠い場所にサーバーが設置されている場合、webページなどへのアクセスに時間がかかってしまうことがありますが、最も近いエッジサーバーにアクセスできることにより、それらへの素早いアクセスが可能になります。

「jQueryCDN」を利用する際には、「src属性」にCDN経由で配信されているURLを直接記述することによって、このサービスを利用することができます。

自分のサーバーにjQueryをダウンロードする必要がないので、小さな負担でライブラリを利用することが可能です。

jQueryの基本的な書き方

jQueryの基本的な書き方とは、どのようになっているのか、具体的には以下のような書き方を行います。

＄（ セレクタ ）. メソッド（ function（ 引数 ）｛
＄（ セレクタ ）. 命令
｝）；

「セレクタ」はクラス名やID名のことで、また、「メソッド」とは関数のことで、与えられた引数によって実行される命令内容が異なります。

上記のプログラムは、「セレクタ」によって対象とする要素を設定し、後ろに「.」を利用してメソッドとつなげることによって、対象となる要素に対しての操作行えます。

また、「$」は、「jQuery」の部分を省略した形になっており、この省略した形式で記述することが基本的な方法になっています。
さらに、jQueryのメソッドには、以下のような内容のものがあります。

• ロード時に関するメソッド（ページが表示された、他のページの遷移、データの読み込みの成功や失敗などに関するもの、（例）ready、unload、load、errorなど）
• マウスがクリックされた時のメソッド（左クリック、ダブルクリック、ボタンを押した時、離した時などに関するもの（例）click、dblclick、mousedown、mouseupなど）
• フォームに関するメソッド（フォーカスが当たった、外れた、フォームが送信される時などに関するもの（例）focus、blur、submitなど）
• 画面に関するメソッド（画面がスクロールした、ウィンドウのサイズの変更時などに関するもの（例）scroll、resizeなど）

これ以外にもjQueryには様々なメソッドがあるので、より詳しく知りたい人は、自身でも調べてみると良いでしょう。

jQueryを学ぶためのサイト

jQueryを学ぶためのサイトには何があるのか、以下において学習する上で役に立つと思われるおすすめのサイトを紹介していきます。

jQuery入門道場

こちらのサイトは、Amazonなどで発売されている本の内容の前５章をWeb上で公開しているもので、実際に筆者が作成したコードを基にjQueryの学習を進めていくことが可能です。初心者の人が理解しやすいように、あらかじめHTML、CSS、JavaScriptの基本的な内容が理解しやすいように説明されており、初心者の人でも安心して学習することができます。

初心者～中級者ぐらいの人にとって、学習の役に立てる上で非常に利便性が高い内容になっているので、一度チェックしてみると良いのではないでしょか。

40分で覚える！jQuery速習講座

こちらのサイトは、Webデザイナーやマークアップエンジニアなどのために、jQuery理解なのために必要な要点に徹底的に焦点をあて、効率的に学習を進めていくことができるように作られています。学習時間が限られている人でも、要点があらかじめ絞られているので、少ない時間で一通り学習することは可能です。

短い時間でjQueryの内容を一通り学習したい人は、一度チェックしてみると良いのではないでしょか。

jQuery入門

こちらのサイトは、jQueryを利用して品質の高いウェブサイトを作るために必要な内容について集中的に説明が行われており、本格的な学習ができる構成になっています。jQuery を利用して品質の高いウェブサイトを作るために必要な環境設定、サンプルコードの記載が用意されているので、初心者の人はもちろん、中級者以上の人にとっても学習の役に立てることができる内容になっているようです。

本格的にjQueryの内容を学習したい人は、一度チェックしてみると良いのではないでしょか。

少しのコードで実装可能な20のjQuery小技集

こちらのサイトは、Queryで使える実装をコードとサンプルとともに紹介してくれているので、実装方法を詳しく学習することができます。こちらのサイトで説明されている内容は、Queryの環境設定や基礎部分の理解などが終わっている中級者以上の人が対象の内容で構成されているので、初心者の人は別の初心者向けのサイトで学習するほうが良いと思われます。

本格的にjQueryの内容を学習したい人は、一度チェックしてみると良いのではないでしょか。

CODEPREP

こちらのサイトは、jQueryを含めた他のプログラミング言語をWeb上で実際にコードを入力していくことによって実践形式でプログラミングを学習することができます。穴埋め問題なども使いつつ、アプリを自分自身で作成していけるようになっているので、今まで学んだ内容を実際に身に着けていくことが可能です。

基本的な学習が終わり、実践的な学習がしたい人は、一度チェックしてみると良いのではないでしょか。

まとめ

いかがでしょうか。ここまで、jQueryとは何か、どのようにして使えばいいのか、などについて説明してきました。
作成したホームページに動きを付けたい時などに、jQueryなどのライブラリが利用できると非常に利便性が高いため、学習しておきたい内容の1つであると思います。
今回の記事で説明した内容を基礎に、さらに勉強してjQueryについての理解を深めても良いかもしれませんね。