今さら聞けない！jQueryって何？JavaScriptと関係があるの？

2020/06/09

JavaScriptを勉強していくと、「JavaScriptライブラリ」や「jQuery」、「Bootstrap」、また「Vue.js」、「Node.js」などのキーワードが増えてきます。Web制作のなかでも、効率的な動きをつけるときにJavaScriptライブラリの「jQuery」や「Bootstrap」が使用されます。
わからないことが多すぎるので、一つずつ整理して覚えて行きましょう。

JavaScriptライブラリとは？

JavaScriptライブラリは、開発されたいろんなプログラムを再利用できるようにまとめたものです。アニメーションやメニュー、ページボタンなど、機能や効果を再利用できます。

初めから開発しなくてすむため、制作時間の短縮できることや、ある程度の知識があれば、簡単に制作できることから多くの方が利用しています。

CDN（Content delivery network）から読み込むことができるjQueryやBootstrapなどのライブラリがあります。

jQueryとは？

jQueryとは、JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリです。

引用元：jQuery
https://jquery.com/

何ができるの？

サイトのAPIドキュメントやデモから、何ができるのか確認できます。

メニューやアイコンなどのアニメーションや効果を、インタラクションに追加できます。また、JavaScriptの知識があまりない方でも追加できることから広く利用されるようになりました。

jQueryの大きな特徴は

どのブラウザでも動作する
簡単にHTMLのDOM操作できる
簡単にAjax処理が記述できる

ダウンロード

右上の「Download jQuery」を選択する。

2行目にある「Download the compressed, production jQuery 3.5.1（jquery-3.5.1.min.js）」または、「Download the uncompressed, development jQuery 3.5.1（jquery-3.5.1.js）」のどちらかをダウンロードします。

開発用の場合は、「Download the uncompressed, development jQuery 3.5.1（jquery-3.5.1.js）」をダウンロードします。

jQueryライブラリを開発せずに使用する場合は、「Download the compressed, production jQuery 3.5.1（jquery-3.5.1.min.js）」をダウンロードします。

フォルダに保存し、ファイルを読み込むことで使用できます。
リンク先は、HTMLの<head>内にリンクさせます。

 <script src="保存場所/jquery-3.5.1.min.js"></script>

ダウンロードせずにCDNで使用する場合

ダウンロードせずに、リンクさせるだけで使用することもできます。

CDNとはContent Delivery Network（コンテンツデリバリーネットワーク）の略です。CDNを使うことで、ネットワークに負荷をかけずに高速で使用することができます。

公式のjQuery CDNを利用する場合の記述は下記の通りです。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

Google Hosted Librariesからでも、JavaScriptライブラリを利用することが可能です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

The Google Hosted Libraries is a stable, reliable, high-speed, globally available content distribution network for the most popular, open-source JavaScript libraries.

Google works directly with the key stakeholders for each library effort and accepts the latest versions as they are released.
引用元：Google Hosted Libraries　https://developers.google.com/speed/libraries

おさらい

jQueryをダウンロードしていろいろと、いじってみましょう。