jQueryとは、ジョン・レシグが開発し、2006年1月にリリースした「JavaScriptのライブラリ」です。
「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのことです。
といわれても、使ったことがない人からするとライブラリってイメージがわかないし分かりづらいですよね。
ライブラリを例えると、あらかじめ材料を切ってくれていて、すぐに料理できるように準備してくれている「カット済み野菜のようなもの」です。
もともと切ってくれている材料を使えば、手間も省けて料理も簡単にできますよね。それと同じでjQueryは、JavaScriptを使いやすいように拡張してくれているものなのです。1つの機能を実現するためにJavaScriptでは10行のコードを書く必要があっても、jQueryでは1~2行ほどで済んでしまいます。
jQueryは、WEB業界の発展に最も大きく貢献している世界標準のJavaScriptライブラリです。
JavaScriptとjQueryの違いについて
先ほど、jQueryは「JavaScriptを使いやすく拡張したもの」と述べました。これはつまり、jQueryの中身はごく普通のJavaScriptであるという意味にもなります。「jQuery」と「JavaScript」は異なる言語と思い込んでいる方も多いですが、jQueryは単なるJavaScriptのプログラムでしかありません。そのため、jQueryにできることはJavaScriptでも実現可能です。
ただし、初心者の方が少ない記述でさまざまな表現を安全に実行できるのは、jQueryの大きな魅力でもあるという点は覚えておきましょう！
WEBページで最も利用されている
WEB上で使われている技術や種類を調査して報告しているWEBサイト「W3Techs」によると、なんとWEBサイトの70%以上がjQueryを使用しているようです。
これは笑ってしまうぐらいすごい数字ですね。なぜここまで世界中で使われているのでしょうか？
その秘密はjQueryの特徴に隠されています。世界中で愛されているjQueryの特徴についてみていきましょう！
jQueryの特徴とは？
HTMLやCSSを簡単に操作できる
WEBページをみていると、下記のようなことがよく起こります。
-クリックしたら画像が入れ替わる
-マウスオーバーした要素がアニメーションのように動く
-入力フォームが入力内容に応じて変わる
-画面をスクロールしていくと見た目や数値が変わっていく
これらはすべて、JavaScriptを使ってHTMLやCSSを操作することで実現しています。もちろんjQueryでもこれらの機能を実現することができます。
なぜならjQueryはJavaScriptで作られているので、JavaScriptでできることはすべてできるようになっているからです。
jQueryを使わなくてもWEBページに動きをつけることはJavaScriptだけで実現できますが、そのためにはたくさんのコードを書く必要があります。
WEBページに動きをつけることは、思っているより大変な作業なのです。
jQueryを使えば、短いコードで実現できて、開発の効率がものすごくあがるため頻繁に使われます。
どんなブラウザでも使える。これが、jQueryが使われる最大の理由です。
ブラウザには、Windowsに標準で入っている「IE（インターネットエクスプローラー）」、Googleの「Google Chrome」、MacやiPhoneで使われている「Safari」など様々な種類があります。実は、ブラウザごとにそれぞれ微妙に仕様が違います。
それが原因で、同じJavaScriptのコードでも動かなかったり、動きが変になってしまうブラウザがあったりします。これは長年の間、WEB関係者を悩ませていた問題でした。
しかし、jQueryはこれらのブラウザの違いを吸収して、どのブラウザでも同じコードで動作するようにしてくれるのです。
jQuery UIやjQuery Mobileなどもプラグインで拡張できる
jQueryは簡単な記述で多機能なWeb開発を行えるわけですが、プラグインを作成して独自の機能を追加できる拡張機能が用意されています。これにより、jQueryの標準では提供されていない機能を自分で作ることで、オリジナルのWeb開発に活用できるというメリットがあります。
さらに、jQueryをベースに開発された公式のライブラリも提供されているのをご存知でしょうか？代表的なライブラリとしては「jQuery UI」「jQuery Mobile」があります！
「jQuery UI」はダイアログ、ウィジェット、アニメーションなどを取り入れた人気のWebサイトを簡単に開発できるのが魅力です。
「jQuery Mobile」はスマホなどのタッチ操作や画面に最適化されたWebサイトを素早く開発できるライブラリです。
これらのライブラリも同じようにプラグインを作成して自分で機能を拡張することが可能なのです！
実際のプラグイン作成事例については、次の記事でサンプルデモと一緒に確認できるのでぜひ参考にしてみてください！
【2016年最新】jQueryおすすめ便利プラグインまとめ9選デモ解説付
jQueryの使い道は？
jQueryは、JavaScriptからできているので、主にWEBで使われます。
その中でも、特にjQueryが使われているものをご紹介します。
WEBサイトを制作する
WEBサイトの中でも、商用のホームページやECサイトでよく使われています。ユーザーの注目を引くためにアニメーションを使ったり、次に押してほしいボタンを目立たせて操作を間違えないようにするためなどに使われます。jQueryは、WEBページの品質を上げるためには欠かせないものです。
WEBアプリを開発する
主に小〜中規模のWEBアプリで使われています。WEBアプリでは、WEBページ以上にユーザーの使いやすさが重要になってきます。JavaScriptの技術が勝負を決めるといっても過言ではありません。なので、ブラウザの違いを気にしないようにするためにjQueryを使うことも多いです。
なお、規模が大きいものは、より簡単に開発ができる「フレームワーク」が優先されます。
jQueryの使い方は？
ここからは、jQueryの基本となる導入から簡単な使い方までを詳しく見ていきましょう！
jQueryファイルの読み込み方
まずはjQueryを利用するにあたり、一番最初に行うのがjQueryファイルの読み込みです！冒頭でも解説しましたが、jQueryはあくまでもJavaScriptプログラムですので利用する前に読み込んでおく必要があります。
ファイルの読み込み方法は2種類あります。1つ目は、ファイルをダウンロードしてから読み込む方法です。
jQueryの公式サイトからファイルをダウンロードしたら、以下のように記述します！
<script src="ファイルのパス/jquery-min.js"></script>
jQueryのファイルを配置しているパスをscriptタグに記述すれば利用可能になるわけです。
また、2つ目の方法としてWebから直接jQueryファイルを指定して読み込む方法もあります！
この方法だと、ファイルをダウンロードしてサーバーへ設置する手間が掛からないので手軽に利用できて便利です。
例えば、jQueryが公式に公開しているファイルパスを利用すると以下のようになります。
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
この1行をHTMLに追記するだけで、すぐにでもjQueryを利用することができるようになります。
また、どちらの方法であっても「/body」の直前に記述するのがオススメです。
HTMLがすべて表示されてからjQueryを読み込んだ方が、ユーザーに読み込み時間を意識させなくて済むというメリットがあります。
「min.js」の扱い方について
みなさんは、jQueryファイルに2種類の形式があることに気づきましたでしょうか？
一般的には「jquery.js」「jquery.min.js」という2種類があるわけですが、どちらもまったく同じ動作をします。
それでは、両者の違いは一体どこにあるのでしょうか。実は、「min.js」と書かれたファイルは圧縮版（minified）という意味で、改行・コメント・インデントなどをすべて削除しています。
これにより、ファイルの容量を限りなく小さくして読み込み時間を高速化しているわけですね。反対に「jquery.js」のファイルは非圧縮版（uncompressed）で、開発者がコードを見ながらデバッグしやすくしているわけです。
このような理由から、本番の運用時には「jquery.min.js」のファイルを使用するのがオススメというわけです！
セレクタ指定による記述の方法
それでは、実際に簡単なjQueryプログラミングを試してみましょう！jQueryプログラミングの記述方法は、【 対象要素 ＋ 行いたい処理 】の組み合わせだけで実現できるのでとても簡単です。
例えば、「h1要素」に対して「文字列を変更したい」と考えたとします。すると、先ほどの記述方法に当てはめると【 h1 ＋ 文字列を変更する 】という組み合わせになるわけです。jQueryでは「セレクタ指定」によって、「h1要素」を簡単に見つけることができます！
$('h1')
このように「$(‘ ‘)」の中へ目的の要素を記述することを「セレクタ指定」と呼んでいます。たったこれだけでの記述で、h1要素に対するさまざまな処理が可能になるわけです！
また、h1要素の文字列を変更したければ「text()」メソッドが標準で用意されています。
text('Hello World')
「text( )」の中に文字列を記述するだけで、その文字列が画面に出力されるわけです。
以上の内容をまとめると、【 $(‘h1’) ＋ text(‘Hello World’) 】という記述で目的が実現できることが分かりますね！
コードにすると次のとおりです。
$('h1').text('Hello World');
jQueryでは「.（ドット）」で連結することで、対象要素と行いたい処理を組み合わせることができるのです。
セレクタ指定について、さらに詳しい使い方や活用事例を次の記事でまとめているので知識を深めたい方は参考にしてみてください！
これで完璧！jQueryのセレクタ操作を完全理解するコツまとめ！
find()で子要素を取得する方法
「find()」メソッドについて基本的な知識を学習していきましょう！
「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッドです。
この子要素は「子孫要素」とも呼ばれたりしますが、分かりやすいように実際のHTMLで見てみましょう！
<body> <div id="wrap"> <p>テキスト</p> <div> <a href="#">リンク</a> </div> </div> </body>
この例では、いくつかの階層構造になったHTMLが配置されていますね。
例えば、id属性値「wrap」が付与されたdiv要素に対して、1つ下の階層にある「p要素」は子要素と言えます。そして、同じ階層にあるdiv要素のさらに1つ下の階層にある「a要素」は子孫要素と言えるわけです。
つまり、1つ下の階層にある要素は「子要素」であり、それ以下の階層にある要素に関しては「子孫要素」となります。
「find()」は、この「子孫要素」を操作するのに大変便利です。
「find()」を使った「子孫要素」を操作について、詳しい使い方や活用事例を次の記事でまとめているので知識を深めたい方は参考にしてみてください！
【jQuery入門】find()で子要素を取得する手法まとめ！
jQueryの仕事市場は？
「jQueryだけ覚えても仕事はできますか？」と聞かれることがあります。jQueryだけだとちょっと厳しいかもしれません。ただ、HTMLやCSSの知識を身につける、UIやUXの知識を身につける、他のJavascriptライブラリも使えるようにするなど、少し頑張れば仕事はたくさんあります。
jQueryのおすすめ学習方法は？
jQueryの特徴や使い道がなんとなく理解できたら、最後はおすすめの学習方法をご紹介します。
初心者がやるべきこと
jQueryは、HTMLやCSSなどに比べて学習教材が少なかったりするので、どうやって学べば良いのかわかららなかったりすると思います。
しかし、おすすめの学習教材や、学ぶ順番、実践的に使いこなすコツなどはしっかりありますので、それらを学んで、効率よく習得していきましょう！
jQueryのおすすめ学習方法に関して詳しくはこちらからどうぞ。
【完全保存版】jQuery初心者がまず最初にやるべき10のコト
書籍で学習
jQueryのみならず、プログラミングの基礎をしっかりと固めたり、幅広い知識を身につけるのであれば書籍での学習が一番です。
jQueryの使い方が分かってきたら、次は基礎を固めるために書籍を使って幅広い知識を身につけるようにしましょう！
実践で使われる技術を解説している書籍も多いので現場で役に立ちます。
そんな実践的な知識を学べるオススメの書籍はこちらでご紹介しているので、ぜひ参考にしてみてください！
【保存版】jQueryの学習本をレベル分け！入門、中級、上級全6冊
まとめ
いかがでしたでしょうか？
入門者にもわかりやすいように、jQueryの特徴や使い道、おすすめ学習方法などをご紹介してきました。
他にもJavaScriptライブラリがたくさんある中、jQueryが選ばれるにはそれなりの理由があったのです。
ぜひ、jQueryを身につけて素敵なWEBサイトやWEBアプリを作ってみましょう！
