【jQueryとは?】その特徴や使い方、JSとの違いを徹底解説!

jquery-basic-re2
佐野裕史
書いた人 佐野裕史
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

こんにちは!インストラクターの佐野です。

「jQuery」という言葉は聞いたことあるけど

「jQueryって何?」
「jQueryって何ができるの?」
「jQueryっていまいちよく分からない」

という方も多いのではないでしょうか?

調べてみても難しい単語が並んでいてよくわからなかったり、学習方法がわからなかったりもすると思います。

そこで今回は、入門者の方でも簡単に理解できるように、jQueryの特徴や使い道、おすすめ学習方法などをわかりやすく解説していきます。

この記事を読むことで、jQueryの便利さや、使い方のイメージを掴むことができるでしょう。

jQueryとは?

jquery-logo

jQueryとは、ジョン・レシグが開発し、2006年1月にリリースしたJavaScriptのライブラリ」です。(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を使用しているようです。

Screenshot 2016-06-19 20.10.22参照元: W3Techs

これは笑ってしまうぐらいすごい数字ですね。

なぜここまで世界中で使われているのでしょうか?

その秘密はjQueryの特徴に隠されています。

世界中で愛されているjQueryの特徴についてみていきましょう!

jQueryの特徴とは?

shutterstock_424958914

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の使い道は?

shutterstock_252720652

jQueryは、JavaScriptからできているので、主にWEBで使われます。

その中でも、特にjQueryが使われているものをご紹介します。

WEBサイトを制作する

WEBサイトの中でも、商用のホームページやECサイトでよく使われています。

ユーザーの注目を引くためにアニメーションを使ったり、次に押してほしいボタンを目立たせて操作を間違えないようにするためなどに使われます。

jQueryは、WEBページの品質を上げるためには欠かせないものです。

WEBアプリを開発する

主に小〜中規模のWEBアプリで使われています。

WEBアプリでは、WEBページ以上にユーザーの使いやすさが重要になってきます。

JavaScriptの技術が勝負を決めるといっても過言ではありません。

なので、ブラウザの違いを気にしないようにするためにjQueryを使うことも多いです。

なお、規模が大きいものは、より簡単に開発ができる「フレームワーク」が優先されます。

jQueryの使い方は?

jquery-howto

ここからは、jQueryの基本となる導入から簡単な使い方までを詳しく見ていきましょう!

jQueryファイルの読み込み方

まずはjQueryを利用するにあたり、一番最初に行うのがjQueryファイルの読み込みです!

冒頭でも解説しましたが、jQueryはあくまでもJavaScriptプログラムですので利用する前に読み込んでおく必要があります。

ファイルの読み込み方法は2種類あります。

1つ目は、ファイルをダウンロードしてから読み込む方法です。

jQueryの公式サイトからファイルをダウンロードしたら、以下のように記述します!

jQueryのファイルを配置しているパスをscriptタグに記述すれば利用可能になるわけです。

また、2つ目の方法としてWebから直接jQueryファイルを指定して読み込む方法もあります!

この方法だと、ファイルをダウンロードしてサーバーへ設置する手間が掛からないので手軽に利用できて便利です。

例えば、jQueryが公式に公開しているファイルパスを利用すると以下のようになります。

この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要素の文字列を変更したければ「text()」メソッドが標準で用意されています。

「text( )」の中に文字列を記述するだけで、その文字列が画面に出力されるわけです。

以上の内容をまとめると、【 $(‘h1’) + text(‘Hello World’) 】という記述で目的が実現できることが分かりますね!

コードにすると次のとおりです。

jQueryでは「.(ドット)」で連結することで、対象要素と行いたい処理を組み合わせることができるのです。

セレクタ指定について、さらに詳しい使い方や活用事例を次の記事でまとめているので知識を深めたい方は参考にしてみてください!

find()で子要素を取得する方法

「find()」メソッドについて基本的な知識を学習していきましょう!

「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッドです。

この子要素は「子孫要素」とも呼ばれたりしますが、分かりやすいように実際のHTMLで見てみましょう!

この例では、いくつかの階層構造になったHTMLが配置されていますね。

例えば、id属性値「wrap」が付与されたdiv要素に対して、1つ下の階層にある「p要素」は子要素と言えます。

そして、同じ階層にあるdiv要素のさらに1つ下の階層にある「a要素」は子孫要素と言えるわけです。

つまり、1つ下の階層にある要素は「子要素」であり、それ以下の階層にある要素に関しては「子孫要素」となります。

「find()」は、この「子孫要素」を操作するのに大変便利です。

「find()」を使った「子孫要素」を操作について、詳しい使い方や活用事例を次の記事でまとめているので知識を深めたい方は参考にしてみてください!

jQueryの仕事市場は?

shutterstock_294788087

「jQueryだけ覚えても仕事はできますか?」と聞かれることがあります。

jQueryだけだとちょっと厳しいかもしれません。

ただ、HTMLやCSSの知識を身につける、UIやUXの知識を身につける、他のJavascriptライブラリも使えるようにするなど、少し頑張れば仕事はたくさんあります。

そこで、WEB制作案件が多いおすすめのサイトを2つご紹介します。

「レバテッククリエイター」による案件

Screenshot 2016-06-20 00.16.30

レバテッククリエイター公式サイト

仕事紹介サイトでは大手であるレバテックのクリエイター部門です。

WEBデザイナー、HTMLコーダー、UI/UXデザイナーなどクリエイティブな仕事専門で仕事を紹介してくれます。

jQueryを使う仕事がたくさんあるので、ぜひ抑えておきたいサイトです。

「SKILL SURFING」による案件

Screenshot 2016-06-20 00.28.48

SKILL SURFING公式サイト

「SKILL SURFING」は、スタッフさんのIT知識が豊富です。

キャリア相談にも積極的にのってくれるので、jQeuryをもとに自分のキャリアを作っていくのもいいでしょう。

仕事の案件も幅広いので、目を通しておきたいサイトです。

jQueryのおすすめ学習方法は?

shutterstock_345116384

jQueryの特徴や使い道がなんとなく理解できたら、最後はおすすめの学習方法をご紹介します。

初心者がやるべきこと

jQueryは、HTMLやCSSなどに比べて学習教材が少なかったりするので、どうやって学べば良いのかわかららなかったりすると思います。

しかし、おすすめの学習教材や、学ぶ順番、実践的に使いこなすコツなどはしっかりありますので、それらを学んで、効率よく習得していきましょう!

jQueryのおすすめ学習方法に関して詳しくはこちらからどうぞ。

書籍で学習

jQueryのみならず、プログラミングの基礎をしっかりと固めたり、幅広い知識を身につけるのであれば書籍での学習が一番です。

jQueryの使い方が分かってきたら、次は基礎を固めるために書籍を使って幅広い知識を身につけるようにしましょう!

実践で使われる技術を解説している書籍も多いので現場で役に立ちます。

そんな実践的な知識を学べるオススメの書籍はこちらでご紹介しているので、ぜひ参考にしてみてください!

まとめ

いかがでしたでしょうか?

入門者にもわかりやすいように、jQueryの特徴や使い道、おすすめ学習方法などをご紹介してきました。

他にもJavaScriptライブラリがたくさんある中、jQueryが選ばれるにはそれなりの理由があったのです。

ぜひ、jQueryを身につけて素敵なWEBサイトやWEBアプリを作ってみましょう!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

佐野裕史

佐野裕史

侍エンジニア塾インストラクター。
主に技術担当をしています。

【経歴】
力仕事、接客業、営業職など様々な業界を経てIT業界に参入。
IT未経験からスタートし、1ヶ月で仕事獲得に奇跡的に成功。
1年半後にフリーランスに転身。

Web開発を主に行っており、得意とするのはRails、Ruby。
【技術スキル】
Rails、Ruby、Swift、Java(Android)、JavaScript

【趣味、趣向】
麻雀
MTG(マジックザギャザリング)
ダーツ、卓球、野球、ボウリングなどの球技

【Facebookページ】
https://www.facebook.com/hiroshi.sano.7
【Twitter】
プログラミング講師@佐野裕史
自分でプログラミングができない人のために情報を発信しています。
お気軽にフォローください。