ライブラリとは
よく利用される機能を切り出して、再利用しやすいようにまとめたものです。
jQuery（ジェイクエリー）とは？…
JavaScriptの様々な表現機能を使いやすくまとめたライブラリの一つです。予め様々な動作について定義されているので、短いコードを書くだけで実装が可能になります。
JavaScriptとjQueryのコードの違い
#SiteNavi 内の<li>の文字色を変更する場合
▼もとになるHTML
<ul id="SiteNavi">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>▼Javascriptで書く場合//javascript
const navi = document.getElementById('SiteNavi');
const list = navi.getElementsByTagName('li');
for (let i = 0; i < list.length; i++) {
const item = list[i];
item.style.color = "red";
}ID名の取得、タグ名の取得のあと<li>タグの数だけ、赤色にする命令を繰り返しています。
↓↓↓
▼jQueryで書く場合
//jQuery
$('#SiteNavi li').css('color','red');$マークが付くのが特徴です。1行のコードで同じ動作を実現できます
jQueryのこれから
jQueryを使うことで、簡単にコードが書けるメリットがありますが、使うためにはjQuery本体を読み込む必要があり、複雑な処理をする場合には、動作が遅くなる場合があります。
また、jQuery最盛期と比べ、JavaScriptで表現できることが増え、必ずしもjQueryを使わなくてもよくなりました。
そのため、jQueryを使わない開発も増えています。
高度な技術を使わないサイト制作や、部分的な機能追加が目的の場合には、jQueryは、非プログラマーにも使用しやすい面があります。私見ですが、現状では、必要に応じて使っていくのがよいのではないかと思います。
【おまけ】Vanilla JS（バニラJS）
ライブラリやフレームワーク1*を使っていない素のJavaScriptのことをVanilla JSと呼ぶことがあります。かつて、jQueryで行っていたHTML要素の取得や操作は、現在はJavaScriptのみで実装できます。外部のライブラリを使わなくても、（プレーンなバニラの）JavaScriptで色々なことができる、という意味が込められています。http://vanilla-js.com/ は、そんなVanilla JSを紹介したジョークサイトです。
jQueryの導入方法
- jQuery本体をダウンロードして、サイトフォルダに入れて参照
- CDN( Contents Delivery Network ) でホストされているライブラリを利用
→インターネット上に置かれているファイルを利用
1. ダウンロードして使う場合
※一度ダウンロードしておけば、インターネットにつないでいない状況でも動作確認ができます
①公式サイトからダウンロード。基本は最新版を利用。
②ダウンロードページからリンクをクリックすると、文字がたくさんならんだ画面になるので、別名保存で「jquery-x.x.x.js」のような形で保存し、サイトフォルダ内に入れる
- Download the compressed → 軽量化バージョン jquery-x.x.x.min.js
- Download the uncompressed → 通常バージョン jquery-x.x.x.js
※軽量化バージョンは、スペースや改行が省略されていて、データが軽くなっています。ファイルが軽い方が読み込みが早いため、通常は軽量化バージョンを使います
③HTMLファイルの<head>に、下記の一行を追加（実際のファイル名に合わせます）
<script src="js/jquery-x.xx.x.js"></script>※この例の場合、jsフォルダ内に、jqueryファイルを入れている状態です
2.CDN2を利用する場合
インターネットに接続した状態で作業できるのであれば、CDNの読み込みで使用可能です。（ファイルのダウンロードが不要になります）
①下記サイトより最新版を確認
- jQuery公式サイト：https://releases.jquery.com/
- Google 版：https://developers.google.com/speed/libraries/
②コードをHTMLの<head>にコピー
integrity の部分は、CDNからコードを読み込むときに、意図しない改ざんなどがないかチェックするための文字列です。サイトの指示通りにコピーしてください。
注釈