jQueryとは？【小学生にもわかりやすく解説】
TAKUYA
はじめに
WEBサイト制作やWEBプログラミングを勉強している人なら、一度はjQueryという言葉を聞いたことがあるかと思います。
jQueryを使えるようになれば複雑なアニメーションや動きなどを簡単に実装することができる便利なものなので、WEB制作やプログラミングで稼げるようになりたいという人は習得が必須であるとも言えます。
今回の記事では、jQueryの特徴からどんなことができるのかを、小学生にもわかりやすく現役WEBディレクターが解説していきます。
jQueryとは
jQueryとは、JavaScriptの書き方を簡単にすることができる「JavaScriptのライブラリ」です。
「ライブラリ」とはなにかというと、ある程度まとまったプログラムをあらかじめ用意してくれているファイルのことです。
少しわかりづらいので例を見てみましょう。
jQueryは料理で例えると、あらかじめ材料を切ってくれていて、すぐに料理することができるように準備してくれている「カット済み野菜」のようなイメージです。はじめから切ってある材料を使うことができるので、カットする手間を省くことができて簡単に料理ができますよね。
jQueryを使えばJavaScriptで10行書かないといけないコードを1〜2行だけで同じ機能を実装することができるのです。
必要になるコードの数を減らすことができれば単純に作業時間の短縮になりますし、エラー発生の可能性を減らすことにもつながります。
また、jQueryの最も良い点は学習難易度が低いことです。
プログラミング初心者の方であっても、簡単に画像が自動的に動くスライドショーやハンバーガーメニューを実装することができるため、多くの人がフロントエンドエンジニアとして活躍できるようになったのです。
jQueryの特徴
jQueryのおもな特徴には次のようなものがあります。
- どのブラウザでも使える
- HTMLのDOM操作が簡単にできる
- Ajaxを簡単に扱うことができる
ひとつずつみていきましょう。
どのブラウザでも使える
これがjQueryが使われる最も大きな要因とも言えます。
ブラウザには、Windowsに標準で入っているIE（インターネットエクスプローラー）やEdge（エッジ）、GoogleのChrome、iOSのSafariなどがあります。
通常、ブラウザごとに使用が微妙に異なっているため、同じJavaScriptの記述でも正常に動かなかったり、バグが発生してしまう場合があります。
そのためフロントエンド開発の際には、これらのブラウザごとの違いを意識することが必須でしたが、jQueryはブラウザごとの差異を自動的に吸収して、どのブラウザであっても同じ記述で表示してくれるため、ほとんどブラウザの違いを意識せずにプログラミングすることができるのです。
HTMLのDOM操作が簡単にできる
HTMLの部品のことを「DOM」といいます。
DOM操作の例として、以下のようなものがあります。
- クリックしたら画像が入れ替わる
- 入力フォームに入力するとすぐに内容をチェックする
- CSSをユーザー操作に合わせて変更する
上記は、JavaScriptでHTMLやCSSなどを操作することによって実現されています。
しかし、これらの処理をJavaScriptで記述しようとすると膨大な量になるため、表示速度が遅くなってしまうなどの影響が出る場合もありますが、jQueryを使えば、少ないコードの記述量で簡単に実装することができるのです。
Ajaxを簡単に扱うことができる
Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。ページ上でプログラムを実行できるプログラミング言語JavaScriptの拡張機能を用いる。
http://e-words.jp/w/Ajax.html
AjaxとはJavaScriptを使用した非同期通信のことです。
Ajaxが登場する前までは、サーバーからの結果をページに表示させるためにはページを再読み込みさせたりする必要がありましたが、Ajaxを使えばページのページ全体を再読み込みするのではなく、一部分だけを再読み込みしてサーバーからの結果を反映することができるため無駄な通信を省くことができるようになりました。
そのため、ページの表示速度などを格段に速くすることができます。
そんなユーザビリティ（利便性）の向上にもつながるAjaxですが、操作するためにはJavaScriptを使用することが必要でしたが、jQueryを使えば簡単に操作することができるのです。
jQueryを使う注意点
これまでjQueryがいかに優れているかを紹介してきましたが、一方で使用する際の注意点もあります。
フロントエンド開発でjQueryを使用する際に気をつけたい3つのポイントをみていきましょう。
1.処理が遅くなる場合がある
jQueryはWeb制作の際にはライブラリの読み込みをする必要があるので、コードが短い場合はjQueryを使用せずにJavaScriptで記述した方が、ブラウザ上での処理速度が速くなる場合があります。
同じ処理をJavaScriptで記述する場合とjQueryで記述する場合の処理速度を理解した上で、適切な記述方法を選択できるようになりましょう。
2.JavaScriptの理解が疎かになる
jQueryは簡単に記述できる分、JavaScriptの本質的な部分の理解ができないため、エラーが発生した際などに修正対応ができない場合があります。
そのため、jQueryで実装した機能はJavaScriptではどのように記述されて、処理されるのかを理解できるように別途勉強することをおすすめします。
3.フレームワークと競合する
最近のWeb制作の開発現場では、フレームワークと呼ばれるあらかじめ用意されている「枠組み」を使用することで作業効率を上げている現場が増えています。
フレームワークを使用する場合、jQueryの処理と重なってしまうケースもあるのでjQueryなしで開発される現場も少なくありません。
そのため、フレームワークを使用している案件の場合は、jQueryを使用してもきちんと問題なく動作するか、エラーが発生していないかなどを確認しながら開発を進めていく必要があります。
jQueryの使い方
それでは、実際にjQueryの使い方をみていきましょう。
jQueryの読み込み方法には、Webから読み込む方法とダウンロードして読み込む方法の２つがあります。
Webから読み込む方法
Webから読み込む場合はCDNという仕組みを利用して読み込みを行います。
CDNとはContents Delivery Systemの略称で、サーバー上に公開されているプログラムをユーザーが自由に使えることができます。
具体的には、以下のコードをHTML内のbodyタグの最下部に記述するだけでOKです。
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
ダウンロードして読み込む方法
jQueryをダウンロードして使用する場合は、公式サイトのDownloadページからjQueryのソースコードをダウンロードすることができます。
https://jquery.com/download/
「Download the compressed, production jQuery 3.x.x」のリンクを右クリックして、「名前をつけてリンク先を保存」を選択すると、「jquery-3.4.1.min.js」というファイルがダウンロードされます。
上記からダウンロードしたJSファイルを他のJSファイルと同様にHTML上に読みこませればOKです。
まとめ
今回はWeb制作の開発現場でよく使われるjQueryについて解説しました。
jQueryはその利便性から今後もさまざまな開発現場で使用されることが予想されています。
インターネットを通じた接触が増えた現代では、使いやすさの優れたWeb制作が必要不可欠となっています。そのためjQueryを活用して利便性の高いWebサイトを構築することは、Webの開発現場では重要な要素となっています。
Web制作やプログラミングを目指している方は、フロントエンドエンジニアとして活躍するためにjQueryを勉強するのも良いと思います。
