今回は、jQueryとはどういう言語なのか？を徹底的に解説していきます！
「jQueryってそもそも何？」
「jQueryは一体何ができるの？」
「JavaScriptとjQueryは何が違うの？」
このような内容も含めて、本記事では以下のような構成で解説していきます！
【基礎】「jQuery」の使い方
【実践】「jQuery」の特徴
【実践】「jQuery」の使い道・使い分け
【実践】「jQuery」と「JavaScript」の違い
【実践】「jQuery」の学習方法
この記事で、jQueryをしっかり学習してスキルアップを目指していきましょう！
この記事の目次
jQueryとは？
jQueryとは、ジョン・レシグが開発し、2006年1月にリリースした「JavaScriptのライブラリ」です。（JavaScriptって何？って方は、まずこちらの記事をご覧ください。）
「ライブラリ」とは、ある程度まとまったプログラムをあらかじめ作ってくれているファイルのことです。
といわれても、使ったことがない人からするとライブラリってイメージがわかないし分かりづらいですよね。
ライブラリを例えると、あらかじめ材料を切ってくれていて、すぐに料理できるように準備してくれている「カット済み野菜のようなもの」です。
もともと切ってくれている材料を使えば、手間も省けて料理も簡単にできますよね。
それと同じでjQueryは、JavaScriptを使いやすいように拡張してくれているものなのです。
1つの機能を実現するためにJavaScriptでは10行のコードを書く必要があっても、jQueryでは1~2行ほどで済んでしまいます。
jQueryは、WEB業界の発展に最も大きく貢献している世界標準のJavaScriptライブラリです。
jQueryはJavaScriptのプログラム
先ほど、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サイトを素早く開発できるライブラリです。
これらのライブラリも同じようにプラグインを作成して自分で機能を拡張することが可能なのです！
実際のプラグイン作成事例については、次の記事でサンプルデモと一緒に確認できるのでぜひ参考にしてみてください！
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の公式サイトからファイルをダウンロードしたら、以下のように記述します！
|
1 |
<script src="ファイルのパス/jquery-min.js"></script> |
jQueryのファイルを配置しているパスをscriptタグに記述すれば利用可能になるわけです。
また、2つ目の方法としてWebから直接jQueryファイルを指定して読み込む方法もあります！
この方法だと、ファイルをダウンロードしてサーバーへ設置する手間が掛からないので手軽に利用できて便利です。
例えば、jQueryが公式に公開しているファイルパスを利用すると以下のようになります。
|
1 |
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> |
この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」のファイルを使用するのがオススメというわけです！
JavaScriptとjQueryの違い
この章では、純粋なJavaScriptとjQueryの違いについて具体的なコードで見ていきましょう！
主に、基本概念の違いとHTML要素を取得する際の書き方例について学んでいきます。
基本となる概念の違いについて
JavaScriptとjQueryの違うところを1つ挙げるとすれば、それは基本的な概念の違いになるでしょう。
jQueryは基本的にHTML要素（DOM要素）に対して「どんな処理をしたいか？」という書き方をするのが特徴です。
|
1 |
【 HTML要素 ＋ 実行したい処理 】 |
jQueryにはさまざまなメソッドがあらかじめ提供されているのですが、そのほとんどは上記のような形式で利用するものばかりです。
これは書き方をなるべく統一することで、初心者でもより使いやすくできるというメリットがあります。
対してJavaScriptでも同じことはできるのですが、特に書き方が決まっているわけではないので自由にプログラミングできる反面、初心者には意外と難しく感じる部分でもあるわけです。
セレクタ指定でHTML要素を取得する
それでは、実際に簡単なjQueryプログラミングを試してみましょう！
例えば、「h1要素」に対して「文字列を変更したい」と考えたとします。
すると、前章で解説したように【 h1 ＋ 文字列を変更する 】という組み合わせになるわけです。
jQueryでは「セレクタ指定」と言って「$(‘ ‘)」の中に「h1要素」を記述するだけで目的のHTML要素を対象にすることができます！
|
1 |
$('h1') |
また、h1要素の文字列を変更したければ「text()」メソッドが標準で用意されています。
|
1 |
text('Hello World') |
「text( )」の中に文字列を記述するだけで、その文字列が画面に出力されるわけです。
以上の内容をまとめると次のようなコードになります！
|
1 |
$('h1').text('Hello World'); |
jQueryでは「.（ドット）」で連結することで、HTML要素と行いたい処理を組み合わせることができるのです。
セレクタ指定について、さらに詳しい使い方や活用事例を次の記事でまとめているので知識を深めたい方は参考にしてみてください！
JavaScriptとjQueryの使い分け
今度はJavaScriptかjQueryをどのように使い分ければ良いのかを見ていきましょう！
ポイントはいくつかありますが、以下の3つは抑えておくべきでしょう。
・パフォーマンス
・拡張性
「クロスブラウザ対応」というのは、IE(Edge) / Firefox / Chromeなどの各種ブラウザの差異をいかに吸収できるか？という意味になります。
実は、ブラウザによってJavaScriptの挙動が微妙に違うケースが多々あります。（特にIEは多い）
jQueryではこれらブラウザの違いをあらかじめ吸収できるように設計されているので、普通にプログラミングしていれば特に問題を感じなくても良いのは最大の魅力でもあります。
「パフォーマンス」は、純粋なJavaScriptの方が断然速いです。
先ほど解説したようにjQueryではブラウザの違いを吸収するなど、さまざまな処理がバックグラウンドで動いているのでその分どうしても少し遅くなる傾向があります。
「拡張性」というのは、jQueryの場合さまざまな用途に使えるプラグインが多数リリースされており、それらを組み合わせるだけで機能を追加できるという強みがあります。
これらを総合的に判断すると、パフォーマンスをそれほど重視しない小~中規模程度のプロジェクトであればjQueryが持つ恩恵を受けやすいと言えるでしょう。
jQueryの仕事市場は？
「jQueryだけ覚えても仕事はできますか？」と聞かれることがあります。
jQueryだけだとちょっと厳しいかもしれません。
ただ、HTMLやCSSの知識を身につける、UIやUXの知識を身につける、他のJavascriptライブラリも使えるようにするなど、少し頑張れば仕事はたくさんあります。
そこで、WEB制作案件が多いおすすめのサイトを2つご紹介します。
「レバテッククリエイター」による案件
仕事紹介サイトでは大手であるレバテックのクリエイター部門です。
WEBデザイナー、HTMLコーダー、UI/UXデザイナーなどクリエイティブな仕事専門で仕事を紹介してくれます。
jQueryを使う仕事がたくさんあるので、ぜひ抑えておきたいサイトです。
「SKILL SURFING」による案件
「SKILL SURFING」は、スタッフさんのIT知識が豊富です。
キャリア相談にも積極的にのってくれるので、jQeuryをもとに自分のキャリアを作っていくのもいいでしょう。
仕事の案件も幅広いので、目を通しておきたいサイトです。
jQueryのおすすめ学習方法は？
jQueryの特徴や使い道がなんとなく理解できたら、最後はおすすめの学習方法をご紹介します。
初心者がやるべきこと
jQueryは、HTMLやCSSなどに比べて学習教材が少なかったりするので、どうやって学べば良いのかわかららなかったりすると思います。
しかし、おすすめの学習教材や、学ぶ順番、実践的に使いこなすコツなどはしっかりありますので、それらを学んで、効率よく習得していきましょう！
jQueryのおすすめ学習方法に関して詳しくはこちらからどうぞ。
書籍で学習
jQueryのみならず、プログラミングの基礎をしっかりと固めたり、幅広い知識を身につけるのであれば書籍での学習が一番です。
jQueryの使い方が分かってきたら、次は基礎を固めるために書籍を使って幅広い知識を身につけるようにしましょう！
実践で使われる技術を解説している書籍も多いので現場で役に立ちます。
そんな実践的な知識を学べるオススメの書籍はこちらでご紹介しているので、ぜひ参考にしてみてください！
プログラミングスクールに通う
誰でもお金を掛けずに、プログラミングを習得したいと思いますよね。
しかし、独学での学習にはリスクも伴います。それは最適な教材を自分で見つけなければならないということです。
最適な教材で学習をしなければ、学習時間が増えるどころかモチベーションの維持ができず途中で挫折してしまうこともあります。
もし独学での学習に限界を感じてしまったら、プログラミングスクールに通うのも1つの方法です。
という方は、まず毎月400名以上が受講している無料体験レッスンにてコンサルタントにプログラミング学習の悩みや不安、仕事獲得方法、業界知識など相談してみてはいかがでしょうか？
無料体験レッスンではさらに3大特典として、
- 「最短1ヶ月で開発ができる学習方法」電子書籍（非売品）
- 効率的なオリジナル学習カリキュラム
- 未経験の転職を可能にするキャリアサポート
また、無料体験レッスン受講後にはAmazonギフト券1000円分プレゼント中！以下のカレンダーから1分で予約でき、オンライン受講も可能ですので、ぜひご活用ください。
まとめ
いかがでしたでしょうか？
入門者にもわかりやすいように、jQueryの特徴や使い道、おすすめ学習方法などをご紹介してきました。
他にもJavaScriptライブラリがたくさんある中、jQueryが選ばれるにはそれなりの理由があったのです。
ぜひ、jQueryを身につけて素敵なWEBサイトやWEBアプリを作ってみましょう！
