JavaScriptのよく利用する機能をひとまとめにしたjQueryというライブラリが存在します。jQueryを利用することで、より簡単にJavaScriptを扱えるようになります。jQueryは、現在も多くのwebサイトに導入されているライブラリですので、この機会に一緒に学んでいきましょう。
目次
jQuery
jQueryとは何かについて学んでいきます。
jQueryとは
jQueryとは、JavaScriptのライブラリです。
jQueryの機能は主に、DOM操作をより簡単に記述することができます。JavaScriptで実装すると冗長になりがちな処理もjQueryを利用すると数行のコードで実装できるなど、プログラムに詳しくない方でも簡単に扱うことができます。
DOMとは？
DOM とは、「Document Object Model」の略で「ドム」と呼びます。
DOMというのは、HTMLやXML文書を取り扱うためのAPIです。つまり、プログラムからHTMLやXMLを自由に操作するためことができます。
jQueryを利用するメリット
jQueryの代表的なメリットを紹介します。
短いコードで実装できる
処理や機能にもよりますが、ネイティブのJavaScriptに比べ、短いコードでの実装が可能になります。少ないコード量で実装できることから、可読性が高まり、リファクタリングやエラー箇所の発見を含め、工数の短縮にも繋がります。
クロスブラウザ対策
エンジニアが制作時に気をつけなければいけない点として、クロスブラウザ対策があります。クロスブラウザ対策とは、ブラウザ間の表示や動作における差異を打ち消し、どのブラウザでも同じように表示、動作するよう対策することです。
これまでネイティブJavaScriptでは、このブラウザ間の差異を考慮し、実装する必要がありましたが、jQueryを利用することで、クロスブラウザを意識せずとも同じように表示、動作させることが可能になります。
ドキュメントが充実
jQueryは、豊富にドキュメントが用意されています。従って、特別高度な機能を実装しない限り、検索することで解決策やヒントを得ることができます。
プラグインが豊富
jQuery対応のプラグインが豊富に存在します。
プラグインとは、拡張機能を提供するものです。例えば、一から実装するとコード量も多く、複雑になりがちなスライダーなどもプラグインを利用することで、簡単に実装することができます。
注意点として、多くのプラグインを利用すると、プラグイン同士の処理が衝突し、うまく動作しないことがあります。ですので、自作可能な機能はプラグインを利用せずに制作しましょう。
jQueryをダウンロードして使う方法
jQueryをダウンロードする
jQueryを使う方法の一つとして、「jQueryをダウンロードする」というものがあります。
jQueryをダウンロードする流れは次の通りです。
- jQueryの公式ページにアクセスする
- 「Download jQuery」をクリック
- 必要なバージョンのリンクを選択してダウンロード
それぞれ詳しくみていきます。
※画像は2022年4月時点のものです。
jQueryの公式ページにアクセスする
こちらのjQueryの公式ページにアクセスします。
「Download jQuery」をクリック
ページにアクセスしたら、「Download jQuery」をクリックして、ページを移動します。
必要なバージョンのリンクを選択してダウンロード
ページを移動したら、次の箇所に注目しましょう。
そして次の手順を踏んでください。
- 該当箇所を右クリックする
- Macは「リンク先を別名で保存」、Windowsは「名前を付けてリンク先を保存」というのを選択する
- 「jquery.min.js」という名前にして、保存する
ダウンロードしたファイルをプロジェクトフォルダ内に置く
プロジェクトフォルダとは、Webサイト制作に必要なファイルがまとまっているフォルダのことを指します。 ダウンロードしたjquery.min.jsファイルを、プロジェクトフォルダ内に作成したjsフォルダの中にうつしましょう。
これで、jQueryがダウンロードできました。
フォルダ内にあるJavaScriptファイルを使う
フォルダ内にあるCSSをHTMLで読み込むように、JavaScriptもHTMLで読み込んで使用していきます。CSSがlinkタグを使用して読み込んでいたのに対して、JavaScriptは「scriptタグ」というのを使用して読み込みを行います。
次のように、scriptタグを使用してJavaScriptを読み込んでいきます。
<!-- JavaScriptファイルの読み込み方 -->
<script src="JavaScriptファイルまでのパス"></script>なので、上記の方法で作成したjquery.min.jsを読み込む方法としては
<!-- jsフォルダ内にあるjquery.min.jsの読み込み方 -->
<script src="js/jquery.min.js"></script>
<!-- JavaScriptの記述を行うファイル -->
<script src="js/main.js" defer></script>と記述します。
以上で、jQueryをダウンロードし、使用することができます。
また、実際にjQueryのコードを記述するファイル（main.jsなど）は別で作成し、必ずjQueryの読み込みの後に読み込みを行いましょう。
CDNでファイルを読み込む
今まで扱ってきたファイルの読み込み方法としては「同じフォルダ内にあるファイルを相対パスで繋げる方法」を扱ってきました。
今回はそれとは別で「CDN」というファイルの読み込み方法を紹介します。
CDNとは
CDN（コンテンツデリバリーネットワーク）とは、一言で表すと「インターネットからURLを使ってパスを繋いでファイルを読み込む方法」となります。
<!-- CDNでjQueryを読み込む例 -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
></script>
<!-- JavaScriptの記述を行うファイル -->
<script src="js/main.js" defer></script>
CDNの場合でも、jQueryのコードを記述するファイル（main.jsなど）は別で作成し、必ずjQueryの読み込みの後に読み込みを行いましょう。
こちらのsrc属性がURLの形式になっているのがわかると思いますが、こちらのURL先をみてみると、JavaScriptの記述があります。
このようにして、URL先にある記述を読み込むことで、他の人が書いたコードを自分の作成しているWebサイトなどに反映させることができるわけです。
CDNのメリット・デメリット
メリット
CDNを導入するメリットとして、「サーバーの負荷が軽くなる」ということがあります。
サーバーの負荷が軽くなると、さまざまな恩恵が得られますが、現状理解してほしい部分としては「ページを表示する速度が上がる」という部分です。
つまり、CDNを使うと、ページを読み込む時間が短くなり、より快適なWebサイトを作ることが可能になります。
デメリット
CDNを導入するデメリットとして、「URLで繋いで読み込んでいる」ということがます。
URLで繋いでいるということは、その繋いでいる先のサーバーがダウンしたり、ファイルが削除されると、表示がおかしくなる可能性が発生してしまいます。
他にも専門的な内容でデメリットはありますが、「サーバーの負荷が軽くなる」と比べると多くの場合では無視できるものです。
結論として、多くの場合において、CDNで利用できるものはCDNを使うと良いです。
JavaScriptとjQuery
jQueryのメリットとして、「短いコードで実装できる」とありましたが、JavaScriptのコードで書くのと比べて、どの程度短くできるかをみていこうと思います。
例えば、「.btnという要素をクリックした時に.btnに対して.is-activeというclassを付与する」という処理を書くとすると
//JavaScriptのみでの記述
document.querySelector(".btn").addEventListener("click", function () {
this.classList.add("is-active");
});
//jQueryを用いた記述
$(".btn").click(function () {
$(this).addClass("is-active");
});下の、jQueryを用いた記述の方が短く簡潔なのがわかります。
このように、JavaScriptのみの記述よりも比較的簡単に、HTMLの要素に関する操作が行えることから、jQueryを採用している現場が多くあります。
ただし、注意したいのは、Webの表示速度をあげたい場合、jQueryは適さないこともあるので、いずれはJavaScriptでの記述とjQueryを用いた記述の両方を理解できることが望ましいです。
まずは、プログラミングの処理に慣れるために、比較的簡単なjQueryを使いこなせるようになりましょう。
jQueryの雛形
最後に雛形について解説します。
以下がjQueryの雛形となります。雛形コードをコピーし、先ほど作成したmian.jsに貼り付けます。
$(function(){
//ここにjQueryの処理を記述する
});jQueryは、$(function(){ });内にコードを記述する決まりとなっています。
$(function(){ });で囲まれたコードはHTMLの読み込みが終了した段階で実行されるようになります。
以上で、jQueryを利用するための準備が整いました。
外部ファイルは圧縮されたものを利用しましょう
今回は、jQueryについて解説しました。
JavaScriptには、様々なライブラリやプラグインが存在します。
ライブラリやプラグイン等の外部ファイルを読み込む際は、圧縮されたファイルを利用するようにしましょう。ファイルサイズはパフォーマンスに影響を与えますので、画像同様、圧縮したものを利用します。
