jQueryは一体何ができるの？
JavaScriptとjQueryは何が違うの？
Webサイトの制作で必ずといっていいほど耳にする言葉の1つに、jQueryがあります。jQueryは、Web制作の幅が広がるので習得しておきたいスキルの1つ。
- jQueryは人気が高いJavaScriptライブラリのひとつ
- jQueryを使えばHTML/CSSやAjaxを簡単に扱える
- プラグインによる柔軟な機能拡張やブラウザを選ばない点がjQueryの魅力
なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。
受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。
本記事では、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の大きな魅力でもあるという点は覚えておきましょう！
HTMLやCSSを簡単に操作できる
Webサイトの中には、ユーザーへ訴求するために以下のような動作をつけることがあります。
- クリックしたら画像が入れ替わる
- ボタンにマウスオーバーしたらボタンの色と文字の色が逆転する
- 入力フォームで入力するとすぐに内容をチェックする
- 画面をスクロールしていくと見た目や数値が変わっていく
これらはすべて、JavaScriptを使ってHTMLやCSSを操作することで実現しています。しかし、これらの処理をJavaScriptで書こうとすると膨大なコードになってしまい、Webサイトの容量が増えて表示速度等に影響がでてきます。
jQueryを使えば、短いコードで簡単にHTMLやCSSを操作できて開発の効率が上がるため、頻繁に使われます。
Ajaxが簡単に扱える
Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。
引用：IT用語辞典e-Words
Ajaxは、JavaScriptを使ったサーバーとの非同期通信のことです。
Ajaxが登場する以前は、サーバーとやり取りしてサーバーからの結果をページに反映させるためには、ページを再読み込みさせたり同じデザインの別ページを読み込む必要がありました。しかしAjaxを使うとページと非同期でサーバーと通信できるようになるため、無駄なページの読み込みが削減できます。
例えば、新規のユーザーIDを登録する際の「既に使われているIDです」「使えるIDです」や、申込みフォームの「全角で入力してください」といったものにAjaxが使われています。ユーザービリティの向上にも繋がるAjaxですが、jQueryを使うと簡単に記述できます。
jQueryの特徴とは？
今や、jQueryなしでWeb開発できないと言い切れるほど普及しているjQueryですが、ここまで普及したのは次の2つの特徴があったからです。
- どんなブラウザでも使える
- jQuery UIやjQuery Mobileなどもプラグインで拡張できる
それぞれ解説します。
どんなブラウザでも使える
これが、jQueryが使われる最大の理由です。ブラウザには、Windowsに標準で入っている「IE（インターネットエクスプローラー）」「Edge（エッジ）」、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の基本となる導入から簡単な使い方までを詳しく見ていきましょう！
jQueryファイルの読み込み方法
まずはjQueryを利用するにあたり、一番最初に行うのがjQueryファイルの読み込みです。ファイルの読み込み方法は、以下の2種類。
- ファイルをダウンロードしてサーバーに直接アップする方法
- jQueryの配布元に公開されたファイルを使うCDN
1つ目は、ファイルをダウンロードしてから読み込む方法です。
公式サイトのDownloadページから「Download the compressed, production jQuery 3.x.x」を右クリックし、「名前を付けてリンク先を保存」でダウンロードします。ダウンロードしたファイルをサーバーにアップし、ファイルのパスを使ってscriptタグを作ります。
//ダウンロードした場合のスクリプトタグ <script src="ファイルのパス/jquery-3.5.1.min.js"></script>
このタグをHTMLファイルの<head></head>内に記述します。
2つ目の方法は、jQueryの配布元に公開されたファイルを使う方法（CDN）です。この方法だと、ファイルをダウンロードしてサーバーへ設置する手間が掛からないので、便利です。jQueryが使えるCDNは、以下の3つ。
- jQueryのCDN
- GoogleのCDN
- MicrosoftのCDN
それぞれのURLを使って、scriptタグを作ります。
//jQueryのCDN <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> //GoogleのCDN <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //MicrosoftのCDN <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
3つのうちどれか1つのタグを<head></head>内に記述します。
「min.js」の扱い方について
みなさんは、jQueryファイルに2種類の形式があることに気づきましたか？一般的には「jquery.js」「jquery.min.js」という2種類があるのですが、どちらもまったく同じ動作をします。
それでは、両者の違いは一体どこにあるのでしょうか？ 実は、「min.js」と書かれたファイルは圧縮版（minified）という意味で、改行・コメント・インデントなどをすべて削除しています。これにより、ファイルの容量を限りなく小さくして読み込み時間を高速化しているわけです。
反対に「jquery.js」のファイルは非圧縮版（uncompressed）で、開発者がコードを見ながらデバッグしやすくしています。このような理由から、本番の運用時には「jquery.min.js」のファイルを使用するのがおすすめです。
jQueryの書き方
jQueryの基本構文は次の通りです。
$(“セレクタ”).メソッド(“パラメータ[引数]”);
セレクタには操作対象とするHTMLの要素、メソッドは処理内容を記載します。より具体的で細かい処理を指定したい場合はパラメータを使います。実際に簡単なjQueryプログラミングを試してみましょう！
例えば、「h1要素」に対して「文字列を太字にしたい」場合、セレクタでh1を指定し、CSSを指定するメソッドcss()を使用します。
$('h1').css('’color,'red');
わかりやすくてコードもシンプルですよね。
jQueryを使った実践サンプルプログラム
スクロールを開始したら、ページのTOPへ戻るボタンを表示させるプログラムです。
【スクロール前】
【スクロール後】
スクロールを開始すると、右下に上に戻るボタンが表示されます。具体的なプログラムは以下の通りです。
上に戻るボタンのHTML
<p id="page-top"><a href="#top"><img src="img/btn_gotop.png" alt="TOPへ移動"></a></p>
JavaScript
/***** ページTOP *****/
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#page-top').fadeIn();
} else {
$('#page-top').fadeOut();
}
});
CSS
#page-top{
position: fixed;
right: 20px;
z-index: 1041;
width: 40px;
height: 40px;
background: #323232;
text-align: center;
border-radius: 5px 5px 0 0;
color: #e8e8e8;
}
jQueryを使うと、JavaScriptのコードがスッキリするのがわかるでしょう。今回の例では$(this).scrollTop()だけで、現在のスクロール位置を取得しています。ボタンを表示させるさせないも.fadeIn()・fadeOut()だけなのでわかりやすいですよね。
他のメソッドも知りたい方は、こちらの記事でまとめていますので参考にご覧ください。
JavaScriptとjQueryの違い
JavaScriptとjQueryがセットで紹介されることも多く、実は違いがよくわからないという方もいらっしゃるのではないでしょうか？
JavaScriptはプログラミング言語です。一方で、jQueryはライブラリーと呼ばれるプログラムの集合体。jQueryの中身はJavaScriptで構成されたプログラムです。
JavaScriptで書くと数十行かかる処理が、jQueryならたった1行でできるようになります。つまり、同じ処理でもコードの行数に違いが出てくるということ。記述量が少なくシンプルになるため、エラー時の見直し作業など開発の負担が減り、効率的に開発できるようになります。
JavaScriptとjQueryの使い分け
今度はJavaScriptかjQueryをどのように使い分ければ良いのかを見ていきましょう！ポイントはいくつかありますが、以下の3つは抑えておくべきでしょう。
- クロスブラウザ対応
- パフォーマンス
- 拡張性
「クロスブラウザ対応」というのは、IE(Edge) / Firefox / Chromeなどの各種ブラウザの差異をいかに吸収できるか？という意味になります。実は、ブラウザによってJavaScriptの挙動が微妙に違うケースが多々あります。（特にIEは多い）jQueryではこれらブラウザの違いをあらかじめ吸収できるように設計されているので、普通にプログラミングしていれば特に問題を感じなくても良いのは最大の魅力です。
しかし「パフォーマンス」は、純粋なJavaScriptの方が断然速いです。先ほど解説したようにjQueryではブラウザの違いを吸収するなど、さまざまな処理がバックグラウンドで動いているのでその分どうしても少し遅くなる傾向があります。「拡張性」というのは、jQueryの場合さまざまな用途に使えるプラグインが多数リリースされており、それらを組み合わせるだけで機能を追加できるという強みがあります。
これらを総合的に判断すると、パフォーマンスをそれほど重視しない小~中規模程度のプロジェクトであればjQueryが持つ恩恵を受けやすいと言えるでしょう。
挫折なくjQueryの習得を目指すなら
jQueryの特徴を知り「学んでみようかな」と興味が湧いてきた方のなかには、
途中で挫折したらどうしよう…
と不安な方もいますよね。
いまでは無料で利用できる学習サイトやWebサービスもあるため、お金をかけなくても独学でjQueryを学ぶのは可能です。
ただ、手軽に学べるようになった反面いざ勉強を始めると、学習途中に挫折する独学者は多くいます。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
また、多くの無料学習サイトやWebサービスには不明点を質問・相談できる機能がありません。
こうした背景もあってか、プログラミング学習サイトの活用経験者100名に「再度学習サイトで学ぶと仮定した際、利用したいと考える学習サイト」を聞いたところ、50%が「不明点を質問・相談できる学習サイト」と回答しています。
調査概要：プログラミング学習サイトの活用経験がある人への意識調査
調査期間：2022/9/9~2022/9/19
対象者：プログラミング学習サイトを活用した経験がある10~60代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
いざ独学でjQueryを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「スキルを身につけるのって思っていたよりも難しいんだな…」とjQueryの習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できるほど実践的なスキルが身につかなければ、結局後悔することになります。
そのため、1人でjQueryを習得できるか不安な方は数千円の費用をかけてでも、問題が発生したタイミングで現役エンジニア等に質問できる有料の学習サイトを選ぶのが賢明といえます。
そこで、おすすめしたいのが「侍テラコヤ」です。
jQueryが学べる侍テラコヤの教材例
・jQueryの基礎を学ぼう
・jQueryで動きがあるWebサイトを効率的に作ろう
jQueryの使い方から動的Webサイトの制作スキルまで習得できます。
侍テラコヤをおすすめする最大の理由は「登録無料で現役エンジニアに質問しながら学習を進められるコスパの良さ」にあります。
先ほど述べたとおり、独学者の多くは自力でエラーを解決できないためにプログラミング学習を挫折しています。そのため、初学者が現役エンジニアのようなプロに質問や相談ができない環境でプログラミングスキルを習得するのは難易度が高いといえます。
しかし、侍テラコヤでは
- 現役エンジニアが応える回答率100％のQ%A掲示板
- 必要に応じて受けられる現役エンジニアとのオンラインレッスン
- 勉強の進み具合やこれまでの学習時間を確認できる「学習ログ」
といったサポート体制を整えているため、学習中に出てきた不明点を解決しながら挫折なくjQueryが習得可能です。
Q&A掲示板の例
Google検索等で解決できなかった抽象度の高い質問も解決可能
下記の口コミからも、侍テラコヤなら挫折しづらい環境で学習を進められるといえます。
侍テラコヤ利用者の口コミ
また、侍テラコヤは入会金不要・いつでも退会OKに加え、利用から1ヵ月の間は「全額返金保証制度」が適用されるので「他のサービスを選べばよかった」と後悔する心配もありません。
なぜ侍テラコヤがコスパよくjQueryを習得できるのか気になる方はぜひ公式サイトをご覧ください。
公式サイトで詳細を見るまとめ
以上、jQueryについて紹介してきました。jQueryは、JavaScriptのライブラリーで機能をまとめたプログラムの集合体です。中身はJavaScriptになっていて、本来なら数十行かかる処理をたった数行で実現できて非常に便利です。
どのブラウザでも同じように使えるため、Web制作で普及しています。jQueryを使うとWeb制作の幅が広がるので、スキルとして習得しておきましょう！おすすめの学習方法をまとめている記事もありますので、jQueryを本格的に勉強したいと思った方は、ぜひ目を通してみてください。
